@import "variables";

.freon-gas {
	font-size: 16px;
	line-height: 1.5;

	.freon-gas__head {
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		z-index: 5;
		margin: -24px -24px 24px -24px;
		padding: 24px;
		@media(max-width: 767px){
			margin: -12px -12px 12px -12px;
			padding: 12px 12px 24px;
		}

		.freon-gas-image {
			position: relative;
			//overflow: hidden;
			@media(max-width: 767px){ margin-bottom: 20px; }
			max-width: 400px;
			i {
				position: relative;
				overflow: hidden;
				display: block;
			}
			span {
				position: relative;
				overflow: hidden;
				display: block;
				@media (min-width: 992px){
					position: absolute; top: 0; left: 0;
				}
			}
			img {
				display: block;
				width: 100%;
				@include transition(all .75s ease-out 0s);
			}
			&:hover {
				img {
					@include transform(scale(1.25));
				}
			}
		}

		.freon-gas-headline {
			margin-bottom: 20px;
			h1 {
				margin: 0;
				font-size: 48px;
				line-height: normal;
			}
			h2 {
				margin: 0;
				font-size: 24px;
				line-height: normal;
				font-weight: normal;
				color: $color_gray_80;
			}
			@media (max-width: 1199px){
				h1 { font-size: 40px; }
				h2 { font-size: 22px; }
			}
			@media (max-width: 991px){
				h1 {
					margin-bottom: 8px;
					font-size: 36px;
					line-height: 1.15;
				}
				h2 { font-size: 20px; }
			}
		}

		.freon-gas-headline__alert {
			background: $white;
			border: 1px solid $red;
			position: relative;
			display: inline-block;
			margin-top: 8px;
			padding: 8px 16px 8px 40px;
			.ico {
				position: absolute; top: 13px; left: 16px;
				display: block; width: 16px; height: 16px;
			}
		}

		.freon-gas-price {
			margin: 0; padding: 0; list-style: none;
			color: $color_gray_60;
			@media (min-width: 1200px){text-align: right;}
			.price {
				display: inline-block;
				font-size: 36px;
				line-height: normal;
				color: $color_blue;
				@media (min-width: 1200px){
					margin-top: -16px;
				}
			}
			.btn-lg {
				padding: 8px 36px 10px;
				font-size: 20px !important;
				line-height: 24px !important;
			}
		}

		.freon-gas-posa-bl {
			@media (min-width: 1200px){ position: absolute; bottom: 0; }
			padding-top: 20px;
			ul {
				margin: 0; padding: 0; list-style: none;
				li {
					display: inline-block;
					vertical-align: top;
					& + li {
						margin-left: 36px;
						@media (max-width: 767px){ margin-left: 16px; }
					}
					strong {
						display: block;
						font-size: 28px;
					}
				}
			}
		}
		.freon-gas-posa-br {
			position: absolute; bottom: 0; right: 15px;
			width: 95px;
			img { max-width: 100%; }
			span {
				@media (min-width: 768px){ position: absolute; bottom: 0; right: 90%; }
				display: block;
				font-size: 14px;
				color: $color_gray_60;
				white-space: nowrap;
				text-align: center;
			}
		}
	}
	.freon-gas__body {
		position: relative;
		z-index: 1;
		.freon-gas-description {
			@media (max-width: 767px){ padding-top: 20px; }
			font-size: 20px;
			h3 { font-size: inherit; }
			p {
				margin-bottom: 16px;
				@media (max-width: 767px){ margin-bottom: 12px; }
			}
		}
		.freon-gas-advantages {
			width: 100%;
			tr {
				td {
					padding: 50px 0 0 20px;
					vertical-align: top;
					&:first-child { padding-left: 0; }
				}
				&:first-child {
					td {
						padding-top: 0;
					}
				}
			}
			.row {
				.col-xxs-12 {
					margin-top: 50px !important;
					@media(max-width: 449px){
						margin-top: 32px !important;
					}
				}
				&:first-child{
					.col-xxs-12 {
						@media(min-width: 450px){
							margin-top: 0 !important;
						}
						@media(max-width: 449px){
							&:first-child {
								margin-top: 0 !important;
							}
						}
					}
				}
				@media (max-width: 449px){
					text-align: center;
					.ico {
						margin: 0 auto;
					}
				}
			}
			.ico {
				display: inline-block;
				vertical-align: top;
				margin-bottom: 10px;
				font-size: 28px;
				line-height: 28px;
				min-height: 28px;
				font-weight: bold;
				svg { display: block; }
				img {
					display: block;
				}
				&.double {
					@media(min-width: 450px){
						line-height: 68px;
						min-height: 68px;
						svg {
							margin-top: 40px;
						}
					}
				}
			}
		}

		.freon-gas-form {
			background: #cae1f2;
			position: relative;
			@media (min-width: 1200px) {
				//margin-left: -24px;
			}
			.freon-gas-form__head {
				border-bottom: 2px solid #e9f4fc;
				padding: 24px;
				@media(max-width: 767px){
					border-bottom: 0;
					padding-bottom: 0;
				}

				.freon-gas-form__manager {
					position: relative;
					min-height: 100px;
					.manager-image {
						width: 150px;
						margin-bottom: 20px;
						@media (min-width: 768px){
							position: absolute; bottom: -24px;
							margin-bottom: 0;
						}
						img { max-width: 100%; }
					}
					.manager-text {
						font-size: 16px;
						color: $color_gray_60;
						.h {
							position: relative;
							margin-bottom: 12px;
							font-size: 20px;
							font-weight: bold;
							color: $color_gray_90;
							.h-ico {
								position: absolute; top: 6px; left: -24px;
								@media (max-width: 767px){
									display: none;
								}
							}
						}
						.manager-name {
							position: relative;
							margin-top: 2px;
							color: $color_dark;
							span {
								position: absolute;
								right: 100%;
								margin-right: 8px;
							}
						}
					}
				}
			}
			.freon-gas-form__body {
				padding: 24px;
				font-size: 16px;
				.form-group {
					.form-label {
						margin-bottom: 4px;
						font-size: 12px;
						color: $color_gray_50;
					}
					.form-field {
						textarea {
							width: 100% !important;
							min-height: 218px;
						}
					}
				}
				.btn-lg {
					padding: 8px 36px;
					font-size: 20px !important;
					line-height: 24px !important;
				}
				.freon-gas-form__result {
					color: $color_dark;
					.big { font-size: 20px; }
					.row {
						& + .row { margin-top: 20px; }
						.text-right {
							opacity: 0.45;
							@media (max-width: 767px){ text-align: left !important; }
						}
					}
				}
			}

			.row-phone {
				.row-phone__code {
					width: 84px;
				}
				.row-phone__number {
					margin-left: 92px;
				}
			}

			&.success {
				background: #b8e986;
				@include transition();
				.freon-gas-form__head {
					border-bottom-color: #e1f5cc;
				}
			}
		}
	}

	.freon-gas-data {
		position: relative;
		padding-top: 24px;
		.fgd-weiDel {
			@media(min-width: 992px){
				//top: -64px;
				position: absolute; top: -16px; right: 0;
			}
			margin-bottom: 24px;
			@media(max-width: 991px){
				display: flex;
			}
			@media(max-width: 767px){
				margin-bottom: 40px;
			}
		}
		.fgd-weight {
			font-size: 18px;
			line-height: 1;
			color: $color_gray_50;
			white-space: nowrap;
			@media(min-width: 992px){
				min-height: 48px;
				text-align: right;
			}
			span {
				display: inline-block;
				text-align: left;
			}
			strong {
				display: block;
				font-size: 28px;
				line-height: 1;
				color: $color_dark;
			}
		}
		.fgd-delivery {
			display: flex;
			.fgd-delivery__icon {
				img {
					display: inline-block;
					max-width: 80px;
					@media(max-width: 575px){
						max-width: 60px;
					}
				}
			}
			.fgd-delivery__text {
				font-weight: bold;
				line-height: 1.25;
				@media(max-width: 575px){
					font-size: 14px;
				}
			}
			@media(max-width: 991px){
				//margin-left: 32px;
				align-items: center;
				.fgd-delivery__icon {
					margin-right: 16px;
				}
			}
			@media(min-width: 992px){
				flex-direction: column;
				width: 115px;
				max-width: 115px;
				margin-top: 32px;
				text-align: right;
				.fgd-delivery__icon {}
				.fgd-delivery__text {}
				/*&.fi {
					max-width: 130px;
				}*/
			}
			@media(min-width: 1200px){
				flex-direction: row;
				//align-items: center;
				width: 240px;
				max-width: 240px;
				text-align: left;
				.fgd-delivery__icon {
					margin-right: 16px;
				}
				.fgd-delivery__text {
					margin-top: -4px;
				}
				/*&.ee {
					max-width: 230px;
				}
				&.fi {
					max-width: 240px;
				}*/
			}
		}
		.fgd-price {
			margin: 0;
			padding: 0;
			list-style: none;
			& > li {
				position: relative;
				display: inline-block;
				vertical-align: top;
			}
			.fgd-price__field {
				border: 1px solid $white;
				width: 108px;
				padding: 12px 8px 14px;
				font-size: 18px;
				line-height: 1;
				font-weight: bold;
				color: $blue;
				text-align: center;
				@include border-radius(6px);
				strong {
					font-size: 28px;
				}
				&.result {
					border-color: transparent;
					padding-left: 0;
					text-align: left;
				}
				@media (max-width: 767px){
					border: 0;
					width: auto;
					padding: 0;
					font-size: 14px;
					text-align: left;
				}
			}
			.fgd-price__discount {
				position: absolute; top: -10px; left: 0;
				font-size: 12px;
				line-height: 1;
				white-space: nowrap;
				@media (min-width: 768px){}
				@media (max-width: 767px){
					top: -20px;
				}
				s {
					background: #CCC;
					display: inline-block;
					vertical-align: top;
					padding: 4px;
				}
				i {
					background: $red;
					display: inline-block;
					vertical-align: top;
					padding: 4px;
					font-style: normal;
					font-weight: bold;
					color: $white;
				}
			}
			.fgd-price__label {
				width: 108px;
				padding-top: 4px;
				font-size: 15px;
				line-height: 1.25;
				@media (max-width: 767px){
					width: 72px;
					font-size: 12px;
				}
				&.result {
					@media(min-width: 992px){
						width: 150px;
					}
				}
			}
			.fgd-price__sign {
				padding: 0 8px;
				font-size: 48px;
				line-height: 1;
				@media (max-width: 767px){
					font-size: 24px;
					padding: 0;
				}
			}
		}
		.fgd-info {
			@media (min-width: 1200px) {
				float: left;
			}
			margin: 0;
			padding: 24px 0 0 0;
			list-style: none;
			color: $color_gray_50;
		}
		.fgd-cart {
			position: relative;
			@media (min-width: 1200px) {
				float: right;
			}
			margin: 0 -8px;
			padding: 24px 0 0 0;
			list-style: none;
			& > li {
				padding-left: 8px;
				padding-right: 8px;
				@media(min-width: 576px){
					display: inline-block;
					vertical-align: top;
				}
				@media(max-width: 575px){
					//text-align: center;
					&:not(:first-child){
						margin-top: 24px;
					}
				}
			}
			.fgd-count {
				@media(min-width: 576px) {
					padding-top: 4px;
				}
				.fgd-count__label {
					font-size: 12px;
					text-align: center;
					color: $color_gray_50;
				}
			}
			.q-counter {
				display: block;
				width: 124px;
				margin: 0 auto;
				padding: 0 36px;
				.q-counter__minus {
					background: $color_gray_05;
					width: 32px;
					height: 32px;
					margin-top: -16px;
					@include border-radius(50%);
					&:before {
						width: 12px;
						margin-left: -6px;
					}
					&:hover {
						background: $red;
					}
				}
				.q-counter__plus {
					background: $color_gray_05;
					width: 32px;
					height: 32px;
					margin-top: -16px;
					@include border-radius(50%);
					&:before, &:after {
						width: 12px;
						margin-left: -6px;
					}
					&:hover {
						background: $green;
					}
				}
				.q-counter__field {
					.form-control {
						height: auto;
						padding: 8px 4px;
						font-size: 18px;
					}
				}
			}
			.btn {
				padding: 16px;
				font-size: 18px;
				font-weight: bold;
				line-height: 1;
				.fa {
					margin-left: 4px;
				}
			}
		}
		.fgd-availability {
			padding-top: 24px;
			font-size: 14px;
			.alert {
				padding: 8px 16px;
				font-size: 14px;
				&.alert-warning {
					background: $yellow_light;
					border-color: $yellow_light;
				}
			}
		}
	}

	.freon-gas-linking {
		margin: 0;
		padding: 0;
		list-style: none;
		@media(min-width: 1200px){
			position: absolute; top: 80px; left: -360px;
		}
		@media(max-width: 1199px){
			margin-top: 24px;
		}
		dt {
			margin: 0;
			padding: 0;
			font-weight: normal;
		}
		dd, li {
			position: relative;
			margin: 0;
			padding: 0;
			padding-left: 16px;
			&:not(:first-child){
				margin-top: 4px;
			}
			a {
				border-bottom-color: transparent;
				color: #0070c9;
				&:hover {
					border-bottom-color: #0070c9;
				}
			}
			&.active {
				&:before {
					content: '';
					position: absolute; top: 6px; left: 0;
					border-width: 6px 8px;
					border-style: solid;
					border-color: transparent;
					border-left-color: $black;
				}
			}
		}
	}
}

