@import "variables";
.first-letter-red {
	&:first-letter {
		font-weight: bold;
		color: $color_red;
	}
}

.fs-12 {
	font-size: 12px !important;
	line-height: 1.25;
	@media (max-width: 767px){ font-size: 14px; }
}
.fs-13 {
	font-size: 13px !important;
	line-height: 1.5;
	@media (max-width: 767px){ font-size: 14px; }
}
.fs-14 {
	font-size: 14px !important;
	line-height: 1.5;
	@media (max-width: 767px){ font-size: 16px; }
}
.fs-16 {
	font-size: 16px !important;
	line-height: 1.5;
	@media (max-width: 767px){ font-size: 17px; }
}
.fs-18 {
	font-size: 18px !important;
	line-height: 1.5;
	@media (max-width: 767px){ font-size: 19px; }
}
.fs-20 {
	font-size: 20px !important;
	line-height: 1.5;
	//@media (max-width: 767px){ font-size: 20px; }
}
.fs-22 {
	font-size: 22px !important;
	line-height: 1.5;
}
.fs-24 {
	font-size: 1.75em !important;
	line-height: 1.5;
}
.fs-28 {
	font-size: 2em !important;
	line-height: 1.5;
}
.fs-32 {
	font-size: 2.2em !important;
	line-height: 1.5;
}
.fs-36 {
	font-size: 2.4em !important;
	line-height: 1.5;
}
.fs-40 {
	font-size: 40px !important;
	line-height: 1.5;
}
.fs-42 {
	font-size: 2.8em !important;
	line-height: 1.5;
}
.fs-44 {
	font-size: 3em !important;
	line-height: 1.5;
}
@media (min-width: 576px) {
	.fs-sm-11 { font-size: 11px !important; }
	.fs-sm-12 { font-size: 12px !important; }
	.fs-sm-13 { font-size: 13px !important; }
	.fs-sm-14 { font-size: 14px !important; }
	.fs-sm-16 { font-size: 16px !important;}
	.fs-sm-18 { font-size: 18px !important; }
	.fs-sm-20 { font-size: 20px !important; }
	.fs-sm-22 { font-size: 22px !important; }
	.fs-sm-24 { font-size: 24px !important; }
}
@media (min-width: 768px) {
	.fs-md-11 { font-size: 11px !important; }
	.fs-md-12 { font-size: 12px !important; }
	.fs-md-13 { font-size: 13px !important; }
	.fs-md-14 { font-size: 14px !important; }
	.fs-md-16 { font-size: 16px !important;}
	.fs-md-18 { font-size: 18px !important; }
	.fs-md-20 { font-size: 20px !important; }
	.fs-md-22 { font-size: 22px !important; }
	.fs-md-24 { font-size: 24px !important; }
}
@media (min-width: 992px) {
	.fs-lg-11 { font-size: 11px !important; }
	.fs-lg-12 { font-size: 12px !important; }
	.fs-lg-13 { font-size: 13px !important; }
	.fs-lg-14 { font-size: 14px !important; }
	.fs-lg-16 { font-size: 16px !important;}
	.fs-lg-18 { font-size: 18px !important; }
	.fs-lg-20 { font-size: 20px !important; }
	.fs-lg-22 { font-size: 22px !important; }
	.fs-lg-24 { font-size: 24px !important; }
}
@media (min-width: 1200px) {
	.fs-xl-11 { font-size: 11px !important; }
	.fs-xl-12 { font-size: 12px !important; }
	.fs-xl-13 { font-size: 13px !important; }
	.fs-xl-14 { font-size: 14px !important; }
	.fs-xl-16 { font-size: 16px !important;}
	.fs-xl-18 { font-size: 18px !important; }
	.fs-xl-20 { font-size: 20px !important; }
	.fs-xl-22 { font-size: 22px !important; }
	.fs-xl-24 { font-size: 24px !important; }
}

.fw-thin {font-weight: 200;}
.fw-light {font-weight: 300;}
.fw-normal {font-weight: 400;}
.fw-medium {font-weight: 500;}
.fw-semibold {font-weight: 600;}
.fw-bold {font-weight: 700 !important;}
.fw-extra {font-weight: 800;}
.fw-black {font-weight: 900;}

.lh-n {line-height: normal;}
.lh-1 {line-height: 1;}
.lh-125 {line-height: 1.25;}
.lh-15 {line-height: 1.5;}
.lh-2 {line-height: 2;}

.ws-nw {white-space: nowrap !important;}

.text-underline { text-decoration: underline; }
.text-nowrap { white-space: nowrap !important; }

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

.word-wrap-break { word-wrap: break-word; }

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

.text-shadow-dark {
	text-shadow: 0px 0px 5px #333, 1px 1px 0px #333, 2px 2px 0px #333;
}

