

/* Start:/bitrix/templates/progermetik/components/stanwork/sw.detail/catalog/style.css?17769057043573*/
.color-form img {
		margin-top:5px;
		margin-right: 18px;
	}
	.color-form > div {
		display: inline-block;
		vertical-align: top;
	}
	.color-form button, .color-form .button-select {
		/*width:136px;*/
		width:220px;
		height:30px;
		border:1px solid #e1e1e1;
		text-align: left;
		background-color: transparent;
		position: relative;
		cursor: pointer;
		font-size:14px;
		line-height:20px;
		font-family: Arial, sans-serif;
		padding: 0 8px;
	}
	.color-form button:hover, .color-form .button-select:hover {
		padding:0 8px;
	}
	.color-form button::after, .color-form .button-select:after {
		content: "";
		position: absolute;
		border: 4px solid transparent;
		border-top:5px solid #e1e1e1;
		top:calc(50% - 2px);
		right:10px;
	}
	.color-form .button-select {
		width: 80px;
		height:20px;
		padding:5px 10px;
		margin-top:10px;
		font-size:14px;
		line-height:20px;
		font-family: Arial, sans-serif;
	}
	.color-form .button-select:hover {
		padding:5px 10px;
	}
	.color-form .select-items {
		width: 100px;
		padding:5px;
		border:1px solid #e1e1e1;
		margin: 0;
		padding: 0;
		margin-top:-1px;
		font-size:14px;
		line-height:20px;
		font-family: Arial, sans-serif;
	}
	.color-form .select-items li {
		height: 20px;
		display: block;
		margin:0;
		padding: 5px 10px;
		cursor: pointer;
	}
	.color-form .select-items li:hover {
		background-color: #cccccc;
	}
	.color-form .hidden {
		display: none;
	}


	.popupcolor {
		z-index:9999;
		display: none;
		top:200px;
		left:0;
		right:0;
		margin: auto;
		padding-top:23px;
		text-align: center;
		width:955px;
		background-color: white;
		border:1px solid #cccccc;
		position: absolute;
		box-sizing: content-box;
	}
	.popupcolor .popup-button {
		width:140px;
		height:20px;
		color: black;
		border: none;
		background-color: #6cc049;
		border-radius: 2px;
		margin: 10px 0;
		padding:10px 0;
		display: inline-block;
		cursor: pointer;
		font-size:14px;
		line-height:20px;
		font-family: Arial, sans-serif;
	}
	.popupcolor .popup-button:hover {
		background-color: #3bab0c;
		color:white;
	}
	.popupcolor .color-item {
		width:158px;
		height:116px;
		padding: 7px 9px;
		text-align: center;
		display:inline-block;
		vertical-align: top;
		cursor: pointer;
		font-size:14px;
		font-family: Arial, sans-serif;
		line-height:1.2em;
	}
	.popupcolor .color-item img {
		margin-bottom: 12px;
		width:100%;
		height: 47px;
	}
	.popupcolor .color-container {
		margin:10px auto;
		width:95%;
	}
	.popupcolor .color-container::after {
		display: block;
		clear: both;
		content: "";
	}
	.popupcolor .color-item.active {
		margin:-2px;
		border: 2px solid #6cc049;
	}
	.popup-close {
		width: 18px;
		height: 18px;
		background-image: url("/bitrix/templates/progermetik/images/catalog/close-ico.png");
		position: absolute;
		right:10px;
		top:10px;
		cursor: pointer;
	}
	.popupcolor .target-color {
		width:94%;
		height:300px;
		margin: 0 auto;
	}
	.popupcolor .target-color img {
		width:100%;
		height:100%;
	}

	@media (max-width:980px) {
		.target-color {
			display: none;
		}
		.popupcolor {
			width: 600px;
		}
	}
	@media (max-width:625px) {
		.popupcolor {
			max-width: 400px;
			width:100%;
		}
		.color-container {
			max-width:360px;
		}
		.popupcolor .color-item {
			display:inline-block;
			width: calc(50% - 21px);
			vertical-align: top;
			height:auto;
		}
		.popupcolor .color-item img {
			width: 100%;
		}
	}

#fon_popup_background{
	width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.42);
    z-index: 10;
    display: none;
}
/* End */
/* /bitrix/templates/progermetik/components/stanwork/sw.detail/catalog/style.css?17769057043573 */