.v2--freon-gas {
	font-size: 16px;
	line-height: 1.5;

	.freon-gas__underhead {
		background: #d5e6f6;
		margin: -12px -12px 0;
		padding: 12px 12px 28px;
		.freon-gas-linking {
			margin: 0;
		}
	}
	.freon-gas__head {
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		z-index: 5;
		margin: -24px -24px 24px -24px;
		padding: 24px;
		@media(max-width: 767px){
			margin: -12px -12px 12px -12px;
			padding: 12px 12px 24px;
		}

		.freon-gas-image {
			position: relative;
			@media(max-width: 767px){ margin-bottom: 20px; }
			max-width: 400px;
			i {
				position: relative;
				overflow: hidden;
				display: block;
			}
			span {
				position: relative;
				overflow: hidden;
				display: block;
				@media (min-width: 992px){
					position: absolute; top: 0; left: 0;
				}
			}
			img {
				display: block;
				width: 100%;
				@include transition(all .75s ease-out 0s);
			}
			&:hover {
				img {
					@include transform(scale(1.25));
				}
			}
		}

		.freon-gas-headline-fix {
			background: #c7dff2;
			position: fixed; top: 0; left: 0; right: 0;
			z-index: 9999;
			display: none;
			padding: 12px;
			font-size: 48px;
			font-weight: bold;
			line-height: normal;
			@include box-shadow(0 4px 4px rgba(0, 0, 0, .1));
			@media (max-width: 1199px){
				font-size: 36px;
			}
			@media (max-width: 991px){
				font-size: 26px;
				line-height: 1.15;
			}
			&.in {
				display: block;
			}
		}

		.freon-gas-headline {
			margin-bottom: 20px;
			h1 {
				margin: 0;
				font-size: 48px;
				line-height: normal;
			}
			h2 {
				margin: 0;
				font-size: 24px;
				line-height: normal;
				font-weight: normal;
				color: $color_gray_80;
			}
			@media (max-width: 1199px){
				h1 { font-size: 36px; }
				h2 { font-size: 22px; }
			}
			@media (max-width: 991px){
				h1 {
					//margin-bottom: 8px;
					font-size: 26px;
					line-height: 1.15;
				}
				h2 { font-size: 20px; }
			}
		}

		.freon-gas-headline__alert {
			background: $white;
			border: 1px solid $red;
			position: relative;
			display: inline-block;
			margin-top: 8px;
			padding: 8px 16px 8px 40px;
			.ico {
				position: absolute; top: 13px; left: 16px;
				display: block; width: 16px; height: 16px;
			}
		}

		/*.freon-gas-price {
			margin: 0; padding: 0; list-style: none;
			color: $color_gray_60;
			@media (min-width: 1200px){
				text-align: right;
			}
			.price {
				display: inline-block;
				font-size: 36px;
				line-height: normal;
				color: $color_blue;
				@media (min-width: 1200px){
					margin-top: -16px;
				}
			}
			.btn-lg {
				padding: 8px 36px 10px;
				font-size: 20px !important;
				line-height: 24px !important;
			}
		}*/

		.freon-gas-posa-bl {
			@media (min-width: 1200px){ position: absolute; bottom: 0; }
			padding-top: 20px;
			ul {
				margin: 0; padding: 0; list-style: none;
				li {
					display: inline-block;
					vertical-align: top;
					& + li {
						margin-left: 36px;
						@media (max-width: 767px){ margin-left: 16px; }
					}
					strong {
						display: block;
						font-size: 28px;
					}
				}
			}
		}
		.freon-gas-posa-br {
			position: absolute; bottom: 0; right: 15px;
			width: 95px;
			img { max-width: 100%; }
			span {
				@media (min-width: 768px){ position: absolute; bottom: 0; right: 90%; }
				display: block;
				font-size: 14px;
				color: $color_gray_60;
				white-space: nowrap;
				text-align: center;
			}
		}
	}
	.freon-gas__body {
		position: relative;
		z-index: 1;
		.freon-gas-price {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24px;
			font-size: 14px;
			@media(max-width: 767px){
				flex-direction: column;
				align-items: flex-start;
			}
			.freon-gas-price__head {
				margin-bottom: 16px;
				font-size: 18px;
				font-weight: bold;
			}
			.freon-gas-price__select {
				margin-bottom: 16px;
				.u-label {
					margin-right: 8px;
				}
				.u-select {
					position: relative;
					display: inline-block;
					.icobox.size_16 {
						padding-left: 26px;
					}
					.u-select__head {
						border: 1px solid #aaa;
						min-width: 200px;
						padding: 6px 12px;
						@include border-radius(3px);
						.fa-caret-down {
							position: absolute; top: 50%; right: 12px;
							@include transform(translateY(-50%));
						}
					}
					.u-select__body {
						background: #fff;
						border: 1px solid #aaa;
						position: absolute; top: 0; left: 0;
						z-index: 999;
						overflow: hidden;
						margin-top: 1px;
						visibility: hidden;
						opacity: 0;
						@include border-radius(3px);
						@include transition();
					}
					.u-select__list {
						margin: 0;
						padding: 0;
						list-style: none;
						font-size: 14px;
						.u-select__link {
							a {
								border: 0;
								display: block;
								padding: 6px 12px;
								color: #333;
								&:hover {
									background: $blue;
									color: $white;
								}
							}
						}
						.u-select__separate {
							background: #aaa;
							padding: 0;
							height: 1px;
						}
						.u-select__box {
							padding: 6px 12px;
						}
					}
					&:hover {
						cursor: pointer;
					}
					&.in {
						.u-select__head {
							.fa-caret-down {
								@include transform(translateY(-50%) rotate(180deg));
							}
						}
						.u-select__body {
							top: 100%;
							visibility: visible;
							opacity: 1;
						}
					}
				}
			}
			.freon-gas-price__body {
				position: relative;
				overflow: hidden;
				overflow-x: auto;
				min-width: 100%;
				@media(max-width: 575px){
					margin-left: -12px;
					margin-right: -12px;
				}
				.price-table {
					display: none;
					table {
						width: 100%;
						text-align: right;
						tr {
							th {
								background: #e9e9e9;
								padding: 4px 8px;
								font-size: 12px;
								color: #9b9b9b;
								text-align: right;
								@media(max-width: 767px){
									padding: 4px;
								}
								&:not(:first-child){
									border-left: 1px solid #e1e1e1;
								}
							}
							td {
								border-bottom: 1px solid #e1e1e1;
								padding: 8px;
								@media(max-width: 767px){
									padding: 4px;
								}
								&:not(:first-child){
									border-left: 1px solid #e1e1e1;
								}
							}
						}
					}
					.btn {
						white-space: nowrap;
						min-width: 108px;
						text-align: center;
						@media(max-width: 767px){
							min-width: 34px;
						}
						.fa {
							margin-left: -1px;
						}
					}
					&.in {
						display: block;
					}
				}

				.fs-16 {
					@media(max-width: 767px){
						font-size: 14px !important;
					}
				}
				.discount {
					background: #ccc;
					display: inline-block;
					margin-right: 8px;
					//vertical-align: middle;
					font-size: 12px;
					line-height: 1.25;
					s {
						display: inline-block;
						padding: 1px 4px;
						font-style: normal;
						text-decoration: none;
						@media(max-width: 767px){
							display: none;
						}
					}
					i {
						background: $red;
						display: inline-block;
						padding: 1px 6px;
						font-style: normal;
						font-weight: bold;
						color: $white;
					}
				}
			}
		}
		.freon-gas-attention {
			.freon-gas-attention__firm {
				background: #ffe180;
				margin-bottom: 24px;
				padding: 8px 16px 12px;
				@media(max-width: 767px){
					margin-left: -12px;
					margin-right: -12px;
				}
			}
			.freon-gas-attention__discount {
				margin-bottom: 24px;
				color: $green_dark;
			}
		}
		.freon-gas-description {
			margin-bottom: 48px;
			font-size: 20px;
			h3 {
				max-width: 575px;
				font-size: inherit;
			}
		}
		.freon-gas-advantages {
			background: #f8fafb;
			display: flex;
			@media(max-width: 767px){
				flex-wrap: wrap;
			}
			width: 100%;
			margin-bottom: 24px;
			.freon-gas-advantages__col {
				flex-grow: 1;
				min-width: 33.3333%;
				padding: 24px;
				text-align: center;
			}
			.ico {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				margin-bottom: 12px;
				font-size: 28px;
				line-height: 28px;
				font-weight: bold;
				@media(min-width: 576px){
					min-height: 68px;
				}
				svg { display: block; }
				img {
					display: block;
					max-height: 68px;
				}
				&.double {
					@media(min-width: 450px){
						line-height: 68px;
						min-height: 68px;
						svg {
							margin-top: 40px;
						}
					}
				}
			}
			.txt {
				font-size: 14px;
			}
		}
		.freon-gas-conditions {
			margin: 0;
			padding: 0;
			list-style: none;
			color: #757575;
			li {
				position: relative;
				padding-left: 12px;
				&:before {
					content: '';
					background: #757575;
					position: absolute; top: 12px; left: 0;
					display: block;
					width: 4px;
					height: 4px;
					@include border-radius(50%);
				}
			}
		}
		.freon-gas-separate {
			@media(max-width: 767px){
				min-height: 80px;
			}
			@media(min-width: 768px){
				min-height: 160px;
			}
		}

		.freon-gas-form {
			background: #cae1f2;
			position: relative;
			@media (min-width: 1200px) {
				//margin-left: -24px;
			}
			.freon-gas-form__toggler {
				position: relative;
				display: flex;
				padding: 12px;
				@media(max-width: 575px){
					padding-bottom: 32px;
					font-size: 14px;
				}
				.image {
					padding-right: 12px;
					img {
						display: block;
						max-width: 48px;
					}
				}
				.text {
					flex-grow: 1;
					line-height: 1.25;
				}
				.carret {
					padding: 0 12px 0 12px;
					font-size: 18px;
					align-self: center;
					@media(max-width: 575px){
						position: absolute; bottom: 4px; left: 0; right: 0;
						min-width: 100%;
						padding: 0;
						text-align: center;
					}
				}
				&:hover {
					cursor: pointer;
				}
			}
			.freon-gas-form__head {
				display: none;
				border-bottom: 2px solid #e9f4fc;
				padding: 24px;
				@media(max-width: 767px){
					border-bottom: 0;
					padding-bottom: 0;
				}

				.freon-gas-form__manager {
					position: relative;
					min-height: 100px;
					.manager-image {
						width: 150px;
						margin-bottom: 20px;
						@media (min-width: 768px){
							position: absolute; bottom: -24px;
							margin-bottom: 0;
						}
						img { max-width: 100%; }
					}
					.manager-text {
						font-size: 16px;
						color: $color_gray_60;
						.h {
							position: relative;
							margin-bottom: 12px;
							font-size: 20px;
							font-weight: bold;
							color: $color_gray_90;
							.h-ico {
								position: absolute; top: 6px; left: -24px;
								@media (max-width: 767px){
									display: none;
								}
							}
						}
						.manager-name {
							position: relative;
							margin-top: 2px;
							color: $color_dark;
							span {
								position: absolute;
								right: 100%;
								margin-right: 8px;
							}
						}
					}
				}
			}
			.freon-gas-form__body {
				display: none;
				padding: 24px;
				font-size: 16px;
				.form-group {
					.form-label {
						margin-bottom: 4px;
						font-size: 12px;
						color: $color_gray_50;
					}
					.form-field {
						textarea {
							width: 100% !important;
							min-height: 218px;
						}
					}
				}
				.btn-lg {
					padding: 8px 36px;
					font-size: 20px !important;
					line-height: 24px !important;
				}
				.freon-gas-form__result {
					color: $color_dark;
					.big { font-size: 20px; }
					.row {
						& + .row { margin-top: 20px; }
						.text-right {
							opacity: 0.45;
							@media (max-width: 767px){ text-align: left !important; }
						}
					}
				}
			}

			.row-phone {
				.row-phone__code {
					width: 84px;
				}
				.row-phone__number {
					margin-left: 92px;
				}
			}

			&.success {
				background: #b8e986;
				@include transition();
				.freon-gas-form__head {
					border-bottom-color: #e1f5cc;
				}
			}

			&.in {
				.freon-gas-form__toggler .carret .fa {
					@include transform(rotate(180deg));
				}
				.freon-gas-form__head,
				.freon-gas-form__body {
					display: block;
				}
			}
		}
	}
	.freon-gas-country {
		margin-top: 12px;
		font-size: 16px;
		font-weight: bold;
		line-height: 1.5;
		color: $color_dark;
		.country__label {
			background: $green;
			display: inline-block;
			//vertical-align: middle;
			padding: 2px 6px;
			color: $white;
		}
		.country__flag {
			border: 0;
			position: relative;
			display: inline-block;
			//vertical-align: middle;
			padding-left: 24px;
			img {
				position: absolute; top: 50%; left: 0;
				display: block;
				width: 16px;
				height: auto;
				@include transform(translateY(-50%));
				@include box-shadow(0 0 4px rgba(0,0,0,.4));
				@include border-radius(2px);
			}
			span {
				border-bottom: 1px dashed $blue;
				line-height: 1.25;
				display: block;
			}
		}
	}
	.freon-gas-data {
		position: relative;
		margin-top: 24px;
		.fgd-weiDel {
			@media(min-width: 992px){
				//top: -64px;
				position: absolute; top: -16px; right: 0;
			}
			margin-bottom: 24px;
			@media(max-width: 991px){
				display: flex;
			}
			@media(max-width: 767px){
				margin-bottom: 40px;
			}
		}
		.fgd-weight {
			font-size: 18px;
			line-height: 1;
			color: $color_gray_50;
			white-space: nowrap;
			@media(min-width: 992px){
				min-height: 48px;
				text-align: right;
			}
			span {
				display: inline-block;
				text-align: left;
			}
			strong {
				display: block;
				font-size: 28px;
				line-height: 1;
				color: $color_dark;
			}
		}
		.fgd-delivery {
			display: flex;
			.fgd-delivery__icon {
				img {
					display: inline-block;
					max-width: 80px;
					@media(max-width: 575px){
						max-width: 60px;
					}
				}
			}
			.fgd-delivery__text {
				font-weight: bold;
				line-height: 1.25;
				@media(max-width: 575px){
					font-size: 14px;
				}
			}
			@media(max-width: 991px){
				//margin-left: 32px;
				.fgd-delivery__icon {
					margin-right: 16px;
				}
			}
			@media(min-width: 992px){
				flex-direction: column;
				max-width: 90px;
				margin-top: 32px;
				text-align: right;
				.fgd-delivery__icon {}
				.fgd-delivery__text {}
				&.fi {
					max-width: 130px;
				}
			}
			@media(min-width: 1200px){
				flex-direction: row;
				align-items: center;
				max-width: 180px;
				text-align: left;
				.fgd-delivery__icon {
					margin-right: 16px;
				}
				.fgd-delivery__text {}
				&.ee {
					max-width: 230px;
				}
				&.fi {
					max-width: 240px;
				}
			}
		}
		.fgd-price {
			margin: 0;
			padding: 0;
			list-style: none;
			& > li {
				position: relative;
				display: inline-block;
				vertical-align: top;
			}
			.fgd-price__field {
				border: 1px solid $white;
				width: 108px;
				padding: 12px 8px 14px;
				font-size: 18px;
				line-height: 1;
				font-weight: bold;
				color: $blue;
				text-align: center;
				@include border-radius(6px);
				strong {
					font-size: 28px;
				}
				&.result {
					border-color: transparent;
					padding-left: 0;
					text-align: left;
				}
				@media (max-width: 767px){
					border: 0;
					width: auto;
					padding: 0;
					font-size: 14px;
					text-align: left;
				}
			}
			.fgd-price__discount {
				position: absolute; top: -10px; left: 0;
				font-size: 12px;
				line-height: 1;
				white-space: nowrap;
				@media (min-width: 768px){}
				@media (max-width: 767px){
					top: -20px;
				}
				s {
					background: #CCC;
					display: inline-block;
					vertical-align: top;
					padding: 4px;
				}
				i {
					background: $red;
					display: inline-block;
					vertical-align: top;
					padding: 4px;
					font-style: normal;
					font-weight: bold;
					color: $white;
				}
			}
			.fgd-price__label {
				width: 108px;
				padding-top: 4px;
				font-size: 15px;
				line-height: 1.25;
				@media (max-width: 767px){
					width: 72px;
					font-size: 12px;
				}
				&.result {
					@media(min-width: 992px){
						width: 150px;
					}
				}
			}
			.fgd-price__sign {
				padding: 0 4px;
				font-size: 48px;
				line-height: 1;
				@media (max-width: 767px){
					font-size: 24px;
					padding: 0;
				}
			}
		}
		.fgd-info {
			@media (min-width: 1200px) {
				float: left;
			}
			margin: 0;
			padding: 24px 0 0 0;
			list-style: none;
			color: $color_gray_50;
		}
		.fgd-info_v2 {
			margin: 0;
			padding: 8px 0 0 0;
			list-style: none;
			/*li:not(:first-child){
				margin-top: 4px;
			}*/
			.delivery {
				border: 2px dashed #fff;
				position: relative;
				display: inline-block;
				padding: 4px 16px 6px;
				font-size: 20px;
				font-weight: bold;
				@include border-radius(4px);
			}
		}
		.fgd-cart {
			position: relative;
			@media (min-width: 1200px) {
				float: right;
			}
			margin: 0 -8px;
			padding: 24px 0 0 0;
			list-style: none;
			& > li {
				padding-left: 8px;
				padding-right: 8px;
				@media(min-width: 576px){
					display: inline-block;
					vertical-align: top;
				}
				@media(max-width: 575px){
					//text-align: center;
					&:not(:first-child){
						margin-top: 24px;
					}
				}
			}
			.fgd-count {
				@media(min-width: 576px) {
					padding-top: 4px;
				}
				.fgd-count__label {
					font-size: 12px;
					text-align: center;
					color: $color_gray_50;
				}
			}
			.q-counter {
				display: block;
				width: 124px;
				margin: 0 auto;
				padding: 0 36px;
				.q-counter__minus {
					background: $color_gray_05;
					width: 32px;
					height: 32px;
					margin-top: -16px;
					@include border-radius(50%);
					&:before {
						width: 12px;
						margin-left: -6px;
					}
					&:hover {
						background: $red;
					}
				}
				.q-counter__plus {
					background: $color_gray_05;
					width: 32px;
					height: 32px;
					margin-top: -16px;
					@include border-radius(50%);
					&:before, &:after {
						width: 12px;
						margin-left: -6px;
					}
					&:hover {
						background: $green;
					}
				}
				.q-counter__field {
					.form-control {
						height: auto;
						padding: 8px 4px;
						font-size: 18px;
					}
				}
			}
			.btn {
				padding: 16px;
				font-size: 18px;
				font-weight: bold;
				line-height: 1;
				.fa {
					margin-left: 4px;
				}
			}
		}
		.fgd-availability {
			padding-top: 24px;
			font-size: 14px;
			.alert {
				padding: 8px 16px;
				font-size: 14px;
				&.alert-warning {
					background: $yellow_light;
					border-color: $yellow_light;
				}
			}
		}

		//mod
		.fgd-line {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.fgd-price {
				padding-right: 8px;
				padding-bottom: 12px;
				white-space: nowrap;
				li {
					white-space: normal;
				}
			}
			.fgd-cartBox {
				@media(max-width: 575px){
					flex-grow: 1;
				}
				margin-top: 8px;
				.d-flex {
					align-items: center;
				}
				.fgd-cartCounter {
					@media(max-width: 575px){
						margin-left: auto;
					}
					.q-counter {
						.q-counter__minus {
							background: #e6e6e6;
							@include border-radius(50%);
							&:before {
								background: #aaa;
								width: 50%;
							}
							&:hover {
								background: $red;
								&:before {
									background: #fff;
								}
							}
						}
						.q-counter__plus {
							background: #e6e6e6;
							@include border-radius(50%);
							&:before, &:after {
								background: #aaa;
								width: 60%;
							}
							&:hover {
								background: $green;
								&:before, &:after {
									background: #fff;
								}
							}
						}
						&.has-error {
							.form-control {
								border-color: #2DB92D !important;
								color: #333 !important;
							}
						}
					}
				}
				.fgd-cartButton {
					margin-left: 12px;
					.btn {
						padding: 10px 16px;
						font-size: 16px;
						.fa {
							margin-right: 4px;
						}
					}
				}
				.fgd-cartDescription {
					margin: 4px 0 0 0;
					padding: 0;
					list-style: none;
					text-align: right;
					font-size: 14px;
				}
				.fgd-error {
					position: relative;
					display: none;
					.fgd-error__btn {
						padding-top: 8px;
						a {
							border-bottom-style: dashed;
						}
					}
					.fgd-error-tooltip {
						//background: #fccaca;
						background: #d9ffb2;
						position: absolute; top: 100%; left: 0; right: 0;
						z-index: 900;
						margin-top: 12px;
						padding: 8px;
						font-size: 14px;
						line-height: 1.25;
						@include box-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
						@include border-radius(4px);
						&:before {
							content: '';
							position: absolute; top: -20px; left: 36px;
							border: 10px solid transparent;
							//border-bottom-color: #fccaca;
							border-bottom-color: #d9ffb2;
							@media(max-width: 575px){
								left: 50%;
								margin-left: -10px;
							}
						}
					}
					&.in {
						display: block;
					}
				}
			}
		}
	}

	.freon-gas-linking {
		//margin: 24px 0 0 0;
		margin: 0 0 28px 0;
		padding: 0;
		list-style: none;
		dt {
			margin: 0;
			padding: 0;
			font-weight: normal;
		}
		dd, li {
			position: relative;
			margin: 0;
			padding: 0;
			padding-left: 16px;
			&:not(:first-child){
				margin-top: 4px;
			}
			a {
				border-bottom-color: transparent;
				color: #0070c9;
				&:hover {
					border-bottom-color: #0070c9;
				}
			}
			&.active {
				&:before {
					content: '';
					position: absolute; top: 6px; left: 0;
					border-width: 6px 8px;
					border-style: solid;
					border-color: transparent;
					border-left-color: $black;
				}
			}
		}
	}
}