/* --- colors --- */
.bg-blue { background: $color_blue; color: $color_white; }
.bg-body { background: #ffffcc; }
.color-white {color: $color_white !important; fill: $color_white;}
.color-black, .black {color: $color_dark !important; fill: $color_dark;}
.color-primary, .color-blue, .blue {color: $color_blue !important; fill: $color_blue;}
.color-danger, .color-red, .red {color: $color_red !important; fill: $color_red;}
.color-green, .green {color: $color_green !important; fill: $color_green;}
.color-success, .color-green-light, .green-light {color: $color_light_green !important; fill: $color_light_green;}
.color-toxic {color: $color_toxic !important; fill: $color_toxic;}
.color-warning, .color-yellow, .yellow {color: $color_yellow !important; fill: $color_yellow;}
.color-gray, .gray {color: $color_gray_30 !important; fill: $color_gray_30;}
.color-gray-40 {color: $color_gray_40 !important; fill: $color_gray_40;}
.color-gray-50 {color: $color_gray_50 !important; fill: $color_gray_50;}
.color-gray-60 {color: $color_gray_60 !important; fill: $color_gray_60;}
.color-gray-80 {color: $color_gray_80 !important; fill: $color_gray_80;}
.color-gray-90 {color: $color_gray_90 !important; fill: $color_gray_90;}
.color-wild { color: $color_wildblue !important; }

.color-violet { color: $color_violet !important; }
.color-secondary, .color-violet-dark { color: $color_dark_violet !important; }
.color-light-violet { color: $color_light_violet !important; }

.text-gray-dark { color: $gray_dark !important; }
.text-gray { color: $gray !important; }
.text-gray-light { color: $gray_light !important; }
.text-gray-lighter { color: $gray_lighter !important; }
.text-blue-lighter { color: $blue_lighter !important; }

.text-primary { color: $blue !important; }
.text-success { color: $green !important; }
.text-success-light { color: $green_light !important; }
.text-danger { color: $red !important; }
.text-warning { color: $yellow !important; }


.opacity-0 { opacity: 0; }
.opacity-1 { opacity: 0.1; }
.opacity-2 { opacity: 0.2; }
.opacity-3 { opacity: 0.3; }
.opacity-4 { opacity: 0.4; }
.opacity-5 { opacity: 0.5; }
.opacity-6 { opacity: 0.6; }
.opacity-7 { opacity: 0.7; }
.opacity-8 { opacity: 0.8; }
.opacity-9 { opacity: 0.9; }
.visibility-hidden { visibility: hidden; }

/* --- img --- */
.img-block {
	position: relative;
	display: block;
	width: 100%;
	img {
		display: block;
		width: 100%;
	}
	&.border {
		border: 1px solid $color_gray_10;
	}
	&.shadow {
		@include box-shadow(0 0 12px $color_gray_30);
	}
}
.img-block-preview {
	background: $white;
	img {
		display: block;
		max-width: 100%;
		margin: 0 auto;
	}
}
.img-thumbnail {
	position: relative;
	margin: 0; padding: 0;
	border-color: $color_gray_10 !important;
	@include border-radius(0px);
	&.px2 { border-width: 2px; }
	&.red { border-color: $color_red; }
}
.img-circle { @include border-radius(50% !important);}

.shadow {
	//@include box-shadow(0px 0px 3px $color_gray_20);
}
.flag-rounded {
	@include border-radius(2px);
}
.flag-shadow {
	@include box-shadow(0 0 4px rgba(0,0,0,0.25));
}

.flag-inline {
	position: relative;
	display: inline-block;
	padding-left: 28px;
	img {
		position: absolute; top: 50%; left: 2px;
		display: block;
		width: 16px;
		@include transform(translateY(-50%));
	}
	&:not(.clean) {
		img {
			@include box-shadow(0px 0px 3px $color_gray_50);
		}
	}
}
.flag-d-inline {
	position: relative;
	display: inline-block;
	vert-align: middle;
	img {
		display: inline-block;
		vertical-align: middle;
		height: 16px;
		@include box-shadow(0px 0px 4px $color_gray_20);
	}
	span, strong {
		display: inline-block;
		vertical-align: middle;
		margin-left: 4px;
	}
}

/* --- alerts --- */
.alert {
	position: relative;
	margin-bottom: 0px;
	color: $color_dark;
	@include border-radius(4px);

	p { margin: 0px 0px .75em 0px; }

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

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

	.alert-closer {
		top: 4px;
		right: 4px;
		width: 20px;
		height: 20px;
		@media(max-width: 767px){
			top: 2px;
			width: 24px;
			height: 24px;
		}
	}
	.alert-body {
		padding: 0 28px;
		@media(max-width: 767px){
			padding: 0 32px 0 0;
		}
	}

	&.alert-default {
		background: $color_gray_30;
		border: 1px solid $color_gray_30;
		color: $color_white;
		a:not(.btn) {
			border-bottom-color: rgba(255,255,255,0.5);
			color: inherit;
			&:hover {
				border-bottom-color: $color_white;
			}
		}
	}
	&.alert-success {
		background: lighten($color_toxic, 25%);
		border: 1px solid lighten($color_toxic, 15%);
	}
	&.alert-success-dark {
		background: $green_light;
		border: 1px solid $green_light;
	}
	&.alert-info {
		background: $color_water;
		border-color: $color_water;
	}
	&.alert-warning {
		background: lighten($color_yellow, 30%);
		border: 1px solid lighten($color_yellow, 20%);
	}
	&.alert-danger {
		background: lighten($color_red, 45%);
		border: 1px solid lighten($color_red, 40%);
	}
	&.alert-outline-danger {
		border: 2px solid $red;
	}
	&.alert-important {
		background: #ffca35;
		border-color: #ffca35;
	}
}
strong.alert, span.alert {
	display: inline-block;
}

.highlight {
	padding: 0px 4px;
	//@include border-radius(2px);
	&.highlight-mystic {
		background: $color_mystic;
	}
	&.highlight-warning {
		background: $color_yellow;
	}
	&.highlight-success-light {
		background: #b8e986;
	}
	&.highlight-body {
		background: $color_body;
	}
}
em.highlight {
	font-style: normal;
	padding: 0px;
}

.widot {
	position: relative;
	i {
		position: absolute; top: 50%; left: 0;
		display: block;
		@include border-radius(50%);
	}
	&.widot-12 {
		padding-left: 16px;
		i {
			width: 12px;
			height: 12px;
			margin-top: -5px;
			font-size: 8px;
			line-height: 12px;
			color: $white;
			text-align: center;
		}
	}
	&.widot-16 {
		padding-left: 24px;
		i {
			width: 16px;
			height: 16px;
			margin-top: -8px;
			font-size: 10px;
			line-height: 16px;
			color: $white;
			text-align: center;
		}
	}
	&.widot-primary {
		color: $blue;
		i {
			background: $blue;
		}
	}
}

/* --- lists --- */
.list-inline {
	margin-right: -5px;
	&.list-inline-middle {
		& > li { vertical-align: middle; }
	}
	&.list-inline-2 {
		$size : 2px;
		margin-left: -$size/2; margin-right: -$size/2;
		& > li { padding-left: $size/2; padding-right: $size/2; }
	}
	&.list-inline-4 {
		$size : 4px;
		margin-left: -$size/2; margin-right: -$size/2;
		& > li { padding-left: $size/2; padding-right: $size/2; }
	}
	&.list-inline-10 {
		$size : 10px;
		margin-left: -$size/2; margin-right: -$size/2;
		& > li { padding-left: $size/2; padding-right: $size/2; }
	}
	&.list-inline-20 {
		$size : 20px;
		margin-left: -$size/2; margin-right: -$size/2;
		& > li { padding-left: $size/2; padding-right: $size/2; }
	}
	&.responsive-xs {
		& > li {
			@media(max-width: 767px){
				display: block;
				margin-top: 10px;
				&:first-child { margin-top: 0px; }
			}
		}
	}
	&.responsive-xxs {
		& > li {
			@media(max-width: 449px){
				display: block;
				margin-top: 10px;
				&:first-child { margin-top: 0px; }
			}
		}
	}
	&.responsive-sm-down {
		& > li {
			@media(max-width: 991px){
				display: block;
				margin-top: 10px;
				&:first-child { margin-top: 0px; }
			}
		}
	}
}

.list-unstyled {
	&.list-unstyled-4 {
		& > li + li { margin-top: 4px; }
	}
	&.list-unstyled-8 {
		& > li + li { margin-top: 8px; }
	}
	&.list-unstyled-12 {
		& > li + li { margin-top: 12px; }
	}
	&.list-unstyled-16 {
		& > li + li { margin-top: 16px; }
	}
	&.list-unstyled-20 {
		& > li + li { margin-top: 20px; }
	}
	&.list-unstyled-24 {
		& > li + li { margin-top: 24px; }
	}
	&.list-unstyled-5 {
		$size : 5px;
		& > li {
			margin-top: $size;
			&:first-child { margin-top: 0px; }
		}
	}
	&.list-unstyled-10 {
		$size : 10px;
		& > li {
			margin-top: $size;
			&:first-child { margin-top: 0px; }
		}
	}
	&.list-unstyled-15 {
		$size : 15px;
		& > li {
			margin-top: $size;
			&:first-child { margin-top: 0px; }
		}
	}
	&.list-unstyled-20 {
		$size : 20px;
		& > li {
			margin-top: $size;
			&:first-child { margin-top: 0px; }
		}
	}
}

ul.list-group {
	border: 1px solid $color_gray_10;
	margin: 0px; padding: 0px; list-style: none;
	& > li {
		& + li { border-top: 1px solid $color_gray_10; }
		&.active {
			.list-group-item {
				background: $color_blue;
				color: $color_white;
				svg {
					color: $color_white;
					fill: $color_white;
				}
			}
		}
	}
	.list-group-item {
		border: none;
		display: block;
		color: $color_gray_90;
		@include border-radius(0px);
		&:hover {
			background: $color_blue;
			color: $color_white;
			svg {
				color: $color_white;
				fill: $color_white;
			}
		}
	}
}

.list-dotted {
	margin: 0px; padding: 0px; list-style: none;
	& > li, & > dd {
		position: relative;
		margin-top: 4px;
		padding-left: 12px;
		&:first-child { margin-top: 0; }
		&:before {
			content: '';
			background: $color_gray_30;
			position: absolute; top: .7em; left: 0;
			display: block; width: 4px; height: 4px;
			@include border-radius(50%);
		}
	}
	&.fs-12 {
		li {
			&:before { top: 8px; }
		}
	}
}

.box-list-logos {
	position: relative;
}
.list-logos {
	position: relative;
	margin: 0px -8px; padding: 0px; list-style: none;
	font-size: 12px;
	color: $color_wildblue;
	line-height: normal;
	li {
		display: inline-block;
		vertical-align: middle;
		margin: 0px 8px 16px;
		&.sep {
			display: block;
			margin: 0px;
		}
	}
	img, svg {
		display: block;
	}
}

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

.list-btn-aligner {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
	& > li {
		&:not(:first-child){
			margin-top: 12px;
		}
		.dropix {
			display: block;
		}
		.btn {
			display: block;
		}
	}
}

.list-shortener {
	.list-shortener__action {
		padding-left: 0 !important;
		&:before, &:after { display: none; }
	}
	&.wide {
		.d-none { display: block !important; }
		.list-shortener__action { display: none !important; }
	}
}

/* --- navs --- */
.nav-tabs {
	border-bottom-color: $color_gray_10;
	& > li {
		position: relative;
		&:before {
			content: '';
			background: transparent;
			position: absolute; top: 0; left: 0; right: 0;
			z-index: 5;
			display: block; height: 2px;
		}
		& > a, & > span, & .dropdown > a {
			border: 1px solid transparent !important;
			position: relative;
			display: block;
			margin: 0;
			padding: 6px 12px 8px;
			font-size: 16px;
			line-height: normal;
			font-weight: bold;
			color: $color_gray_90;
			@include border-radius(0px);
			&:hover {
				background: transparent;
				border-color: transparent;
				color: $color_blue;
				cursor: pointer;
			}
		}
		.dropdown {
			& > a {
				color: $color_blue;
			}
			.dropdown-menu {
				left: auto;
				right: 0;
				min-width: 180px;
				padding: 0;
				li {
					border: none;
					& + li {
						border-top: 1px solid $color_gray_05;
					}
					a {
						border: none;
						display: block;
						padding: 8px 12px;
					}
				}
			}
			&.open {
				& > a {
					background: $color_gray_05;
					border: none;
				}
			}
		}
		.label {
			position: absolute; bottom: 100%; left: 100%;
			z-index: 7;
			margin: 0 0 -12px -10px;
			padding: 3px 4px;
			font-size: 11px;
			@include border-radius(0);
		}
		.drop {
			background: $color_white;
			border: 1px solid $color_gray_10;
			margin: -1px 0px 0px 0px; padding: 0px; list-style: none;
			position: absolute; top: 100%; right: 0px; z-index: 555;
			min-width: 180px;
			display: none;
			@include border-radius(3px 0px 3px 3px);
			@include box-shadow(0px 0px 5px $color_gray_20);
			li {
				& + li { border-top: 1px solid $color_gray_10; }
				a {
					border: none;
					display: block;
					padding: 6px 12px 8px;
					font-size: 16px;
					line-height: normal;
					font-weight: bold;
					color: $color_gray_90;
					&:hover {
						color: $color_blue;
					}
				}
				&.active {
					a {
						background: $color_blue;
						color: $color_white;
					}
				}
			}
		}
		//&:hover
		&.open {
			span {
				background: $color_white;
				position: relative;
				//z-index: 777;
				border: 1px solid $color_gray_10;
				border-bottom-color: transparent;
			}
			.drop { display: block; }
		}
		&.active {
			&:before {
				background: $color_blue;
			}
			& > a, & > span, & .dropdown > a {
				background: $white;
				border-color: $color_gray_10 !important;
				//border-top-color: $color_blue !important;
				border-bottom-color: transparent !important;
				color: $color_blue !important;
			}
		}
	}

	&.sm {
		& > li {
			position: relative;
			& > a, & > span {
				border: 1px solid transparent;
				position: relative;
				display: block;
				padding: 4px 8px 6px;
				font-size: 14px;
				line-height: normal;
				font-weight: normal;
				color: $color_gray_90;
				@include border-radius(0px);
			}
		}
	}

	&.text-center {
		& > li {
			float: none;
			display: inline-block;
			vertical-align: top;
		}
	}

	&.nav-tabs-inline {
		display: flex;
		& > li {
			float: none;
			/*display: inline-block;
			vertical-align: top;
			white-space: normal;*/
			a {
				white-space: normal;
			}
		}
	}

	&.nav-tabs-responsive {
		white-space: nowrap;
		& > li {
			max-width: 84%;
			a {
				position: relative;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			&.more {}
		}
		@media(max-width: 767px){
			display: flex;
			& > li {
				&.more {
					margin-left: auto;
					.drop {
						max-width: 360px;
						white-space: normal;
					}
				}
			}
		}
		@media(max-width: 575px){
			& > li {
				&.more {
					.drop {
						max-width: 296px;
					}
				}
			}
		}
		/*&.v2 {
			& > li {
				&.more {
					padding-left: 5px;
					& > span {
						background: $blue;
						//margin-top: 4px;
						//padding: 11px;
						color: $white;
						@include border-radius(2px);
					}
				}
			}
		}*/
	}
}
.nav-tabs-scroll {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	&.arrow {
		.nav-tabs {
			li:last-child { margin-right: 40px; }
		}
	}
	.nav-tabs {
		border: none;
		position: relative;
		overflow: hidden;
		overflow-x: auto;
		white-space: nowrap;
		&:before {
			background: $color_gray_10;
			position: absolute; bottom: 0px; left: 0px; right: 0px;
			display: block; height: 1px;
		}
		li {
			display: inline-block;
			vertical-align: top;
			float: none;
			margin-bottom: 0px;
		}
	}
	.nav-tabs-scroll-arrow {
		position: absolute; top: 0; right: 0; bottom: 0;
		width: 32px;
		background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
		background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
		background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
		.fa {
			background: #6E809A;
			position: absolute; top: 9px; right: 0;
			display: block;
			width: 32px;
			height: 32px;
			//margin-top: -16px;
			padding-left: 2px;
			font-size: 20px;
			line-height: 32px;
			text-align: center;
			color: $color_white;
			@include border-radius(50%);
		}
	}
}

.nav-tabs-select {
	position: relative;
	.btn {
		background: $color_gray_05;
		border: 1px solid $color_gray_20;
		position: relative;
		display: block;
		width: 100%;
		padding: 10px;
		color: $color_gray_80 !important;
		text-align: left;
		.fa {
			position: absolute; top: 12px; right: 10px;
		}
		&.btn-primary {
			color: $color_white !important;
		}
	}
	ul {
		background: $color_white;
		border: 1px solid $color_gray_20;
		position: absolute; top: 100%; left: 0px; right: 0px;
		z-index: 99;
		margin: 0px; padding: 0px; list-style: none;
		display: none;
		@include border-radius(3px);
		li {
			& + li {
				border-top: 1px solid $color_gray_05;
			}
			a {
				border: none;
				display: block;
				padding: 7px 10px;
				line-height: normal;
				color: $color_dark;
			}
			&.active { display: none; }
		}
	}
	&.open {
		ul {
			display: block;
		}
	}
}

/* --- panel --- */
.panel {
	position: relative;
	margin: 0px;
	@include border-radius(0px);
	.panel-heading {
		padding: 18px 24px;
		@include border-radius(0px);
		h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
			margin: 0px;
		}
	}
	.panel-body {
		padding: 18px 24px;
		@include border-radius(0px);
		&.sm {
			padding: 8px 12px;
		}
		&.xs {
			padding: 4px 8px;
		}
	}
	.panel-footer {
		padding: 18px 24px;
		@include border-radius(0px);
	}

	&.panel-white {
		border: none;
		@include border-radius(5px);
		@include box-shadow(0 2px 7px 0 rgba(0,0,0,0.15));
	}

	&.panel-round {
		@include border-radius(3px);
		.panel-heading {
			@include border-radius(3px 3px 0px 0px);
		}
		.panel-footer {
			@include border-radius(0px 0px 3px 3px);
		}
	}

	&.panel-tab {
		.panel-heading {
			background: $color_gray_10;
			display: inline-block;
			padding: 4px 12px 2px;
			font-size: 12px;
			font-weight: bold;
		}
		.panel-body {
			border: 4px solid $color_gray_10;
			padding: 8px;
		}

		&.panel-tab_green {
			.panel-heading {
				background-color: #bff4ae;
			}
			.panel-body {
				border-color: #bff4ae;

				.mCustomScrollbar .mCustomScrollBox .mCSB_scrollTools .mCSB_draggerContainer .mCSB_dragger .mCSB_dragger_bar {
					background-color: $color_toxic !important;
				}
			}
		}
	}

	&.panel-default {
		border: 1px solid $color_gray_10;
		@include border-radius(3px);
		@include box-shadow(0 2px 7px 0 rgba(0,0,0,0.1));
	}

	&.panel-success {
		background: #ebffd6;
		border-color: #beeb90;
	}

	&.panel-warning {
		background: lighten($red_light, 5%);
		border-color: $red_light;
	}
	&.panel-outline-warning {
		background: #ffffca;
		border-color: #ffe48a;
	}

	&.panel-gray {
		background: #ededed;
		border-color: #ededed;
	}
	&.panel-outline-gray {
		background: transparent;
		border: 1px solid #DDE4EC;
		&.s4 {
			border-width: 4px;
		}
	}

	&.panel-gray-light {
		background: #F6F6F6;
		border-color: #F6F6F6;
	}

	&.panel-pink {
		background: lighten($color_body, 20%);
		border-color: $color_gray_10;
	}

	&.panel-yellow {
		background: $yellow_light;
		border-color: $yellow_light;
	}

	&.panel-water {
		background: $color_water;
		border-color: $color_water;
	}

	&.panel-violet {
		background: #f2e5f5;
		border-color: #f2e5f5;
		color: #772397;
	}

	//test
	&.panel-table {
		border: 1px solid $color_gray_20;
		position: relative;
		overflow: hidden;
		margin-bottom: 12px;
		@include border-radius(5px);
		@include box-shadow();
		font-size: 14px;
		.panel-heading {
			background: $color_gray_10;
			border: none;
			padding: 6px 8px;
			@include border-radius(5px 5px 0 0);
			.text-xxs-up-right {
				font-size: 12px;
			}
		}
		.panel-body {
			background: $color_white;
			border-top: 1px solid $color_gray_20;
			position: relative;
			padding: 4px 8px;
			&:before {
				content: '';
				background: inherit;
				position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
				display: block;
				height: 5px;
			}
			&:last-child {
				@include border-radius(0 0 5px 5px);
			}
		}
		.panel-footer {
			background: $color_gray_03;
			border: none;
			border-top: 1px solid $color_gray_20;
			padding: 6px 8px;
			font-size: 12px;
			@include border-radius(0 0 5px 5px);
			.btn {
				padding: 2px 8px 3px !important;
				font-size: 12px;
			}
		}
	}
}

/* --- media --- */
ul.media-list {
	margin: 0px; padding: 0px; list-style: none;
	& > li { position: relative; }
	&.media-list-10 {
		& > li {
			& + li {
				margin-top: 10px;
			}
		}
	}
	&.media-list-20 {
		& > li {
			& + li {
				margin-top: 20px;
			}
		}
	}
	&.media-list_table {
		& > li {
			padding: 8px;
			& + li {
				border-top: 1px solid $color_gray_10;
			}
		}
	}
}
.media {
	margin-top: 20px;
	.media-left {
		padding-right: 20px;
		&.media-left_4 { padding-right: 4px; }
		&.media-left_8 { padding-right: 8px; }
		&.media-left_10 { padding-right: 10px; }
	}
	.media-right {
		padding-left: 20px;
		&.media-right_4 { padding-left: 4px; }
		&.media-right_8 { padding-left: 8px; }
		&.media-right_10 { padding-left: 10px; }
	}
	.media-img { padding-top: 4px; }
	.img-responsive { max-width: none; }

	&.media-responsive-xxs {
		@media (max-width : 449px) {
			& > .media-left { display: block; width: auto; margin: 0 !important; padding: 0 0 12px 0 !important; }
			& > .media-right { display: block; width: auto; margin: 0 !important; padding: 12px 0 0 0 !important; }
			& > .media-body { display: block; width: auto; }
			.img-responsive { max-width: 100%; }
		}
	}
	&.media-responsive-xs {
		@media (max-width : 767px) {
			& > .media-left { display: block; width: auto; margin: 0 !important; padding: 0 0 12px 0 !important; }
			& > .media-right { display: block; width: auto; margin: 0 !important; padding: 12px 0 0 0 !important; }
			& > .media-body { display: block; width: auto; }
			.img-responsive { max-width: 100%; }
		}
	}
	&.media-responsive-md {
		@media (max-width : 1199px) {
			& > .media-left { display: block; width: auto; margin: 0 !important; padding: 0 0 12px 0 !important; }
			& > .media-right { display: block; width: auto; margin: 0 !important; padding: 12px 0 0 0 !important; }
			& > .media-body { display: block; width: auto; }
			.img-responsive { max-width: 100%; }
		}
	}
	.img-thumbnail {
		max-width: none;
	}
}


.table-inline {
	tr {
		td {
			padding: 2px 0px 2px 20px;
			&:first-child {
				padding-left: 0px;
			}
		}
	}
}
.table {
	font-family: 'Roboto', sans-serif;
	margin: 0;
	thead {
		tr {
			th {
				background: $color_gray_20;
				border: none;
				line-height: normal;
				vertical-align: middle;
			}
		}
	}
	tbody {
		tr {
			td {
				position: relative;
				border: none;
				border-bottom: 1px solid $color_gray_10;
				vertical-align: middle;
			}
			&:hover {
				td { background: lighten($color_blue, 55%); }
			}

		}
	}

	&:not(.table-no-highlight){
		tbody {
			tr {
				&.highlight {
					td {
						background: $color_body !important;
					}
				}
			}
		}
	}
	&.w-auto { width: auto !important; }
	&.table-sm {
		th { padding: 2px 8px !important; }
		td { padding: 4px 8px !important; }
	}

	&.table-middle {
		th, td { vertical-align: middle; }
	}

	&.table-simple {
		background: none;
		th {
			border: none;
			padding: 8px 0px 0px 8px;
			&:first-child { padding-left: 0px; }
		}
		td {
			border: none;
			padding: 8px 0px 0px 8px;
			&:first-child { padding-left: 0px; }
		}
		tr:first-child {
			th, td {
				padding-top: 0px;
			}
		}
		.table-simple {
			tr {
				th, td {
					padding: 4px 0px 0px 4px;
					&:first-child { padding-left: 0px; }
				}
				&:first-child {
					th, td { padding-top: 0px; }
				}
			}
		}
	}
	&.table-striped {

	}
	&.table-unbord {
		td { border: none; }
	}

	&.table-light {
		thead {
			th, td {
				background: $color_gray_03;
				border-top: 1px solid $color_gray_10 !important;
				border-bottom: 1px solid $color_gray_10 !important;
				padding: 4px 8px !important;
				font-weight: normal;
				line-height: 1.5;
			}
		}
		tbody {
			th {
				background: $color_gray_03;
				border-top: 1px solid $color_gray_10 !important;
				border-bottom: 1px solid $color_gray_10 !important;
				padding: 4px 8px !important;
				font-weight: normal;
			}
			td {
				border-bottom: 1px solid $color_gray_10 !important;
				padding: 4px 8px !important;
			}
		}
	}
	&.table-dashed {
		td {
			border-bottom: 1px dashed $color_gray_20 !important;
		}
	}
}

.table-orders {
	font-size: 12px;
	th { line-height: 16px !important; }
	td { vertical-align: top !important; }
	.table-orders__img {
		background: $color_gray_20;
		position: absolute; left: 0px;
		z-index: 5;
		width: 140px;
		padding: 2px;
		display: none;
		img {
			display: block;
			width: 100%;
		}
	}
	.table-orders__autonum {
		&.hovered {
			background: $color_wildblue;
			color: $color_white;
			a { color: inherit; }
		}
	}
	.table-orders__link {
		position: relative;
		overflow: hidden;
		max-width: 200px;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: $color_blue;
		a {
			border: none;
			position: relative;
			overflow: hidden;
			display: block;
			max-width: 200px;
			white-space: nowrap;
			text-overflow: ellipsis;
			@include transition(none);
		}
		&.hovered {
			background: $color_wildblue;
			color: $color_white;
			a { color: inherit; }
		}
	}
}

.table-va-top {
	td {
		vertical-align: top !important;
	}
}

.table-worktime {
	white-space: nowrap;
	tr {
		td {
			padding: 4px 0 0 8px !important;
			text-align: right !important;
			&:first-child {
				padding-left: 0 !important;
				text-align: left !important;
			}
		}
		&:first-child {
			td {
				padding-top: 0 !important;
			}
		}
	}
	&.v2 {
		tr {
			td {
				padding-top: 0 !important;
			}
		}
	}
}

.table-admin {
	background: $color_light_violet;
	color: $color_violet;
	td {
		border-top: 1px solid lighten($color_violet, 33%);
		padding: 4px 8px;
	}
	tr:first-child td { border-top-color: transparent; }
}

/* --- forms --- */
.form-control {
	border-color: $color_gray_30;
	height: 32px;
	padding: 5px 8px;
	color: $color_gray_90;
	@include border-radius(2px);
	@media (max-width: 449px) {
		padding-top: 8px;
		padding-bottom: 8px;
		height: 38px;
	}
	//@include box-shadow();
	&:focus {
		border-color: $color_blue;
	}
	&.input-sm {
		height: 28px;
		padding: 4px 8px;
	}
	&.input-lg {
		height: 46px;
		padding: 10px 16px;
	}

	&.warning {
		background: $yellow_light;
	}
}
textarea.form-control, textarea.form-control.input-sm, textarea.form-control.input-lg {
	width: 100% !important;
	height: auto;
}
select.form-control {
	padding-left: 8px; padding-right: 8px;
}

.has-error {
	.form-control {
		border-color: $color_red !important;
		color: $color_red !important;
		//@include placeholder($color_red);
	}
}

.form-group {
	position: relative;
	margin: 0;

	.field {
		position: relative;
		.closer {
			display: none;
			top: 50%;
			@include transform(translateY(-50%));
		}
		&.active {
			.closer { display: block; }
		}

		.field-action {
			position: absolute; top: 0; bottom: 0; left: 100%;
			display: none;
			margin-left: 4px;
			.closer {
				right: auto;
				left: 0;
			}
		}

		&.active {
			.field-action { display: block; }
		}
	}

	.help-block {
		margin: 2px 0 4px 0;
		font-size: 0.9em;
		line-height: normal;
		&.hidden {}
	}

	.form-help {
		margin: 2px 0 0 0;
		font-size: 0.85em;
		line-height: normal;
	}

	.form-label {
		margin-bottom: 2px;
	}

	.form-check-hidden { display: none; }
	.form-check.active + .form-check-hidden { display: block; }

	&.has-success {
		label, .form-label { color: $color_green !important; }
		.help-block {
			color: $color_green;
			&.hidden { display: block !important; }
		}
		.form-control {
			border-color: $color_green !important;
			color: $color_green !important;
		}
	}

	&.has-error {
		label, .form-label { color: $color_red !important; }
		.help-block {
			color: $color_red;
			&.hidden { display: block !important; }
		}
		.form-control {
			border-color: $color_red !important;
			color: $color_red !important;
			//@include placeholder($color_red !important);
		}
	}

	&.form-group_placeholder {
		background: $color_white;
		position: relative;
		.form-label {
			position: absolute; top: 6px; left: 9px;
			z-index: 1;
			font-size: 14px;
			@include transition();
			@media (max-width: 449px){ top: 8px; font-size: 16px; }
		}
		.form-control {
			background: none;
			position: relative;
			z-index: 2;
		}
		&.active {
			.form-label {
				top: -20px;
				font-size: 13px;
			}
		}
	}

	&.posa-error {
		.help-block {
			position: absolute; top: 50%; left: 100%;
			margin: 0 0 0 16px;
			padding: 0;
			white-space: nowrap;
			@include transform(translateY(-50%));
		}
	}
}

.form-group-hidden {
	display: none !important;
	.form-group.active + &, .form-group.active ~ & {
		display: block !important;
	}
}

.error-message { color: $color_red !important; }

.input-group {
	.form-field {
		position: relative;
		z-index: 2;
		float: left;
		width: 100%;
		margin-bottom: 0;
	}
	.form-control:not(:first-child):not(:last-child) {
		margin-left: -1px;
		//margin-right: -1px;
	}
	.input-group-btn {
		img {
			display: block;
			height: 32px;
			@media (max-width: 449px){ height: 40px; }
			&.input-group-btn__svg-flag {
				width: 26px;
				@media (max-width: 449px){ width: 32px; }
			}
		}
		&:first-child {
			img { @include border-radius(3px 0px 0px 3px); }
		}
		&:last-child {
			img { @include border-radius(0px 3px 3px 0px); }
		}
	}
	.input-group-addon {
		&.input-group-image {
			padding: 0px;
			img { display: block; height: 30px; }
		}
	}
	&.input-group-lg {
		.input-group-addon {
			&.input-group-image {
				img { height: 44px; }
			}
		}
	}
}

.form-iconbox {
	position: relative;
	.form-iconbox__icon {
		position: absolute; top: 50%;
		img { display: block; width: 100%; }
	}
	.closer {
		top: 50%;
		@include transform(translateY(-50%));
	}
	&.type_external {
		.form-iconbox__icon {left: 100%; margin-left: 10px;}
	}
	&.type_inner {
		&.size_16 {
			.form-iconbox__icon {right: 6px;}
			.form-control { padding-right: 24px; }
		}
		&.size_24 {
			.form-iconbox__icon {right: 8px;}
			.form-control { padding-right: 36px; }
		}
	}
	&.size_16 {
		.form-iconbox__icon {display: block; width: 16px; height: 16px; margin-top: -8px;}
	}
	&.size_24 {
		.form-iconbox__icon {display: block; width: 24px; height: 24px; margin-top: -12px;}
	}
}

.form-field {
	position: relative;
	.form-field__icon {
		position: absolute; top: 50%; right: 10px;
		z-index: 5;
		@include transform(translateY(-50%));
		&.r0 {
			right: 0;
		}
		.closer {
			position: relative; top: auto; bottom: auto; left: auto; right: auto;
			display: block;
		}
	}
	.form-field__request-result {
		background: $color_white;
		border: 1px solid $color_gray_20;
		position: absolute;
		top: 100%; left: 0px;
		min-width: 250px;
		z-index: 5;
		@media(max-width: 449px){
			max-width: 100%;
			overflow-x: auto;
		}
		&.right {
			@media(min-width: 768px){
				top: 0;
				left: 100%;
				max-width: none;
				margin-left: 4px;
			}
		}

		table {
			white-space: nowrap;
			tr {
				th {
					padding: 4px 8px;
				}
				td {
					padding: 4px 8px;
				}
				& + tr {
					td { border-top: 1px solid $color_gray_10; }
				}
				&:hover {
					td { background: $color_water; cursor: pointer; }
				}
			}
		}
	}

	.form-field-marker {
		position: absolute; top: 50%; left: 100%;
		display: block;
		margin: -16px 0 0 40px;
		padding: 0 12px;
		font-size: 14px;
		line-height: 30px;
		white-space: nowrap;
		visibility: hidden;
		opacity: 0;
		&:before {
			content: '';
			position: absolute; top: 0; right: 100%;
			border-width: 15px 12px;
			border-style: solid;
			border-color: transparent;
		}
		&.md {
			margin-top: -23px;
			padding: 8px 16px;
			font-size: 18px;
			@media (max-width: 767px){
				font-size: 14px;
			}
			&:before {
				border-width: 23px 16px;
			}
		}
		&.left {
			left: auto;
			right: 100%;
			margin-left: 0;
			margin-right: 40px;
			&:before {
				right: auto;
				left: 100%;
			}
		}
		&.success {
			background: $green_light;
			&:before { border-right-color: $green_light; }
			&.left {
				&:before {
					border-right-color: transparent;
					border-left-color: $green_light;
				}
			}
		}
		&.danger {
			background: $red;
			color: $white;
			&:before { border-right-color: $red; }
			&.left {
				&:before {
					border-right-color: transparent;
					border-left-color: $red;
				}
			}
		}
		//responsive
		&.responsive-xs {
			@media (max-width: 767px){
				position: relative; top: auto; left: auto; right: auto;
				display: inline-block;
				margin: 10px 0 0 0;
				padding: 4px 8px;
				line-height: normal;
				white-space: normal;
				&:before {
					top: auto; right: auto; bottom: 100%; left: 8px;
					border-width: 8px 8px;
					border-color: transparent !important;
				}
				&.success {
					&:before { border-bottom-color: $green_light !important; }
					&.left {
						&:before {
							right: 8px; left: auto;
						}
					}
				}
				&.danger {
					&:before { border-bottom-color: $red !important; }
					&.left {
						&:before {
							right: 8px; left: auto;
						}
					}
				}
			}
		}
		&.responsive-sm {
			@media (max-width: 991px){
				position: relative; top: auto; left: auto; right: auto;
				display: inline-block;
				margin: 10px 0 0 0;
				padding: 4px 8px;
				line-height: normal;
				white-space: normal;
				&:before {
					top: auto; right: auto; bottom: 100%; left: 8px;
					border-width: 8px 8px;
					border-color: transparent !important;
				}
				&.success:before { border-bottom-color: $green_light !important; }
				&.danger:before { border-bottom-color: $red !important; }
			}
		}
		//&.responsive-md { @media (max-width: 1199px){} }
		&.in {
			visibility: visible;
			opacity: 1;
		}

		.hasOpenBSS & {
			display: none !important;
		}
	}

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

	.form-field-loading {
		position: absolute; top: 50%; left: 100%;
		margin-left: 20px;
		display: none;
		@include transform(translateY(-50%));
		&.in {
			display: block;
		}
	}

	&.watcher, &.vue-watcher {
		&.selected {
			.form-field-reset, .form-field-cross {
				display: block;
			}
			.form-control, .btn-default {
				background-color: lighten($yellow_light, 5%) !important;
			}
		}
	}
}

.form-horizontal {
	.control-label {
		margin-bottom: 4px;
		padding-top: 5px;
		text-align: left;
	}
	.form-horizontal-box {
		position: relative;
		margin-left: -8px;
		margin-right: -8px;
		padding: 8px;
	}
}

.form-table {
	tr {
		td {
			padding: 4px 0px 0px 8px;
			&:first-child { padding-left: 0px; }
		}
		&:first-child {
			td { padding-top: 0px; }
		}
	}
}

.checkbox {
	margin: 0px !important;
	padding: 0px !important;
	min-height: auto !important;
}

.form-subscriber {
	position: relative;
	display: inline-block;
	padding: 4px 8px 8px 4px;
	margin: 0px 0px 0px -4px;
	&:hover {
		@media (min-width: 768px) {
			background: lighten($color_yellow, 35%);
		}
	}

	.form-check {
		&.active {
			.arr {
				background: lighten($color_yellow, 20%);
			}
		}
	}
}

.form-check {
	position: relative;
	input[type=radio], input[type=checkbox] {
		position: absolute; top: 50%; left: 0px;
		margin: 0px; padding: 0px;
		@include transform(translateY(-50%));
	}
	label {
		position: relative;
		display: inline-block;
		padding-left: 24px;
	}
	&:not(.disabled) label:hover {
		cursor: pointer;
	}
	&.stylize {
		input[type=radio], input[type=checkbox] {
			visibility: hidden;
		}
		.arr {
			background: $color_white;
			border: 1px solid $color_gray_50;
			position: absolute; top: 0; left: 0;
			display: block; width: 16px; height: 16px;
			margin-top: .2em;
			&.arr-check {
				@include border-radius(2px);
				/*&:before {
					content: '';
					background: transparent;
					position: absolute; top: 8px; left: 2px;
					display: block; width: 5px; height: 1px;
					@include transform(rotate(45deg));
				}
				&:after {
					content: '';
					background: transparent;
					position: absolute; top: 7px; left: 5px;
					display: block; width: 8px; height: 1px;
					@include transform(rotate(-45deg));
				}*/
			}
			&.arr-radio {
				@include border-radius(50%);
				&:before {
					content: '';
					background: transparent;
					position: absolute; top: 50%; left: 50%;
					display: block; width: 10px; height: 10px;
					margin: -5px 0px 0px -5px;
					@include border-radius(50%);
				}
			}
		}
		&.middle {
			.arr {
				top: 50%;
				margin-top: -7px;
			}
		}
		&.active {
			.arr {
				&.arr-check {
					background: #ffffff url(../images/icons/form-check.png) no-repeat 50% 50% / 100% auto;
					/*&:before {
						background: $blue;
					}
					&:after {
						background: $blue;
					}*/
				}
				&.arr-radio {
					&:before {
						background: $blue;
					}
				}
			}
		}
		&.disabled {
			label {
				color: $color_gray_50;
				&:hover {
					cursor: not-allowed;
				}
			}
			.arr {
				background: $color_gray_10;
				//opacity: 0.5;
			}
		}

		&.fs-16 {
			.arr {
				margin-top: .3em;
			}
		}
	}
}

.label {
	display: inline-block;
	padding: 3px 4px;
	font-size: 100%;
	font-weight: normal;
	white-space: normal;
	color: $color_dark;
	text-align: inherit;
	&.label-primary {
		background: $color_blue;
		color: $color_white;
	}
	&.label-second {
		background: #d9f1f4;
		color: #00718E;
	}
	&.label-success {
		background: #b8e986;
	}
	&.label-default {
		background: $color_gray_40;
		color: $color_white;
	}
	&.label-warning {
		background: $color_yellow;
	}
	&.label-warning-light {
		background: $yellow_light;
	}
	&.label-danger {
		background: $color_red;
		color: $color_white;
	}
	&.label-light-danger {
		background: #FFB3B3;
	}
	&.label-lilac {
		background: $color_light_violet;
		color: $color_dark_violet;
	}
	&.label-violet {
		background: $color_violet;
		color: $color_white;
	}
	&.label-gray {
		background: $gray_light;
	}

	&.label-green {
		background: $color_green;
		color: $color_white;
	}
	&.label-light-green {
		background: #2db92d;
		color: $color_white;
	}

	&.square { @include border-radius(0);}
	&.label-sm {
		padding: 1px 4px;
		font-size: 10px !important;
		font-weight: normal;
	}
	&.label-md, .label-md & {
		font-size: 100%;
		font-weight: normal;
	}
	&.label-lg {
		padding: 5px 8px 6px;
	}
}
strong.label {
	font-weight: bold;
}
a.label {
	border-bottom-color: inherit;
	&:hover { opacity: 0.75; }
}

.html-placeholder {
	background: $white;
	position: relative;
	@include border-radius(2px);
	.placeholder {
		position: absolute; top: 6px; right: 10px; left: 10px;
		z-index: 1;
		font-size: 14px;
		opacity: 0.5;
	}
	textarea {
		background: transparent;
		position: relative;
		z-index: 2;
		&:focus {
			background: $white;
		}
	}
	&.in {
		textarea {
			background: $white;
		}
	}
}

/* --- btns --- */
.btn {
	border: 0 !important;
	position: relative;
	//padding: 4px 12px 6px;
	padding: 6px 8px;
	line-height: 20px;
	color: $color_white !important;
	text-decoration: none !important;
	white-space: normal;
	outline: none !important;
	@include border-radius(3px);
	@include transition();
	@media (max-width: 767px) { font-size: 16px; }
	@media (max-width: 449px) {
		padding-top: 9px;
		padding-bottom: 9px;
	}

	input {
		background: none; border: none;
		position: absolute; top: 0px; left: 0px;
		display: block; width: 100%; height: 100%;
		margin: 0px; padding: 0px;
		opacity: 0;
		&:hover {cursor: pointer;}
	}

	&.btn-rounded {
		@include border-radius(50px);
	}

	&.btn-sm {
		padding: 5px 8px;
		line-height: 18px;
		@media (max-width: 767px) { font-size: 14px; }
	}
	&.btn-md {
		padding: 9px 12px;
		font-size: 16px;
		line-height: 24px;
		@media (max-width: 767px) { font-size: 14px; }
	}
	&.btn-lg, &.input-lg {
		padding: 11px 16px;
		line-height: 24px;
		font-size: 18px;
		@media (max-width: 767px) { font-size: 16px; }
	}

	&.btn-long {
		padding-left: 24px; padding-right: 24px;
		&.btn-sm { padding-left: 16px; padding-right: 16px; }
		&.btn-lg { padding-left: 32px; padding-right: 32px; }
	}

	&.btn-block {
		padding-left: 5px;
		padding-right: 5px;
	}

	&.btn-blank {
		background: $color_white;
		@include box-shadow(inset 0 0 0 1px rgba(0,0,0,0.2));
		color: $color_dark !important;
		&:hover {
			@include box-shadow(inset 0 0 0 1px $color_blue);
			color: $color_blue !important;
		}
	}

	&.btn-default {
		background: rgb(230,230,230);
		background: -moz-linear-gradient(top, rgba(230,230,230,1) 0%, rgba(204,204,204,1) 100%);
		background: -webkit-linear-gradient(top, rgba(230,230,230,1) 0%,rgba(204,204,204,1) 100%);
		background: linear-gradient(to bottom, rgba(230,230,230,1) 0%,rgba(204,204,204,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#cccccc',GradientType=0 );
		//border-color: $color_gray_20;
		color: $color_dark !important;
		&:hover {
			background: rgb(245,245,245);
			background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(217,217,217,1) 100%);
			background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(217,217,217,1) 100%);
			background: linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(217,217,217,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#d9d9d9',GradientType=0 );
			//border-color: $color_gray_10;
		}
	}

	&.btn-primary {
		background: $color_blue;
		//border-color: #2E75D1 transparent #002B81;
		//@include linear-gradient(180deg, #2E75D1 0%, #002B81 100%);
		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%);
		color: $white !important;
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2E75D1', endColorstr='#002B81', GradientType=0 );

		&:not(.sample):hover {
			background: #2E75D1;
			//border-color: #388EFF transparent #003CB5;
			//@include linear-gradient(180deg, #388EFF 0%, #003CB5 100%);
			background: -moz-linear-gradient(top, #388EFF 0%, #003CB5 100%);
			background: -webkit-linear-gradient(top, #388EFF 0%, #003CB5 100%);
			background: linear-gradient(to bottom, #388EFF 0%, #003CB5 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#388EFF', endColorstr='#003CB5', GradientType=0 );
		}
	}

	&.btn-success {
		background: #006700;
		//border-color: #00C800 transparent #006700;
		background: -moz-linear-gradient(top, #00C800 0%, #006700 100%);
		background: -webkit-linear-gradient(top, #00C800 0%, #006700 100%);
		background: linear-gradient(to bottom, #00C800 0%, #006700 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00C800', endColorstr='#006700', GradientType=0 );
		&:hover {
			background: #009900;
			//border-color: #00C800 transparent #009900;
			//@include linear-gradient(180deg, #00C800 0%, #009900 100%);
			background: -moz-linear-gradient(top, #00C800 0%, #009900 100%);
			background: -webkit-linear-gradient(top, #00C800 0%, #009900 100%);
			background: linear-gradient(to bottom, #00C800 0%, #009900 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00C800', endColorstr='#009900', GradientType=0 );
		}
	}

	&.btn-info {
		background: #506585;
		//border-color: #506585;
		//@include linear-gradient(180deg, #98A9C1 0%, #506585 100%);
		background: -moz-linear-gradient(top, #98A9C1 0%, #506585 100%);
		background: -webkit-linear-gradient(top, #98A9C1 0%, #506585 100%);
		background: linear-gradient(to bottom, #98A9C1 0%, #506585 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#98A9C1', endColorstr='#506585', GradientType=0 );
		&:hover {
			background: #5B7498;
			//border-color: #5B7498;
			//@include linear-gradient(180deg, #A5B3C9 0%, #5B7498 100%);
			background: -moz-linear-gradient(top, #A5B3C9 0%, #5B7498 100%);
			background: -webkit-linear-gradient(top, #A5B3C9 0%, #5B7498 100%);
			background: linear-gradient(to bottom, #A5B3C9 0%, #5B7498 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A5B3C9', endColorstr='#5B7498', GradientType=0 );
		}
	}

	&.btn-warning {
		background: #F3B500;
		//border-color: #F3B500;
		color: $color_dark !important;
		//@include linear-gradient(180deg, #FFDA6F 0%, #F3B500 100%);
		background: -moz-linear-gradient(top, #FFDA6F 0%, #F3B500 100%);
		background: -webkit-linear-gradient(top, #FFDA6F 0%, #F3B500 100%);
		background: linear-gradient(to bottom, #FFDA6F 0%, #F3B500 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFDA6F', endColorstr='#F3B500', GradientType=0);

		&:hover {
			background: #FFC20F;
			//border-color: #FFC20F;
			//@include linear-gradient(180deg, #FFE187 0%, #FFC20F 100%);
			background: -moz-linear-gradient(top, #FFE187 0%, #FFC20F 100%);
			background: -webkit-linear-gradient(top, #FFE187 0%, #FFC20F 100%);
			background: linear-gradient(to bottom, #FFE187 0%, #FFC20F 100%);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFE187', endColorstr='#FFC20F', GradientType=0);
		}
	}

	&.btn-danger {
		background: #8A0707;
		//border-color: #8A0707;
		//@include linear-gradient(180deg, #D70A0A 0%, #8A0707 100%);
		background: -moz-linear-gradient(top, #D70A0A 0%, #8A0707 100%);
		background: -webkit-linear-gradient(top, #D70A0A 0%, #8A0707 100%);
		background: linear-gradient(to bottom, #D70A0A 0%, #8A0707 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D70A0A', endColorstr='#8A0707', GradientType=0 );
		&:hover {
			background: #BD0909;
			//border-color: #BD0909;
			//@include linear-gradient(180deg, #FF0D0D 0%, #BD0909 100%);
			background: -moz-linear-gradient(top, #FF0D0D 0%, #BD0909 100%);
			background: -webkit-linear-gradient(top, #FF0D0D 0%, #BD0909 100%);
			background: linear-gradient(to bottom, #FF0D0D 0%, #BD0909 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0D0D', endColorstr='#BD0909', GradientType=0 );
		}
	}

	&.btn-purple {
		background: #772096;
		background: -moz-linear-gradient(top, #C836FC 0%, #772096 100%);
		background: -webkit-linear-gradient(top, #C836FC 0%, #772096 100%);
		background: linear-gradient(to bottom, #C836FC 0%, #772096 100%);
		color: $white !important;
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C836FC', endColorstr='#772096', GradientType=0 );
		&:hover {
			background: #d668fd;
			background: -moz-linear-gradient(top, #d668fd 0%, #9829c0 100%);
			background: -webkit-linear-gradient(top, #d668fd 0%, #9829c0 100%);
			background: linear-gradient(to bottom, #d668fd 0%, #9829c0 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d668fd', endColorstr='#9829c0', GradientType=0 );
		}
	}

	&.btn-cart-1 {
		border-color: $color_blue;
		background: $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 );

		position: relative;
		overflow: hidden;
		padding: 0;
		font-size: 16px;
		line-height: 20px;
		white-space: nowrap;
		span {
			position: relative; z-index: 2;
			display: inline-block;
			vertical-align: top;
			padding: 12px 16px;
		}
		.fa {
			/*background: #002267;
			background: -moz-linear-gradient(top, #255ea7 0%, #002267 100%);
			background: -webkit-linear-gradient(top, #255ea7 0%, #002267 100%);
			background: linear-gradient(to bottom, #255ea7 0%, #002267 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#255ea7', endColorstr='#002267', GradientType=0 );*/
			background: #006700;
			background: -moz-linear-gradient(top, #00C800 0%, #006700 100%);
			background: -webkit-linear-gradient(top, #00C800 0%, #006700 100%);
			background: linear-gradient(to bottom, #00C800 0%, #006700 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00C800', endColorstr='#006700', GradientType=0 );

			position: relative; z-index: 2;
			display: inline-block;
			vertical-align: top;
			padding: 12px 16px;
			line-height: 20px;
		}
		&:before {
			content: '';

			/*background: #002267;
			background: -moz-linear-gradient(top, #255ea7 0%, #002267 100%);
			background: -webkit-linear-gradient(top, #255ea7 0%, #002267 100%);
			background: linear-gradient(to bottom, #255ea7 0%, #002267 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#255ea7', endColorstr='#002267', GradientType=0 );*/
			background: #006700;
			background: -moz-linear-gradient(top, #00C800 0%, #006700 100%);
			background: -webkit-linear-gradient(top, #00C800 0%, #006700 100%);
			background: linear-gradient(to bottom, #00C800 0%, #006700 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00C800', endColorstr='#006700', GradientType=0 );

			position: absolute; top: 0; left: 100%;
			display: block; width: 100%; height: 100%;
			z-index: 1;
			@include transition();
		}

		&:hover {
			&:before {
				left: 0;
			}
		}
	}

	&.btn-body {
		background: $yellow_light;
		border-color: $yellow;
		color: $color_dark !important;
		&:hover {
			background: $yellow;
			border-color: $yellow;
		}
	}

	&.btn-emphasis {
		&.btn-primary {
			animation: emphasisPrimary 3s linear .75s infinite alternate;
			@keyframes emphasisPrimary {
				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)")); }
			}
		}
		&.btn-success {
			animation: emphasisSuccess 3s linear .75s infinite alternate;
			@keyframes emphasisSuccess {
				0%   { @include box-shadow(unquote("0 0 12px rgba(0,103,0,.5)")); }
				50%  { @include box-shadow(unquote("0 0 24px rgba(0,103,0,.8)")); }
				100% { @include box-shadow(unquote("0 0 4px rgba(0,103,0,.5)")); }
			}
		}
	}

	&.btn-link {
		border-color: transparent;
		color: $color_blue !important;
		&:hover {
			text-decoration: underline !important;
		}
	}

	&.disabled {
		background: $color_gray_10 !important;
		border-color: $color_gray_10 !important;
		color: $color_gray_40 !important;
	}

	&.sample {
		cursor: default !important;
	}

	&.btn-ico-16 {
		position: relative;
		padding-left: 32px !important;
		.btn__ico {
			position: absolute; top: 50%; left: 8px; z-index: 5;
			display: block; width: 16px; height: 16px;
			margin-top: -8px;
		}
	}
	&.btn-ico-loading {
		position: relative;
		overflow: hidden;
		display: block;
		height: 32px !important;
		width: 32px !important;
		padding: 0px !important;
		@include border-radius(50%);
		@media (max-width: 449px){
			width: 50px !important;
			height: 50px !important;
		}
		&:before {
			content: '';
			border: 2px solid $color_white;
			border-top-color: transparent;
			position: absolute; top: 0; bottom: 0; left: 0; right: 0;
			display: block;
			@include border-radius(50%);

			animation: btnRotate 1.5s linear infinite;
			-webkit-animation: btnRotate 1.5s linear infinite;

			@keyframes btnRotate {
				0% { @include transform(rotate(0deg)); }
				100% { @include transform(rotate(360deg)); }
			}
			@-webkit-keyframes btnRotate {
				0% { @include transform(rotate(0deg)); }
				100% { @include transform(rotate(360deg)); }
			}
		}
		.btn__ico {
			position: absolute; top: 50% !important; left: 50% !important; z-index: 5;
			display: block; width: 16px !important; height: 16px !important; margin: -8px 0 0 -8px !important;
			@media (max-width: 449px){ width: 24px !important; height: 24px !important; margin: -12px 0 0 -12px !important; }
		}
		.btn__txt { display: none; }
	}
	&.btn-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); }
			}
		}
	}
	&.btn-spin {
		position: relative;
		&:before {
			content: '\f110';
			font-family: 'FontAwesome';
			position: absolute; top: 50%; left: 10px;
			display: block;
			width: 1em;
			height: 1em;
			margin-top: -.5em;
			line-height: 1em;
			text-align: center;
			animation: rotates 1.25s linear infinite;
			@keyframes rotates {
				0% { transform: none; }
				100% { transform: rotate(360deg); }
			}
		}
	}
}

.el-emphasis {
	animation: elEmphasis 2.5s linear 0s infinite;
	@keyframes elEmphasis {
		0%  { box-shadow: 0 0 0 rgba(0,0,0,0.1); }
		30% { box-shadow: 0 0 24px rgba(13,97,171,1); }
		100%  { box-shadow: 0 0 0 rgba(0,0,0,0.1); }
	}
}

/* --- modal --- */
.modal-open {padding-right: 0px !important;}
.modal-backdrop {
	&.in {
		opacity: 0.75;
	}
}
.modal {
	padding-left: 0px !important;
	padding-right: 0px !important;

	.cross {
		background-color: #7D92B3;
		border: none;
		position: absolute; top: 16px; right: 16px; z-index: 5;
		display: block; width: 24px; height: 24px;
		@include border-radius(3px);
		@include transition();
		@media (max-width: 767px) {
			top: 8px; right: 8px;
		}
		&.cross-fixed{
			@include transition(none !important);
		}
		&:before, &:after {
			content: '';
			background: #fff;
			position: absolute; top: 50%; left: 50%;
			display: block; width: 80%; height: 2px;
			@include border-radius(4px);
		}
		&:before {
			@include transform(translateX(-50%) translateY(-50%) rotate(-45deg));
		}
		&:after {
			@include transform(translateX(-50%) translateY(-50%) rotate(45deg));
		}
		&:hover {
			background: darken(#7D92B3, 10%);
			cursor: pointer;
		}
		&.cross_float {
			position: relative;
			top: auto !important; right: auto !important;
			float: right;
			margin: -4px -12px 12px 8px;
			@media (max-width: 575px) {
				margin: -4px -4px 8px 8px;
			}
		}
		&.light {
			background-color: #ccc;
			&:hover {
				background-color: $red;
			}
		}
		&.simple {
			background: transparent;
			top: 6px;
			right: 6px;
			&:before, &:after {
				background: #333;
			}
			&:hover {
				&:before, &:after {
					background: #9b9b9b;
				}
			}
		}
		&.sm {
			top: 8px; right: 8px;
			width: 16px; height: 16px;
		}
		&.responsive-xs {
			@media(max-width: 767px){
				top: 8px; right: 8px;
				width: 16px; height: 16px;
			}
		}
	}
	.modal-dialog {
		position: relative;
		margin: 50px auto;
		@include transform(none !important);
		@include transition(all .3s ease-out 0s !important);
		//min-height: calc( 100% - 100px );
		@media (max-width: 767px){
			margin: 10px;
			//min-height: calc( 100% - 10px );
		}

		/*display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;*/

		&.modal-md {
			max-width: 450px !important;
			margin-left: auto !important;
			margin-right: auto !important;
			padding-left: 12px !important;
			padding-right: 12px !important;
		}
		&.modal-lg {
			width: auto !important;
			max-width: 920px !important;
			margin-left: auto !important;
			margin-right: auto !important;
			padding-left: 12px !important;
			padding-right: 12px !important;
		}
		&.modal-xl {
			width: auto !important;
			max-width: 1164px !important;
			margin-left: auto !important;
			margin-right: auto !important;
			padding-left: 12px !important;
			padding-right: 12px !important;
		}

		.modal-content {
			background: #fff;
			border: none;
			@include border-radius(3px);
			@include box-shadow(0px 2px 4px 0px rgba(0,0,0,0.5));

			/*display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;*/


			.modal-header {
				background: #dde4ec;
				margin: 0;
				padding: 16px 24px;
				padding-right: 48px;
				font-size: 18px;
				line-height: 1.25;
				font-weight: bold;
				@include border-radius(3px 3px 0px 0px);
				&.with-nav {
					border: none;
					padding-bottom: 0;
					.nav-tabs {
						border: none;
						position: relative;
						overflow: hidden;
						white-space: nowrap;
						li {
							display: inline-block;
							vertical-align: top;
							float: none;
						}
					}
					@media (max-width: 767px){
						padding-left: 12px;
						.nav-tabs {
							li {
								a {
									padding-left: 8px;
									padding-right: 8px;
									font-size: 14px;
								}
							}
						}
					}
				}
				&.danger {
					background: $color_red;
					color: $color_white;
					.cross {
						background: $color_white;
						opacity: 0.75;
						&:before, &:after {
							background: $color_red;
						}
						&:hover {
							opacity: 1;
						}
					}
				}
			}
			.modal-body {
				padding: 24px;
				&.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);
				&.white { background: $color_white; }
				&.text-center { text-align: center; }
			}
		}
	}

	&.middle {
		.modal-dialog {
			//margin: 0 auto;
		}
	}

	&.modal-flex {
		width: 100%;
		height: 100%;
		.cross {
			top: 8px; right: 8px;
		}
		.modal-dialog {
			//width: 600px;
			max-width: 100%;
			margin: 24px auto;
			@media (max-width: 767px) {
				margin: 12px;
			}
			@media (min-width: 625px) {
				width: 600px;
				margin-left: auto;
				margin-right: auto;
			}
			.modal-content {
				position: relative;
				display: flex;
				flex-direction: column;
				width: 100%;
				.modal-header {
				}
				.modal-body {
					position: relative;
					flex: 1 1 auto;
					padding: 16px 24px;
					@media (max-width: 575px) {
						padding: 12px;
					}
				}
				.modal-footer {
					background: transparent;
					border: 0;
					padding: 16px 24px;
					&.modal-footer_border {
						border-top: 1px solid rgba(0,0,0,0.1);
					}
					&.modal-footer_shadow {
						position: relative;
						&:before {
							content: '';
							background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
							background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
							background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
							filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
							position: absolute; bottom: 100%; left: 0; right: 0;
							z-index: 5;
							display: block;
							height: 10px;
						}
					}
				}
			}
			&.modal-dialog-centered {
				display: flex;
				align-items: center;
				min-height: calc(100% - 48px);
			}
			&.modal-dialog-scrollable {
				height: calc(100% - 48px);
				@media (max-width: 575px) {
					height: calc(100% - 24px);
				}

				overflow: hidden;
				.modal-body {
					overflow-y: auto;
				}

				.modal-content {
					max-height: 100%;

				}
			}
		}
	}
}

//row-phone
.row-phone {
	margin-left: 0px !important; margin-right: 0px !important;
	$codeW : 96px;
	.row-phone__code {
		float: left;
		width: $codeW;
		.bootstrap-select .btn .filter-option {
			text-overflow: clip !important;
		}
	}
	.row-phone__number {
		margin-left: $codeW + 8;
		input[type=number] {
			-webkit-appearance: none;
			-moz-appearance: none;
			-moz-appearance: textfield;
			appearance: none;
			&::-webkit-outer-spin-button,
			&::-webkit-inner-spin-button {
				-webkit-appearance: none !important;
				-moz-appearance: textfield !important;
				appearance: none;
				margin: 0 !important;
			}
		}
	}
}

/* --- grid --- */
.row-sep-dash {
	position: absolute; top: 50%; left: 50%;
	display: block; width: 20px; height: 20px;
	margin: -10px 0px 0px -10px;
	text-align: center;
	line-height: 16px;
}
.row-0 { margin-left: 0px !important; margin-right: 0px !important; }
.row-0 > .col-xs-1, .row-0 > .col-sm-1, .row-0 > .col-md-1, .row-0 > .col-lg-1, .row-0 > .col-xs-2, .row-0 > .col-sm-2, .row-0 > .col-md-2, .row-0 > .col-lg-2, .row-0 > .col-xs-3, .row-0 > .col-sm-3, .row-0 > .col-md-3, .row-0 > .col-lg-3, .row-0 > .col-xs-4, .row-0 > .col-sm-4, .row-0 > .col-md-4, .row-0 > .col-lg-4, .row-0 > .col-xs-5, .row-0 > .col-sm-5, .row-0 > .col-md-5, .row-0 > .col-lg-5, .row-0 > .col-xs-6, .row-0 > .col-sm-6, .row-0 > .col-md-6, .row-0 > .col-lg-6, .row-0 > .col-xs-7, .row-0 > .col-sm-7, .row-0 > .col-md-7, .row-0 > .col-lg-7, .row-0 > .col-xs-8, .row-0 > .col-sm-8, .row-0 > .col-md-8, .row-0 > .col-lg-8, .row-0 > .col-xs-9, .row-0 > .col-sm-9, .row-0 > .col-md-9, .row-0 > .col-lg-9, .row-0 > .col-xs-10, .row-0 > .col-sm-10, .row-0 > .col-md-10, .row-0 > .col-lg-10, .row-0 > .col-xs-11, .row-0 > .col-sm-11, .row-0 > .col-md-11, .row-0 > .col-lg-11, .row-0 > .col-xs-12, .row-0 > .col-sm-12, .row-0 > .col-md-12, .row-0 > .col-lg-12 { padding-left: 0px !important; padding-right: 0px !important; }
.row-10 { margin-left: -5px !important; margin-right: -5px !important; }
.row-10 > .col-xs-1, .row-10 > .col-sm-1, .row-10 > .col-md-1, .row-10 > .col-lg-1, .row-10 > .col-xs-2, .row-10 > .col-sm-2, .row-10 > .col-md-2, .row-10 > .col-lg-2, .row-10 > .col-xs-3, .row-10 > .col-sm-3, .row-10 > .col-md-3, .row-10 > .col-lg-3, .row-10 > .col-xs-4, .row-10 > .col-sm-4, .row-10 > .col-md-4, .row-10 > .col-lg-4, .row-10 > .col-xs-5, .row-10 > .col-sm-5, .row-10 > .col-md-5, .row-10 > .col-lg-5, .row-10 > .col-xs-6, .row-10 > .col-sm-6, .row-10 > .col-md-6, .row-10 > .col-lg-6, .row-10 > .col-xs-7, .row-10 > .col-sm-7, .row-10 > .col-md-7, .row-10 > .col-lg-7, .row-10 > .col-xs-8, .row-10 > .col-sm-8, .row-10 > .col-md-8, .row-10 > .col-lg-8, .row-10 > .col-xs-9, .row-10 > .col-sm-9, .row-10 > .col-md-9, .row-10 > .col-lg-9, .row-10 > .col-xs-10, .row-10 > .col-sm-10, .row-10 > .col-md-10, .row-10 > .col-lg-10, .row-10 > .col-xs-11, .row-10 > .col-sm-11, .row-10 > .col-md-11, .row-10 > .col-lg-11, .row-10 > .col-xs-12, .row-10 > .col-sm-12, .row-10 > .col-md-12, .row-10 > .col-lg-12 { padding-left: 5px !important; padding-right: 5px !important; }
.row-20 { margin-left: -10px !important; margin-right: -10px !important; }
.row-20 > .col-xs-1, .row-20 > .col-sm-1, .row-20 > .col-md-1, .row-20 > .col-lg-1, .row-20 > .col-xs-2, .row-20 > .col-sm-2, .row-20 > .col-md-2, .row-20 > .col-lg-2, .row-20 > .col-xs-3, .row-20 > .col-sm-3, .row-20 > .col-md-3, .row-20 > .col-lg-3, .row-20 > .col-xs-4, .row-20 > .col-sm-4, .row-20 > .col-md-4, .row-20 > .col-lg-4, .row-20 > .col-xs-5, .row-20 > .col-sm-5, .row-20 > .col-md-5, .row-20 > .col-lg-5, .row-20 > .col-xs-6, .row-20 > .col-sm-6, .row-20 > .col-md-6, .row-20 > .col-lg-6, .row-20 > .col-xs-7, .row-20 > .col-sm-7, .row-20 > .col-md-7, .row-20 > .col-lg-7, .row-20 > .col-xs-8, .row-20 > .col-sm-8, .row-20 > .col-md-8, .row-20 > .col-lg-8, .row-20 > .col-xs-9, .row-20 > .col-sm-9, .row-20 > .col-md-9, .row-20 > .col-lg-9, .row-20 > .col-xs-10, .row-20 > .col-sm-10, .row-20 > .col-md-10, .row-20 > .col-lg-10, .row-20 > .col-xs-11, .row-20 > .col-sm-11, .row-20 > .col-md-11, .row-20 > .col-lg-11, .row-20 > .col-xs-12, .row-20 > .col-sm-12, .row-20 > .col-md-12, .row-20 > .col-lg-12 { padding-left: 10px !important; padding-right: 10px !important; }
.row-40 { margin-left: -20px !important; margin-right: -20px !important; }
.row-40 > .col-xs-1, .row-40 > .col-sm-1, .row-40 > .col-md-1, .row-40 > .col-lg-1, .row-40 > .col-xs-2, .row-40 > .col-sm-2, .row-40 > .col-md-2, .row-40 > .col-lg-2, .row-40 > .col-xs-3, .row-40 > .col-sm-3, .row-40 > .col-md-3, .row-40 > .col-lg-3, .row-40 > .col-xs-4, .row-40 > .col-sm-4, .row-40 > .col-md-4, .row-40 > .col-lg-4, .row-40 > .col-xs-5, .row-40 > .col-sm-5, .row-40 > .col-md-5, .row-40 > .col-lg-5, .row-40 > .col-xs-6, .row-40 > .col-sm-6, .row-40 > .col-md-6, .row-40 > .col-lg-6, .row-40 > .col-xs-7, .row-40 > .col-sm-7, .row-40 > .col-md-7, .row-40 > .col-lg-7, .row-40 > .col-xs-8, .row-40 > .col-sm-8, .row-40 > .col-md-8, .row-40 > .col-lg-8, .row-40 > .col-xs-9, .row-40 > .col-sm-9, .row-40 > .col-md-9, .row-40 > .col-lg-9, .row-40 > .col-xs-10, .row-40 > .col-sm-10, .row-40 > .col-md-10, .row-40 > .col-lg-10, .row-40 > .col-xs-11, .row-40 > .col-sm-11, .row-40 > .col-md-11, .row-40 > .col-lg-11, .row-40 > .col-xs-12, .row-40 > .col-sm-12, .row-40 > .col-md-12, .row-40 > .col-lg-12 { padding-left: 20px !important; padding-right: 20px !important; }
.row-50 { margin-left: -25px !important; margin-right: -25px !important; }
.row-50 > .col-xs-1, .row-50 > .col-sm-1, .row-50 > .col-md-1, .row-50 > .col-lg-1, .row-50 > .col-xs-2, .row-50 > .col-sm-2, .row-50 > .col-md-2, .row-50 > .col-lg-2, .row-50 > .col-xs-3, .row-50 > .col-sm-3, .row-50 > .col-md-3, .row-50 > .col-lg-3, .row-50 > .col-xs-4, .row-50 > .col-sm-4, .row-50 > .col-md-4, .row-50 > .col-lg-4, .row-50 > .col-xs-5, .row-50 > .col-sm-5, .row-50 > .col-md-5, .row-50 > .col-lg-5, .row-50 > .col-xs-6, .row-50 > .col-sm-6, .row-50 > .col-md-6, .row-50 > .col-lg-6, .row-50 > .col-xs-7, .row-50 > .col-sm-7, .row-50 > .col-md-7, .row-50 > .col-lg-7, .row-50 > .col-xs-8, .row-50 > .col-sm-8, .row-50 > .col-md-8, .row-50 > .col-lg-8, .row-50 > .col-xs-9, .row-50 > .col-sm-9, .row-50 > .col-md-9, .row-50 > .col-lg-9, .row-50 > .col-xs-10, .row-50 > .col-sm-10, .row-50 > .col-md-10, .row-50 > .col-lg-10, .row-50 > .col-xs-11, .row-50 > .col-sm-11, .row-50 > .col-md-11, .row-50 > .col-lg-11, .row-50 > .col-xs-12, .row-50 > .col-sm-12, .row-50 > .col-md-12, .row-50 > .col-lg-12 { padding-left: 25px !important; padding-right: 25px !important; }
.row-100 { margin-left: -50px !important; margin-right: -50px !important; }
.row-100 > .col-xs-1, .row-100 > .col-sm-1, .row-100 > .col-md-1, .row-100 > .col-lg-1, .row-100 > .col-xs-2, .row-100 > .col-sm-2, .row-100 > .col-md-2, .row-100 > .col-lg-2, .row-100 > .col-xs-3, .row-100 > .col-sm-3, .row-100 > .col-md-3, .row-100 > .col-lg-3, .row-100 > .col-xs-4, .row-100 > .col-sm-4, .row-100 > .col-md-4, .row-100 > .col-lg-4, .row-100 > .col-xs-5, .row-100 > .col-sm-5, .row-100 > .col-md-5, .row-100 > .col-lg-5, .row-100 > .col-xs-6, .row-100 > .col-sm-6, .row-100 > .col-md-6, .row-100 > .col-lg-6, .row-100 > .col-xs-7, .row-100 > .col-sm-7, .row-100 > .col-md-7, .row-100 > .col-lg-7, .row-100 > .col-xs-8, .row-100 > .col-sm-8, .row-100 > .col-md-8, .row-100 > .col-lg-8, .row-100 > .col-xs-9, .row-100 > .col-sm-9, .row-100 > .col-md-9, .row-100 > .col-lg-9, .row-100 > .col-xs-10, .row-100 > .col-sm-10, .row-100 > .col-md-10, .row-100 > .col-lg-10, .row-100 > .col-xs-11, .row-100 > .col-sm-11, .row-100 > .col-md-11, .row-100 > .col-lg-11, .row-100 > .col-xs-12, .row-100 > .col-sm-12, .row-100 > .col-md-12, .row-100 > .col-lg-12 { padding-left: 50px !important; padding-right: 50px !important; }

.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; }

// xxs < 450
// xss < 575
// xs < 768
// sm < 992
// md < 1200
// lg >= 1200

/* --- media addition --- */
.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; } }

@media (max-width: 450px) {
	.col-xxs-12 { float: none; width: 100%; margin: 0px !important; }
}
@media (max-width: 575px) {
	.col-xss-12 { float: none; width: 100%; margin: 0px !important; }
}
@media (max-width: 767px) {
	.pull-xs-right {float: right;}
	.text-xs-right {text-align: right;}
}
@media (min-width: 450px) {
	.text-xxs-up-right {text-align: right;}
}
@media (min-width: 768px) {
	.pull-sm-left {float: left;}
	.pull-sm-right {float: right;}
	.text-sm-right {text-align: right;}
}
@media (min-width: 992px) {
	.pull-md-left {float: left;}
	.pull-md-right {float: right;}
	.text-md-right {text-align: right;}
}
@media (min-width: 1200px) {
	.pull-lg-left {float: left;}
	.pull-lg-right {float: right;}
	.text-lg-right {text-align: right;}
}


/* --- helpers --- */
.block {display: block !important;}
.inline-block { display: inline-block !important; }
.posr { position: relative; }
.poss { position: static; }
.posa { position: absolute; z-index: 55; }
.posa-sm { @media (min-width: 768px){ position: absolute; } }
.ofl {overflow: hidden; position: relative; *zoom: 1;}
.hr {background: $color_gray_10; position: relative; overflow: hidden; display: block; height: 1px;}

.posr-t-1 {
	position: relative; top: 1px;
}

//display
.d-hide { display: none; }
.d-show { display: block; }
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block {
	display: inline-block !important;
	&.top { vertical-align: top; }
	&.middle {
		vertical-align: middle;
		.d-inline-block { vertical-align: middle; }
	}
	&.bottom { vertical-align: bottom; }
}
.d-block { display: block !important; }
.d-flex { display: -ms-flexbox !important; display: flex !important; }
.d-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; }

@media (min-width: 576px) {
	.d-sm-none { display: none !important; }
	.d-sm-inline { display: inline !important; }
	.d-sm-inline-block { display: inline-block !important; }
	.d-sm-block { display: block !important; }
	.d-sm-flex { display: -ms-flexbox !important; display: flex !important; }
	.d-sm-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; }
}

@media (min-width: 768px) {
	.d-md-none { display: none !important; }
	.d-md-inline { display: inline !important; }
	.d-md-inline-block { display: inline-block !important; }
	.d-md-block { display: block !important; }
	.d-md-flex { display: -ms-flexbox !important; display: flex !important; }
	.d-md-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; }
}

@media (min-width: 992px) {
	.d-lg-none { display: none !important; }
	.d-lg-inline { display: inline !important; }
	.d-lg-inline-block { display: inline-block !important; }
	.d-lg-block { display: block !important; }
	.d-lg-flex { display: -ms-flexbox !important; display: flex !important; }
	.d-lg-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; }
}

@media (min-width: 1200px) {
	.d-xl-none { display: none !important; }
	.d-xl-inline { display: inline !important; }
	.d-xl-inline-block { display: inline-block !important; }
	.d-xl-block { display: block !important; }
	.d-xl-flex { display: -ms-flexbox !important; display: flex !important; }
	.d-xl-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; }
}

/* --- padding --- */
.p-0  { padding: 0 !important; }
.p-5-a { padding-top: 5px !important; padding-bottom: 5px !important; }
.p-8 { padding: 8px !important; }
.p-10 { padding: 10px !important; }
.p-12 { padding: 12px !important; }
.p-16 { padding: 16px !important; }
.p-20 { padding: 20px !important; }
.p-24 { padding: 24px !important; }
.p-30 { padding: 30px !important; }
.p-40 { padding: 40px !important; }
.p-50 { padding: 50px !important; }
.p-8-a { padding-top: 8px !important; padding-bottom: 8px !important; }
.p-12-a { padding-top: 12px !important; padding-bottom: 12px !important; }

.pl-0 { padding-left: 0 !important; }
.pl-4 { padding-left: 4px !important; }
.pl-8 { padding-left: 8px !important; }
.pl-10 { padding-left: 10px !important; }
.pl-12 { padding-left: 12px !important; }
.pl-16 { padding-left: 16px !important; }
.pl-20 { padding-left: 20px !important; }
.pl-24 { padding-left: 24px !important; }
.pl-28 { padding-left: 28px !important; }
.pl-32 { padding-left: 32px !important; }
.pl-36 { padding-left: 36px !important; }
.pl-40 { padding-left: 40px !important; }
.pl-44 { padding-left: 44px !important; }
.pl-48 { padding-left: 48px !important; }
.pl-52 { padding-left: 52px !important; }

.pr-0 { padding-right: 0 !important; }
.pr-4 { padding-right: 4px !important; }
.pr-8 { padding-right: 8px !important; }
.pr-10 { padding-right: 10px !important; }
.pr-12 { padding-right: 12px !important; }
.pr-16 { padding-right: 16px !important; }
.pr-20 { padding-right: 20px !important; }
.pr-24 { padding-right: 24px !important; }
.pr-28 { padding-right: 28px !important; }
.pr-32 { padding-right: 32px !important; }
.pr-36 { padding-right: 36px !important; }
.pr-40 { padding-right: 40px !important; }
.pr-44 { padding-right: 44px !important; }
.pr-48 { padding-right: 48px !important; }
.pr-52 { padding-right: 52px !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-4 { padding-left: 4px !important; padding-right: 4px !important; }
.px-8 { padding-left: 8px !important; padding-right: 8px !important; }
.px-10 { padding-left: 10px !important; padding-right: 10px !important; }
.px-12 { padding-left: 12px !important; padding-right: 12px !important; }
.px-16 { padding-left: 16px !important; padding-right: 16px !important; }
.px-24 { padding-left: 24px !important; padding-right: 24px !important; }
.px-28 { padding-left: 28px !important; padding-right: 28px !important; }
.px-32 { padding-left: 32px !important; padding-right: 32px !important; }
.px-36 { padding-left: 36px !important; padding-right: 36px !important; }
.px-40 { padding-left: 40px !important; padding-right: 40px !important; }
.px-48 { padding-left: 48px !important; padding-right: 48px !important; }
.px-52 { padding-left: 52px !important; padding-right: 52px !important; }

.py-4 { padding-top: 4px !important; padding-bottom: 4px !important; }
.py-8 { padding-top: 8px !important; padding-bottom: 8px !important; }
.py-10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.py-12 { padding-top: 12px !important; padding-bottom: 12px !important; }
.py-16 { padding-top: 16px !important; padding-bottom: 16px !important; }
.py-24 { padding-top: 24px !important; padding-bottom: 24px !important; }


/* --- margin --- */
.m-b-0   { margin-bottom: 0 !important; }
.m-b-02  { margin-bottom: 2px !important; }
.m-b-04  { margin-bottom: 4px !important; }
.m-b-05  { margin-bottom: 5px !important; }
.m-b-10  { margin-bottom: 10px !important; }
.m-b-12  { margin-bottom: 12px !important; }
.m-b-15  { margin-bottom: 15px !important; }
.m-b-20  { margin-bottom: 20px !important; }
.m-b-25  { margin-bottom: 25px !important; }
.m-b-30  { margin-bottom: 30px !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-75  { margin-bottom: 75px !important; }
.m-b-80  { margin-bottom: 80px !important; }
.m-b-90  { margin-bottom: 90px !important; }
.m-b-100 { margin-bottom: 100px !important; }
.m-b-150 { margin-bottom: 150px !important; }
.m-b-200 { margin-bottom: 200px !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 1px !important; }
.ml-2 { margin-left: 2px !important; }
.ml-3 { margin-left: 3px !important; }
.ml-4 { margin-left: 4px !important; }
.ml-5 { margin-left: 5px !important; }
.ml-6 { margin-left: 6px !important; }
.ml-7 { margin-left: 7px !important; }
.ml-8 { margin-left: 8px !important; }
.ml-9 { margin-left: 9px !important; }
.ml-10 { margin-left: 10px !important; }
.ml-12 { margin-left: 12px !important; }
.ml-16 { margin-left: 16px !important; }
.ml-20 { margin-left: 20px !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 1px !important; }
.mr-2 { margin-right: 2px !important; }
.mr-3 { margin-right: 3px !important; }
.mr-4 { margin-right: 4px !important; }
.mr-5 { margin-right: 5px !important; }
.mr-6 { margin-right: 6px !important; }
.mr-7 { margin-right: 7px !important; }
.mr-8 { margin-right: 8px !important; }
.mr-9 { margin-right: 9px !important; }
.mr-10 { margin-right: 10px !important; }
.mr-12 { margin-right: 12px !important; }
.mr-16 { margin-right: 16px !important; }
.mr-20 { margin-right: 20px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 1px !important; }
.mb-2 { margin-bottom: 2px !important; }
.mb-3 { margin-bottom: 3px !important; }
.mb-4 { margin-bottom: 4px !important; }
.mb-5 { margin-bottom: 5px !important; }
.mb-6 { margin-bottom: 6px !important; }
.mb-7 { margin-bottom: 7px !important; }
.mb-8 { margin-bottom: 8px !important; }
.mb-9 { margin-bottom: 9px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-12 { margin-bottom: 12px !important; }
.mb-16 { margin-bottom: 16px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-24 { margin-bottom: 24px !important; }
.mb-28 { margin-bottom: 28px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-32 { margin-bottom: 32px !important; }
.mb-36 { margin-bottom: 36px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-48 { margin-bottom: 48px !important; }
.mb-60 { margin-bottom: 60px !important; }

.m-0 { margin: 0 !important; }
.mx-auto, .m-a { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }

.w-10 { width: 10px; }
.w-20 { width: 20px; }
.w-30 { width: 30px; }
.w-40 { width: 40px; }
.w-50 { width: 50px; }
.w-75 { width: 75px; }
.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; }

.min-w-50 { min-width: 50px !important; }
.min-w-75 { min-width: 75px !important; }
.min-w-80 { min-width: 80px !important; }
.min-w-100 { min-width: 100px !important; }
.min-w-125 { min-width: 125px !important; }
.min-w-150 { min-width: 150px !important; }
.min-w-175 { min-width: 175px !important; }
.min-w-200 { min-width: 200px !important; }
.min-w-225 { min-width: 225px !important; }
.min-w-250 { min-width: 250px !important; }
.min-w-275 { min-width: 275px !important; }
.min-w-300 { min-width: 300px !important; }
.min-w-325 { min-width: 325px !important; }
.min-w-350 { min-width: 350px !important; }
.min-w-375 { min-width: 375px !important; }
.min-w-400 { min-width: 400px !important; }
.min-w-425 { min-width: 425px !important; }
.min-w-450 { min-width: 450px !important; }
.min-w-475 { min-width: 475px !important; }
.min-w-500 { min-width: 500px !important; }
.min-w-550 { min-width: 550px !important; }
.min-w-600 { min-width: 600px !important; }
.min-w-650 { min-width: 650px !important; }
.min-w-700 { min-width: 700px !important; }
.min-w-750 { min-width: 750px !important; }
.min-w-800 { min-width: 800px !important; }
.min-w-850 { min-width: 850px !important; }
.min-w-900 { min-width: 900px !important; }
.min-w-950 { min-width: 950px !important; }
.min-w-1000 { min-width: 1000px !important; }
.min-w-1200 { min-width: 1200px !important; }

.max-w-40 { max-width: 40px !important; }
.max-w-50 { max-width: 50px !important; }
.max-w-75 { max-width: 75px !important; }
.max-w-80 { max-width: 80px !important; }
.max-w-100 { max-width: 100px !important; }
.max-w-125 { max-width: 125px !important; }
.max-w-150 { max-width: 150px !important; }
.max-w-175 { max-width: 175px !important; }
.max-w-200 { max-width: 200px !important; }
.max-w-225 { max-width: 225px !important; }
.max-w-250 { max-width: 250px !important; }
.max-w-275 { max-width: 275px !important; }
.max-w-300 { max-width: 300px !important; }
.max-w-325 { max-width: 325px !important; }
.max-w-350 { max-width: 350px !important; }
.max-w-375 { max-width: 375px !important; }
.max-w-400 { max-width: 400px !important; }
.max-w-425 { max-width: 425px !important; }
.max-w-450 { max-width: 450px !important; }
.max-w-475 { max-width: 475px !important; }
.max-w-500 { max-width: 500px !important; }
.max-w-550 { max-width: 550px !important; }
.max-w-600 { max-width: 600px !important; }
.max-w-650 { max-width: 650px !important; }
.max-w-700 { max-width: 700px !important; }
.max-w-750 { max-width: 750px !important; }
.max-w-800 { max-width: 800px !important; }
.max-w-850 { max-width: 850px !important; }
.max-w-900 { max-width: 900px !important; }
.max-w-950 { max-width: 950px !important; }
.max-w-1000 { max-width: 1000px !important; }
.max-w-1200 { max-width: 1200px !important; }

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

/* --- links --- */
.blank-link, a.blank-link, .blank-link a {
	border: none !important;
	&.hover {
		&:hover { text-decoration: underline; }
	}
}
.underline-link, a.underline-link, .underline-link a {
	border: none;
	text-decoration: underline;
	&:hover {
		text-decoration: none;
	}
}
.dash-link, a.dash-link, .dash-link a {
	border-bottom-style: dashed !important;
}
.type-link, a.type-link, .type-link a {
	border-bottom: 1px solid rgba(13,97,171,0.3);
	color: $color_blue;
	text-decoration: none;
	&:hover {
		border-color: $color_blue;
		text-decoration: none;
	}
}
.success-link, .success-link a, a.success-link {
	color: rgb(0, 163, 49);
	border-color: rgba(0, 163, 49, 0.3);
	&:hover {
		border-color: rgb(0, 163, 49);
	}
}
.invert-link, a.invert-link, .invert-link a {
	border-bottom: 1px solid transparent;
	color: $color_blue;
	text-decoration: none;
	&:hover {
		border-color: $color_blue;
		text-decoration: none;
	}
}
.trash-link, a.trash-link, .trash-link a {
	border: none;
	color: $color_gray_50;
	&:hover {
		color: $color_red;
	}
}
.remove-link, a.remove-link, .remove-link a {
	border-bottom-color: transparent;
	color: $red;
	& > span {
		display: inline-block;
	}
	&:hover {
		& > span {
			text-decoration: underline;
		}
	}
}
.muted-link, a.muted-link, .muted-link a {
	border: 0;
	color: $color_gray_50;
	&:hover {
		color: $color_blue;
	}
	&.dotted-link {
		border-bottom: 1px dotted $color_gray_40;
		&:hover {
			border-bottom-color: $blue;
		}
	}
}
.dotted-link, a.dotted-link, .dotted-link a {
	border-bottom: 1px dotted $blue;
}
a:hover > .type-link { border-color: $color_blue; }

.tel-link, a.tel-link, .tel-link a {
	border: 0;
	@media(min-width: 768px){
		color: $color_dark;
	}
	&:hover {
		color: $blue;
	}
}

.black-link, a.black-link, .black-link a {
	border: none !important;
	color: $color_dark !important;
	&.hover {
		&:hover {
			color: $blue !important;
		}
	}
}

//colapse link
a[aria-expanded="true"]{
	.true { display: block; }
	.false { display: none; }
}
a[aria-expanded="false"]{
	.true { display: none; }
	.false { display: block; }
}

.overlink {
	background: url(../images/blank.gif) no-repeat 0 0;
	border: none !important;
	position: absolute; top: 0px; left: 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; }
	&.glow-pink:hover { box-shadow: inset 0 0 16px #e4638a; }
	&.glow-orange:hover { box-shadow: inset 0 0 16px rgba(234,75,29,0.4); }
}
.overlink-hover-mystic {
	&:hover {
		background: $color_mystic;
		.text-mark {
			background: $color_white;
		}
	}
}

/* --- icons --- */
strong.icobox,
span.icobox,
em.icobox,
b.icobox,
i.icobox,
a.icobox {
	border: none !important;
	display: inline-block;
	.icobox__link {
		border-bottom: 1px solid rgba(13,97,171,0.3);
		text-decoration: none;
		@include transition();
	}
	.icobox__hover {
		border-bottom: 1px solid transparent;
		text-decoration: none;
		@include transition();
	}
	&:hover {
		.icobox__link, .icobox__hover { border-bottom-color: $color_blue; }
	}

	&.color-black {
		.icobox__hover {
			border: none;
			color: $color_dark;
			text-decoration: none;
		}
		&:hover {
			color: $color_blue !important;
			.icobox__hover { color: $color_blue; }
		}
	}
}
.icobox {
	position: relative;
	.ico {
		position: absolute; top: 50%; left: 0; display: block;
		text-align: center;
		img {
			display: block; width: 100%;
			&.center {
				position: absolute; top: 50%; left: 50%;
				@include transform(translateX(-50%) translateY(-50%));
				width: auto;
				max-width: 100%;
				max-height: 100%;
			}
		}
		&.top {
			top: 0 !important;
			margin-top: 0 !important;
		}
		&.top-1 {
			top: 1px !important;
			margin-top: 0 !important;
		}
		&.top-2 {
			top: 2px !important;
			margin-top: 0 !important;
		}
		&.top-3 {
			top: 3px !important;
			margin-top: 0 !important;
		}
		&.top-n-2 {
			top: -2px !important;
			margin-top: 0 !important;
		}
		&.top-4 {
			top: 4px !important;
			margin-top: 0 !important;
		}
		&.top-n-4 {
			top: -4px !important;
			margin-top: 0 !important;
		}
		&.top-5 {
			top: 5px !important;
			margin-top: 0 !important;
		}
		&.top-6 {
			top: 6px !important;
			margin-top: 0 !important;
		}
		&.top-n-6 {
			top: -6px !important;
			margin-top: 0 !important;
		}
		&.top-8 {
			top: 8px !important;
			margin-top: 0 !important;
		}
		&.top-n-8 {
			top: -8px !important;
			margin-top: 0 !important;
		}

		&.flag {
			@include box-shadow(0px 0px 3px $color_gray_30);
		}

		/*&.ico-auto-brands {
			//background: url("../images/icons/auto-brands-40.png?r=1") no-repeat 0 100px;
			background: url("../images/brands/sm/all.png?v=1") no-repeat 0 1000px;
			background-size: auto 100%;

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

			&.daf 			{ background-position: -58em 0; }
			&.man 			{ background-position: -59em 0; }
			&.scania 		{ background-position: -60em 0; }
			&.setra 		{ background-position: -61em 0; }
		}*/
	}
	&.icobox_right {
		.ico { left: auto; right: 0px; }
	}
	&.size_12 {
		$size : 12px;
		padding-left: $size + 4;
		&.icobox_right { padding-left: 0; padding-right: $size + 4; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.fa {
				font-size: 12px !important;
				line-height: $size;
			}
			&.top {
				top: 1px;
				margin-top: 0;
			}
			&.ico-auto-brands { font-size: $size; }
			&.flag { height: 12px; margin-top: -6px; }
		}
	}
	&.size_16 {
		$size : 16px;
		padding-left: $size + 6;
		&.icobox_right { padding-left: 0; padding-right: $size + 6; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.fa {
				font-size: 16px;
				line-height: $size;
			}
			&.top {
				top: 2px;
				margin-top: 0;
			}
			&.ico-auto-brands { font-size: $size; }
			&.flag { height: 12px; margin-top: -6px; }
		}
	}
	&.size_20 {
		$size : 20px;
		padding-left: $size + 6;
		&.icobox_right { padding-left: 0; padding-right: $size + 6; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.fa {
				font-size: 18px;
				line-height: $size;
			}
			&.ico-auto-brands { font-size: $size; }
			&.flag { height: 15px; margin-top: -7px; }
		}
	}
	&.size_24 {
		$size : 24px;
		padding-left: $size + 8;
		&.icobox_right { padding-left: 0; padding-right: $size + 6; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.fa {
				font-size: 22px;
				line-height: $size;
			}
			&.top {
				top: -1px;
				margin-top: 0;
			}
			&.ico-auto-brands { font-size: $size; }
			&.flag { height: 18px; margin-top: -9px; }
		}
		&.fs-20 {
			& > .ico {
				&.top {
					top: 3px;
					@media (max-width: 767px) {
						top: 5px;
					}
				}
			}
		}
	}
	&.size_32 {
		$size : 32px;
		padding-left: $size + 8px;
		&.padd_15 { padding-left: $size + 12px; }
		&.icobox_right { padding-left: 0; padding-right: $size + 8px; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.fa {
				font-size: 28px;
				line-height: $size;
			}
			&.top { top: 0; margin-top: 0; }
			&.ico-auto-brands { font-size: $size; }
			&.flag { height: 24px; margin-top: -12px; }
		}
	}
	&.size_48 {
		$size : 48px;
		padding-left: $size + 10px;
		&.icobox_right { padding-left: 0; padding-right: $size + 10px; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.ico-auto-brands { font-size: $size; }
			&.flag { height: 36px; margin-top: -18px; }
		}
	}
	&.size_64 {
		$size : 64px;
		padding-left: $size + 12px;
		&.icobox_right { padding-left: 0; padding-right: $size + 12px; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.ico-auto-brands { font-size: $size; }
			&.flag { height: 48px; margin-top: -24px; }
		}
	}

	&.responsive-xxs {
		@media (max-width: 767px){
			padding-left: 0;
			.ico { display: none; }
		}
	}

	&.xxs-column {
		@media(max-width: 575px){
			padding-left: 0;
			padding-right: 0;
			.ico {
				position: relative; top: auto; right: auto; left: auto;
				margin: 0 auto;
			}
		}
	}
	&.xs-column {
		@media(max-width: 767px){
			padding-left: 0;
			padding-right: 0;
			.ico {
				position: relative; top: auto; right: auto; left: auto;
				margin: 0 auto;
			}
		}
	}

	&.icobox_hover {
		@include transition(all 0.15s linear 0s);
		&:hover {
			color: $color_blue;
		}
	}
}

.icobox-ellipsis {
	.icobox-ellipsis__box {
		position: relative;
		display: inline-block;
		vertical-align: top;
		max-width: 100%;
	}
	.icobox-ellipsis__txt {
		position: relative;
		overflow: hidden;
		display: block;
		max-width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.icobox-ellipsis__ico {
		position: absolute; top: 50%; left: auto; right: 100%;
		display: block;
	}
	&.size_20 {
		padding-left: 24px;
		.icobox-ellipsis__ico {
			width: 20px; height: 20px;
			margin: -10px 4px 0px 0px;
		}
	}

	&.right {
		&.size_20 {
			padding-left: 0;
			padding-right: 24px;
			.icobox-ellipsis__ico { left: 100%; right: auto; margin: -10px 0px 0px 4px; }
		}
	}
}

.iconrow {
	display: flex;
	.icorow-icon {}
	.icorow-text {
		align-self: center;
	}
	.middle {
		align-self: center;
	}
}


/* --- dropbox --- */
.dropbox {
	position: relative;
	.dropbox-head {
		position: relative; z-index: 2;
		@include transition(all 0.1s linear .15s);
	}
	.dropbox-body {
		background: $color_gray_10;
		position: absolute; top: 100%; left: 0; z-index: 1;
		color: $color_dark;
		visibility: hidden;
		opacity: 0;
		@include box-shadow(0px 0px 10px $color_gray_70);
		@include transition(all .1s linear .15s);
		&.visible {
			//top: 100%;
			visibility: visible;
			opacity: 1;
		}
	}
	&:hover {
		z-index: 7;
		.dropbox-head {
			background: $color_gray_10;
			color: $color_dark;
			@include transition(all 0.2s linear 0s);
		}
		.dropbox-body {
			//@media (min-width: 992px) {
			//top: 100%;
			@include transition(all .2s linear 0s);
			visibility: visible;
			opacity: 1;
			//}
		}
	}
	&.open {
		z-index: 5;
		.dropbox-head {
			background: $color_gray_10;
			color: $color_dark;
		}
		.dropbox-body {
			top: 100%;
			visibility: visible;
			opacity: 1;
		}
	}
}

.collapser {
	.collapser-head {
		&:hover {
			cursor: pointer;
		}
	}
	.collapser-body {
		display: none;
	}
	&.collapser-open {
		.collapser-caret {
			.fa {
				@include transform(rotate(180deg));
			}
		}
		.collapser-body {
			display: block;
		}
	}
}

/* --- closer --- */
.closer {
	background: none;
	border: none !important;
	position: absolute; top: 5px; right: 5px;
	z-index: 75;
	display: block; width: 8px; height: 8px;
	opacity: 0.4;
	@include transition();
	&:before {
		content: '';
		background: $color_dark;
		position: absolute; top: 50%; left: 50%;
		display: block; width: 100%; height: 2px;
		//margin: -1px 0px 0px 0px;
		@include transform(translateX(-50%) translateY(-50%) rotate(45deg));
	}
	&:after {
		content: '';
		background: $color_dark;
		position: absolute; top: 50%; left: 50%;
		display: block; width: 100%; height: 2px;
		//margin: -1px 0px 0px 0px;
		@include transform(translateX(-50%) translateY(-50%) rotate(-45deg));
	}

	&.posr { position: relative; top: auto; left: auto; right: auto; }

	.timer {
		position: absolute; right: 100%; top: 50%;
		margin-top: -6px;
		margin-right: 5px;
		font-size: 10px;
		line-height: 12px;
		white-space: nowrap;
		i {
			font-style: normal;
		}
	}

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

	&.size_12 {
		width: 12px; height: 12px;
	}
	&.size_16 {
		width: 16px; height: 16px;
	}
	&.size_20 {
		width: 20px; height: 20px;
	}
	&.size_24 {
		width: 24px; height: 24px;
	}
	&:hover {
		//@include transform(rotate(180deg));
		cursor: pointer;
		opacity: 0.8;
		&:before { background: $color_red; }
		&:after { background: $color_red; }
	}

	&.square {
		background: $color_wildblue;
		opacity: 1;
		@include border-radius(2px);
		&:before {
			background: $color_white;
			left: 50%;
			width: 70%;
			@include transform(translateX(-50%) translateY(-50%) rotate(-45deg));
		}
		&:after {
			background: $color_white;
			left: 50%;
			width: 70%;
			@include transform(translateX(-50%) translateY(-50%) rotate(45deg));
		}
		/*&:before {
			background: $color_white;
			left: 10%;
			width: 77%;
		}
		&:after {
			background: $color_white;
			left: 10%;
			width: 77%;
		}
		&.size_12 {
			&:before { width: 84%; }
			&:after { width: 84%; }
		}
		&.size_24 {
			&:before { width: 84%; }
			&:after { width: 84%; }
		}*/
		&:hover {
			background: $color_red;
			@include transform(rotate(0deg));
		}
	}
}

////
//tabis
.tabis {
	display: none;
	&.active { display: block; }
}

//alv-popover.css
.alv-popover {
	.alv-popover__box { display: none !important; }
}
.alv-popover-click, .alv-popover-hover {
	&:hover {
		cursor: pointer;
	}
}
.alv-popover__box {
	display: block;
	background: $color_white;
	width: 300px;
	visibility: hidden;
	opacity: 0;
	@include border-radius(3px);
	@include box-shadow(0px 0px 3px $color_gray_20);
	//@include transition(opacity 1s linear 0s);
	.alv-popover__head {
		display: block;
		padding: 12px;
	}
	.alv-popover__body {
		display: block;
		padding: 0px 12px 12px;
		&:first-child { padding: 12px; }
	}

	&.alv-popover__box_dark {
		background: $color_gray_70;
		color: $color_white;
		.closer {
			&:before, &:after {
				background: $color_white !important;
			}
		}
		.arrow {
			&:before {
				background: $color_gray_70 !important;
			}
		}
	}

	&.top {
		margin-left: -150px;
		.arrow {
			position: absolute; top: 100%; left: 50%;
			overflow: hidden;
			display: block; width: 20px; height: 15px;
			margin-left: -10px;
			&:before {
				content: '';
				background: $color_white;
				position: absolute; top: 0; left: 50%;
				display: block; width: 10px; height: 10px;
				margin: -5px 0px 0px -5px;
				@include transform(rotate(45deg));
				@include box-shadow(0px 0px 3px $color_gray_20);
			}
		}
	}
	&.top-left {
		//margin-left: -150px;
		.arrow {
			position: absolute; top: 100%; left: 10px;
			overflow: hidden;
			display: block; width: 20px; height: 15px;
			//margin-left: -10px;
			&:before {
				content: '';
				background: $color_white;
				position: absolute; top: 0; left: 50%;
				display: block; width: 10px; height: 10px;
				margin: -5px 0px 0px -5px;
				@include transform(rotate(45deg));
				@include box-shadow(0px 0px 3px $color_gray_20);
			}
		}
	}
	&.bottom {
		margin-left: -150px;
		.arrow {
			position: absolute; bottom: 100%; left: 50%;
			overflow: hidden;
			display: block; width: 20px; height: 15px;
			margin-left: -10px;
			&:before {
				content: '';
				background: $color_white;
				position: absolute; bottom: 0; left: 50%;
				display: block; width: 10px; height: 10px;
				margin: 0px 0px -5px -5px;
				@include transform(rotate(45deg));
				@include box-shadow(0px 0px 3px $color_gray_20);
			}
		}
	}
	&.left {
		.arrow {
			position: absolute; top: 50%; left: 100%;
			overflow: hidden;
			display: block; width: 15px; height: 20px;
			margin-top: -10px;
			&:before {
				content: '';
				background: $color_white;
				position: absolute; top: 50%; left: 0;
				display: block; width: 10px; height: 10px;
				margin: -5px 0px 0px -5px;
				@include transform(rotate(45deg));
				@include box-shadow(0px 0px 3px $color_gray_20);
			}
		}
	}
	&.right {
		.arrow {
			position: absolute; top: 50%; right: 100%;
			overflow: hidden;
			display: block; width: 15px; height: 20px;
			margin-top: -10px;
			&:before {
				content: '';
				background: $color_white;
				position: absolute; top: 50%; right: 0;
				display: block; width: 10px; height: 10px;
				margin: -5px -5px 0px 0px;
				@include transform(rotate(45deg));
				@include box-shadow(0px 0px 3px $color_gray_20);
			}
		}
	}

	&.alv-popover__fix {
		position: fixed;
		//top: auto; bottom: auto; left: auto; right: auto;
		z-index: 999;
		visibility: visible;
		opacity: 1;
	}
}

//bootstrap-select fix
.pseudo-selectpicker {
	position: relative;
	&:before {
		content: '';
		background: #ffffff !important;
		border: 1px solid #b3b3b3 !important;
		position: absolute; top: 0; right: 0; bottom: 0; left: 0;
		z-index: 1;
		@include border-radius();
	}
	&:after {
		content: '';
		border: 5px solid transparent;
		border-top-color: $black;
		position: absolute; top: 50%; right: 12px;
		z-index: 1;
		margin-top: -2px;
		@include border-radius();
	}
	.pseudo-selectpicker__icon {
		position: absolute; top: 9px; left: 12px;
		z-index: 1;
	}
	.pseudo-selectpicker__container {
		position: absolute; top: 6px; left: 37px;
		z-index: 1;
		width: 90%;
		overflow: hidden;
		font-size: 14px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	& > .selectpicker {
		visibility: hidden;
	}
	.bootstrap-select {
		position: relative;
		z-index: 5;
	}
}
.selectpicker_hide {
	opacity: 0;
}
.bootstrap-select {
	.selectpicker { display: none !important; }
	.dropdown-toggle {
		.filter-option {
			padding-right: 20px !important;
		}
	}
	.btn {
		.filter-option {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.bs-caret {
			.caret {}
		}
		&.btn-default {
			background: $color_white !important;
			border: 1px solid $color_gray_30 !important;
			padding-top: 5px !important;
			padding-bottom: 5px !important;
			@include box-shadow();
			@media (max-width: 449px) {
				padding-top: 9px !important;
				padding-bottom: 9px !important;
			}
		}
		&.btn-sm {
			padding-top: 4px;
			padding-bottom: 4px;
		}
		&.btn-md {
			padding-top: 8px;
			padding-bottom: 8px;
		}
		&.btn-lg, &.input-lg {
			padding-top: 10px;
			padding-bottom: 10px;
			line-height: 34px;
			@media (max-width: 449px) {
				line-height: 26px;
			}
		}
	}
	.bs-searchbox {
		margin-bottom: 8px;
	}
	div.dropdown-menu {
		padding: 0px;
		ul.dropdown-menu {
			//max-height: 250px !important;
			li {
				&.dropdown-header {
					padding-left: 12px;
					&:first-child {padding-top: 10px;}
					&.without-label {
						display: none !important;
					}
				}
				a {
					border: none;
					padding: 5px 12px;
					white-space: normal !important;
					&.opt {
						padding: 5px 12px;
					}

					&:focus { background: $color_gray_10; }
					&:hover { background: $color_gray_10; }
				}
				&.active {
					a {
						background: $blue;
						color: $white;
					}
				}
			}
		}
	}

	.has-error & {
		.btn {
			&.btn-default {
				background: $color_white !important;
				border-color: $color_red !important;
				color: $color_red !important;
				@include box-shadow();
			}
		}
	}

	&.dropdown-min-w-250 {
		div.dropdown-menu { min-width: 250px !important; }
	}
	&.dropdown-min-w-300 {
		div.dropdown-menu { min-width: 300px !important; }
	}
	&.dropdown-min-w-350 {
		div.dropdown-menu { min-width: 350px !important; }
	}
	&.dropdown-min-w-400 {
		div.dropdown-menu { min-width: 400px !important; }
	}
	&.dropdown-min-w-500 {
		div.dropdown-menu { min-width: 500px !important; }
	}
}

.bs-container {
	&.subtext-right {
		div.dropdown-menu ul.dropdown-menu li a {
			padding-right: 80px !important;
		}
		.dropdown-menu li small {
			position: absolute;
			top: 5px;
			right: 8px;
			font-size: 1em !important;
			color: $black !important;
		}
	}
}


.b-worktime {
	.b-worktime__line {
		position: relative;
		max-width: 170px;
		&:before {
			content: '';
			position: absolute; bottom: 5px; left: 0px; right: 0px;
			z-index: 1;
			border-top: 2px dotted $color_gray_50;
		}
		.pull-left {
			background: $color_white;
			position: relative; z-index: 5;
			padding-right: 10px;
		}
		.pull-right {
			background: $color_white;
			position: relative; z-index: 5;
			padding-left: 10px;
		}
	}
	.section-footer & {
		.b-worktime__line {
			margin-top: 10px;
			&:first-child { margin-top: 0px; }
			&:before { border-top: 2px dotted $color_white; }
			.pull-left { background: $color_gray_80; }
			.pull-right { background: $color_gray_80; }
		}
	}
}

//
.global-alerts {
	position: fixed; bottom: 10px; right: 10px;
	z-index: 998;
	.alert {
		& + .alert { margin-top: 20px; }
	}
}

.global-notifications {
	position: fixed; top: 15px; 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; }
	}
}

.float-notify {
	.float-notify__body {
		position: relative;
		@include transition();
		@media (max-width: 991px){
			.container { width: auto; padding: 0px; }
		}
		&:not(.fix){
			.container { width: auto; padding: 0px; }
		}
		&.fix {
			@media (min-width: 992px){
				position: fixed; top: 0px; left: 0px; right: 0px;
				z-index: 777;
				.float-notify__bg {
					background: $color_white;
					position: relative;
					padding: 8px;
					padding-left: calc(25% + 30px - 10px);
					&:before {
						content: '';
						position: absolute; top: 100%; left: 0px; right: 0px;
						height: 5px;
						//@include linear-gradient(0deg, transparent, $color_gray_20);
						background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(204,204,204,1) 100%);
						background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(204,204,204,1) 100%);
						background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(204,204,204,1) 100%);
						filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#cccccc', GradientType=0 );
					}
				}
			}
		}
	}
}

//** TODO: Check block
.gdpr-agree-notify {
	.alert {
		&.alert-info {
			.closer { display: none; }
		}
	}
	&.top {
		margin-bottom: 16px;
		@media (max-width: 991px){ display: none; }
		.gdpr-agree-notify__body {
			.alert { max-width: 650px; }
			&:not(.fix){
				.container { width: auto; padding: 0px; }
			}
			&.fix {
				@media (min-width: 992px){
					position: fixed; top: 0px; left: 0px; right: 0px;
					z-index: 777;
					.gdpr-agree-notify__bg {
						background: $color_white;
						position: relative;
						padding: 8px;
						padding-left: calc(25% + 30px - 10px);
						&:before {
							content: '';
							position: absolute; top: 100%; left: 0px; right: 0px;
							height: 5px;
							//@include linear-gradient(0deg, transparent, $color_gray_20);
							background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(204,204,204,1) 100%);
							background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(204,204,204,1) 100%);
							background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(204,204,204,1) 100%);
							filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#cccccc', GradientType=0 );
						}
					}
				}
			}
		}
	}
	&.bottom {
		margin-top: 40px;
		@media (min-width: 992px){ display: none; }
		.gdpr-agree-notify__body {
			.container { width: auto; padding: 0px; }
			&.fix {
				position: fixed; bottom: 0px; left: 0px; right: 0px;
				.gdpr-agree-notify__bg {
					padding: 8px;
				}
			}
		}
	}
}

//loaders
.widget-preloader {
	position: relative;
	min-height: 200px;
	margin-bottom: 16px;
	.widget-preloader__hidden {
		display: none;
	}
	&.in {
		.loading {
			display: none !important;
		}
		.widget-preloader__hidden {
			display: block !important;
		}
	}
}
.loading {
	background: $color_white;
	background: rgba(255,255,255,0.75);
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	z-index: 55;
	display: none;

	.spinner {
		position: absolute; top: 50%; left: 50%;
		width: 50px; height: 40px;
		margin: -20px -25px;
	}

	&.relative {
		position: relative; top: auto; right: auto; bottom: auto; left: auto;
		.spinner {
			position: relative; top: auto; left: auto;
			width: 50px; height: 40px;
			margin: 0 auto;
		}
	}

	&.overlay {
		position: fixed;
		z-index: 999;
		display: block;
	}

	&.in {
		display: block;
		z-index: 900;
	}
}
.spinner {
	width: 50px; height: 40px;
	margin: 0 auto;
	text-align: center;
	font-size: 10px;
	div {
		background-color: $color_toxic;

		//.color-green-light, .green-light {color: $color_light_green !important; fill: $color_light_green;}

		height: 100%;
		width: 6px;
		display: inline-block;
		-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.4) }
			20% { -webkit-transform: scaleY(1.0) }
		}
		@keyframes sk-stretchdelay {
			0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); }
			20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); }
		}
	}
	&.spinner-primary {
		div {
			background-color: $color_blue;
		}
	}
	&.spinner-success {
		div {
			background-color: $green;
		}
	}
	&.left {
		margin: 0;
	}
	&.md {
		width: 40px; height: 32px;
		div {
			width: 5px;

		}
	}
}

//sortix
.sortix {}
.sortix-show {}
.sortix-show-if { display: none; }
.sortix-hide { display: none; }
.sortix-nothing { display: none; }
.sortix-highlight {
	.highlight {
		background: #ffe28e;
		padding: 0px;
	}
}

//utility class
.js-toggle-password-view {}
.js-parent-remover {}
.js-parent-hider {}
.js-clear-field {}
.js-toggle-visible {}
.js-link {
	&:hover { cursor: pointer; }
}


.show {
	&.inline {
		display: inline-block !important;
	}
}

.previewer-box {
	background: $color_gray_10;
	position: fixed; top: 50px; left: 50px;
	z-index: 9999;
	display: none;
	width: 120px;
	padding: 4px;
	img { display: block; width: 100%; }
}
.fix-center {
	background: red;
	position: fixed; top: 50%; left: 0;
	z-index: 9999;
	display: block; height: 2px; width: 100%;
	margin-top: -1px;
}

.b-fixed {
	&:not(.fixed){
		.b-fixed__body {
			.container {
				width: 100%;
				padding: 0;
			}
		}
	}
	&.fixed {
		.b-fixed__body {
			position: fixed; top: 0; left: 0;
			z-index: 900;
			width: 100%;
			max-height: 100%;
			overflow-y: auto;
			@media (min-width: 992px){
				left: 50%;
				width: 940px;
				margin-left: -470px;
			}
			@media (min-width: 1200px){
				width: 1140px;
				margin-left: -570px;
			}
		}
	}
}

.img-aligner {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	position: relative;
	overflow: hidden;
	display: block;
	.img-aligner__bg { display: block; width: 100%; }
	.img-aligner__img {
		position: absolute; top: 50%; left: 50%;
		display: block;
		max-width: 100%;
		max-height: 100%;
		@include transform(translateX(-50%) translateY(-50%));
	}
}

.js-highlight {
	@include transition();
	&.js-highlight-success {
		&.active {
			background: #b8e986;
			animation: js-highlight-blink 1s ease-in-out 2;
			-webkit-animation: js-highlight-blink 1s ease-in-out 2;
			@keyframes js-highlight-blink {
				0% { background: #B8E986; }
				80% { background: transparent; }
				100% { background: #B8E986; }
			}
			@-webkit-keyframes js-highlight-blink {
				0% { background: #B8E986; }
				80% { background: transparent; }
				100% { background: #B8E986; }
			}
		}
	}
}

.hasDropix {
	@media (max-width: 767px) {
		overflow: hidden;
	}
}
.dropix {
	position: relative;
	display: inline-block;
	.closer {
		&.size_16 {
			@media (max-width: 767px){
				width: 24px;
				height: 24px;
			}
		}
	}
	.dropix-balloon {
		position: absolute; top: 100%; right: 0;
		z-index: 9999;
		width: 320px;
		display: none;
		white-space: normal !important;
		color: $color_dark;
		@media (max-width: 767px) {
			background: #000;
			background: rgba(0,0,0,0.5);
			position: fixed; top: 0; right: 0; bottom: 0; left: 0;
			overflow-y: auto;
			width: auto;
			min-width: auto !important;
			//padding: 12px;
		}
	}
	.dropix-content {
		background: $color_white;
		position: relative;
		padding: 24px;
		font-size: 14px;
		text-align: left;
		box-shadow: 0 0 10px $color_gray_30;
		@include border-radius(6px);
		@media (max-width: 767px) { margin: 12px; }
	}
	&.active {
		.dropix-balloon { display: block; }
	}
	&.hovered {
		@media (min-width: 768px) {
			.dropix-balloon { display: block; }
		}
	}

	&.top {
		.dropix-balloon {
			@media (min-width: 768px) {
				top: auto;
				bottom: 100%;
			}
		}
	}
	&.bottom {
		.dropix-balloon {
			@media (min-width: 768px) {
				top: 100%;
				bottom: auto;
			}
		}
	}
	&.left {
		.dropix-balloon {
			@media (min-width: 768px) {
				left: 0;
				right: auto;
			}
		}
	}
	&.right {
		.dropix-balloon {
			@media (min-width: 768px) {
				left: auto;
				right: 0;
			}
		}
	}

	&.overlay {
		.dropix-balloon {
			top: 0;
		}
		&.top {
			.dropix-balloon {
				@media (min-width: 768px) {
					top: auto;
					bottom: 0;
				}
			}
		}
	}

	&.hover {
		//cursor: pointer;
		.dropix-link {
			cursor: pointer;
		}
		.closer {
			display: none;
		}
		&.active {
			.closer {
				display: block;
			}
		}
	}
}

.d-prop {
	border-bottom: 1px dashed $color_gray_10;
	position: relative;
	overflow: hidden;
	padding-bottom: 2px;
}

//TODO: Check
.b-disabled {
	position: relative;
	//opacity & before moved from another .b-disabled ???
	opacity: .5;
	&:before {
		content: '';
		position: absolute; top: 0; right: 0; bottom: 0; left: 0;
		z-index: 1;
	}
	.b-disabled__overlay {
		position: absolute; top: -24px; right: -24px; bottom: -24px; left: -24px;
		z-index: 55;
		opacity: 0.65;
		&.white {
			background: $white;
		}
	}
}

.global-images {
	position: relative;
	overflow: hidden;
	.global-images__list {
		position: absolute; top: 0; left: 0;
		margin: 0;
		padding: 0;
		list-style: none;
		li {
			display: inline-block;
			vertical-align: top;
		}
	}
}

//tooltip
.tooltip {
	&.tooltip-white, .tooltip-white & {
		opacity: 1;
		.tooltip-inner {
			background: $white;
			padding: 8px;
			color: $gray_dark;
			@include box-shadow(unquote("0 0 0 1px #dde4ec, 0 2px 4px rgba(0,0,0,.1)"));
		}
		&.top {
			.tooltip-arrow {border-top-color: $white;}
		}
		&.bottom {
			.tooltip-arrow {border-bottom-color: $white;}
		}
		&.left {
			.tooltip-arrow {border-left-color: $white;}
		}
		&.right {
			.tooltip-arrow {border-right-color: $white;}
		}
		&.tooltip-shadow {
			.tooltip-inner {
				@include box-shadow(unquote("0 0 0 1px #dde4ec, 0 2px 8px rgba(0,0,0,.4)") !important);
			}
		}
	}
	&.tooltip-blue, .tooltip-blue & {
		opacity: 1;
		.tooltip-inner {
			background: $blue;
			padding: 8px;
			color: $white;
		}
		&.top {
			.tooltip-arrow {border-top-color: $blue;}
		}
		&.bottom {
			.tooltip-arrow {border-bottom-color: $blue;}
		}
		&.left {
			.tooltip-arrow {border-left-color: $blue;}
		}
		&.right {
			.tooltip-arrow {border-right-color: $blue;}
		}
	}
	&.tooltip-blue-light, .tooltip-blue-light & {
		opacity: 1;
		.tooltip-inner {
			background: #d5e6f6;
			padding: 8px;
			color: $black;
		}
		&.top {
			.tooltip-arrow {border-top-color: #d5e6f6;}
		}
		&.bottom {
			.tooltip-arrow {border-bottom-color: #d5e6f6;}
		}
		&.left {
			.tooltip-arrow {border-left-color: #d5e6f6;}
		}
		&.right {
			.tooltip-arrow {border-right-color: #d5e6f6;}
		}
	}
	&.tooltip-blue-light-2, .tooltip-blue-light-2 & {
		opacity: 1;
		.tooltip-inner {
			background: #d5e6f6;
			padding: 8px;
			color: $black;
			@include box-shadow(0 2px 10px rgba(0, 0, 0, 0.25));
		}
		&.top {
			.tooltip-arrow {border-top-color: $blue;}
		}
		&.bottom {
			.tooltip-arrow {border-bottom-color: $blue;}
		}
		&.left {
			.tooltip-arrow {border-left-color: $blue;}
		}
		&.right {
			.tooltip-arrow {border-right-color: $blue;}
		}
	}
	&.tooltip-green, .tooltip-green & {
		opacity: 1;
		.tooltip-inner {
			background: $green_light;
			padding: 8px 12px;
			color: $color_dark;
		}
		&.top {
			.tooltip-arrow {border-top-color: $green_light;}
		}
		&.bottom {
			.tooltip-arrow {border-bottom-color: $green_light;}
		}
		&.left {
			.tooltip-arrow {border-left-color: $green_light;}
		}
		&.right {
			.tooltip-arrow {border-right-color: $green_light;}
		}
	}
	&.tooltip-red, .tooltip-red & {
		opacity: 1;
		.tooltip-inner {
			background: $red;
			padding: 8px 12px;
			color: $white;
		}
		&.top {
			.tooltip-arrow {border-top-color: $red;}
		}
		&.bottom {
			.tooltip-arrow {border-bottom-color: $red;}
		}
		&.left {
			.tooltip-arrow {border-left-color: $red;}
		}
		&.right {
			.tooltip-arrow {border-right-color: $red;}
		}
	}
	&.tooltip-shadow {
		.tooltip-inner {
			@include box-shadow(0 2px 4px rgba(0,0,0,0.1));
		}
	}
	&.tooltip-w-250 {
		.tooltip-inner {
			max-width: 250px;
		}
	}
	&.tooltip-w-300 {
		.tooltip-inner {
			max-width: 300px;
		}
	}
	&.tooltip-w-350 {
		.tooltip-inner {
			max-width: 350px;
		}
	}
	&.tooltip-w-400 {
		.tooltip-inner {
			max-width: 400px;
		}
	}
}

//text with icon TODO: Check
.twi {
	&:after {
		margin-left: 4px;
		font-family: 'FontAwesome';
		font-size: inherit;
		/*word-wrap: normal;
		overflow-wrap: normal;
		vertical-align: text-bottom;*/
	}
	&.twi_angle-double-right:after {
		content: '\f101';
	}
	&.twi_angle-double-down:after {
		content: '\f103';
	}
	&.twi_external-link:after {
		content: url(../images/svg/external-link.svg);
	}
}

.numbered {
	position: relative;
	padding-left: 24px;
	.num {
		position: absolute; top: 0; left: 0;
	}
}

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