.freon-gas-delivery {
	&:not(.deliveryBox) {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 0 -8px;
		padding: 0;
		list-style: none;
		& > li {
			padding: 0 8px;
			&.result {
				display: none;
				padding: 4px 8px;
				&.in {
					display: block;
				}
			}
		}
		.u-select {
			position: relative;
			display: inline-block;
			font-size: 14px;
			.icobox.size_16 {
				padding-left: 26px;
			}
			.u-select__head {
				border: 1px solid #aaa;
				min-width: 200px;
				padding: 6px 12px;
				@include border-radius(3px);
				.fa-caret-down {
					position: absolute; top: 50%; right: 12px;
					@include transform(translateY(-50%));
				}
			}
			.u-select__body {
				background: #fff;
				border: 1px solid #aaa;
				position: absolute; top: 0; left: 0;
				z-index: 999;
				overflow: hidden;
				margin-top: 1px;
				visibility: hidden;
				opacity: 0;
				@include border-radius(3px);
				@include transition();
			}
			.u-select__list {
				margin: 0;
				padding: 0;
				list-style: none;
				font-size: 14px;
				.u-select__link {
					a {
						border: 0;
						display: block;
						padding: 6px 12px;
						color: #333;
						&:hover {
							background: $blue;
							color: $white;
						}
					}
				}
				.u-select__separate {
					background: #aaa;
					padding: 0;
					height: 1px;
				}
				.u-select__box {
					padding: 6px 12px;
				}
			}
			&:hover {
				cursor: pointer;
			}
			&.in {
				.u-select__head {
					.fa-caret-down {
						@include transform(translateY(-50%) rotate(180deg));
					}
				}
				.u-select__body {
					top: 100%;
					visibility: visible;
					opacity: 1;
				}
			}
		}
	}
	&.deliveryBox {
		margin-bottom: 36px;
		@media(max-width: 767px){
			margin-bottom: 24px;
		}
		.deliveryBox__list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin: 0 -3px;
			padding: 0;
			list-style: none;
			li {
				padding: 4px 3px;
			}
			.label {
				@include border-radius(0);
				&.label-success {
					background: #2DB92D;
					padding: 6px 8px;
					color: $white;
				}
			}
			.pseudo-selectpicker {
				min-width: 200px;
			}
		}
		.deliveryBox__description {}
	}
}

.p-refrigerant {
	.p-refrigerant__head {
		margin-bottom: 40px;
		h1 {
			margin: 0;
			font-size: 36px;
			@media(max-width: 991px){
				font-size: 32px;
			}
			@media(max-width: 767px){
				font-size: 28px;
			}
			&:not(:last-child){
				margin-bottom: 12px;
			}
		}
		.description {
			font-size: 24px;
			font-weight: bold;
			@media(max-width: 991px){
				font-size: 20px;
			}
			@media(max-width: 767px){
				font-size: 18px;
			}
		}
	}
}
.p-refrigerant-list {
	.p-refrigerant-list__head {
		margin-bottom: 24px;
		font-size: 22px;
		font-weight: bold;
		color: $blue;
	}
	.p-refrigerant-list__tile {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -12px;
		padding: 0;
		list-style: none;
		& > li {
			min-width: 33.3333%;
			width: 33.3333%;
			margin-bottom: 64px;
			padding-left: 12px;
			padding-right: 12px;
			@media(max-width: 991px){
				min-width: 50%;
				width: 50%;
				margin-bottom: 48px;
			}
			@media(max-width: 575px){
				min-width: 100%;
				width: 100%;
			}
		}
		.tile-item {
			position: relative;
			.tile-item__title {
				margin-bottom: 8px;
				padding: 0;
				font-size: 32px;
				font-weight: 600;
				color: $blue;
				@media(max-width: 1199px){
					font-size: 24px;
				}
			}
			.tile-item__image {
				position: relative;
				overflow: hidden;
				padding-top: 100%;
				img {
					position: absolute; top: 0; left: 0;
					display: block;
					width: 100%;
					//@include transform(translateX(-50%) translateY(-50%));
					@include transition();
					&:hover {
						@include transform(scale(1.15));
					}
				}
			}
			.tile-item__btn {
				margin-top: 8px;
				text-align: center;
				.btn {
					position: static;
					min-width: 180px;
					&:before {
						content: '';
						position: absolute; top: 0; right: 0; bottom: 0; left: 0;
						z-index: 2;
						display: block;
					}
				}
			}
			&:hover {
				.tile-item__title {
					color: $blue;
				}
				.tile-item__image {
					img {
						@include transform(scale(1.1));
					}
				}
			}
		}
	}
}
.p-refrigerant-license {
	max-width: 760px;
	margin: 0 auto;
	.license__head {
		margin-bottom: 32px;
		color: #7e93b2;
		h1 {
			margin: 0 0 8px;
			font-size: 28px;
			font-weight: bold;
			line-height: 1.25;
			color: $color_dark;
		}
		&._blue {
			h1 {
				color: $blue;
			}
		}
	}
	.license__body {
		.form-group {
			& + .form-group {
				margin-top: 32px;
			}
		}
		.form-control.lg {
			padding: 0 16px;
			height: 40px;
		}
	}
	.license__form {
		background: #f5f7f9;
		margin-left: -24px;
		margin-right: -24px;
		padding: 24px;
		@media(max-width: 767px){
			margin-left: -12px;
			margin-right: -12px;
			padding: 12px;
		}
		.form-label {
			&.has-error {
				color: $red;
			}
		}
		.list-unstyled {
			& > li {
				&:not(:first-child){
					border-top: 1px solid #d7d7d7;
					margin-top: 12px;
					padding-top: 12px;
				}
			}
		}
	}
	.license__sign {}
}

.licenseBox {
	.box-sign {}
	.box-signed {
		display: none;
	}
	&.in {
		.box-sign {
			display: none;
		}
		.box-signed {
			display: block;
		}
	}
}

.p-refrigerant-license-sign {
	&.sign-area {
		padding: 16px 16px 16px 0;
		.sign-area__head {
			position: relative;
			overflow: hidden;
			margin-bottom: 4px;
		}
		.sign-area__body {
			background: #f8f8f8;
			border: 2px dashed #dde4ec;
			position: relative;
			overflow: hidden;
			img {
				display: block;
				max-width: 100%;
			}
		}
		.sign-area__description {
			margin-top: 4px;
		}
		&.has-error {
			.sign-area__head {
				color: $red;
			}
			.sign-area__body {
				border-color: $red;
			}
			.help-block.hidden {
				display: block !important;
				color: $red;
			}
		}
	}
}

.freon-gas,
.v2--freon-gas {
	.freon-gas__head {
		background-color: #cde3f4;
		background-image: url(../images/examples/freon-gas-bg001.jpg);
	}
	&.r134a125 {
		.freon-gas__head {
			background-color: #dcdddf;
			background-image: url(../images/examples/freon-gas-bg002.jpg);
		}
	}
	&.r1234yf {
		.freon-gas__head {
			background-color: #f2e6f0;
			background-image: url(../images/examples/freon-gas-bg003.jpg);
		}
	}
	&.r404a {
		.freon-gas__head {
			background-color: #f7ece6;
			background-image: url(../images/examples/freon-gas-bg004.jpg);
		}
	}
	&.r410a {
		.freon-gas__head {
			background-color: #bfe7e9;
			background-image: url(../images/examples/freon-gas-bg005.jpg);
		}
	}
	&.r32 {
		.freon-gas__head {
			background-color: #f1efd8;
			background-image: url(../images/examples/freon-gas-bg006.jpg);
		}
	}
	&.r407c {
		.freon-gas__head {
			background-color: #DCDDFF;
			background-image: url(../images/examples/freon-gas-bg007.jpg);
		}
	}
}

//widgets
.w-freon-informer {
	margin-bottom: 40px;
	.alert {
		border: 0;
		padding: 8px 16px;
		font-weight: bold;
		&.alert-success {
			background: #b8e986;
		}
		&.alert-warning {
			background: #ffefc1;
		}
		&.alert-danger {
			background: #fccaca;
		}
	}
}