@import "mixin_all.scss";
header,
.region-breadcrumb{
	display: none;
}
.page-content,
.layout-container{
	margin: 0 !important;
}
.ui-dialog{
	font: $FontSize $FontName, arial, sans-serif;
    color: $Color0;
}
.nowrap{
	white-space: nowrap;
}
img,
svg{
	vertical-align: middle;
}
#drupal-modal,
#basket_admin_page{
	*{
		box-sizing: border-box;
	}
	.cke *{
		box-sizing: initial;
	}
	a{
		color: $Color4;
		text-decoration: none;
		@include trans;
		vertical-align: middle;
		&.tabledrag-handle *,
		&.tabledrag-handle{
			box-sizing: initial;
		}
		&:focus{
			outline: none;
		}
	}
	details{
		ul{
			padding: 0 0 0 15px;
		}
		border-color: $Color3;
		summary{
			color: $Color4;
		}
	}
    overflow: hidden;
    overflow-y: auto;
    font: $FontSize $FontName, arial, sans-serif;
    color: $Color4;
    padding: 0 0 0 270px;
	.basket_toolbar{
    	background: $Color1;
    	background-size: auto 100%;
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		width: 270px;
		overflow-y: auto;
		color: #fff;
		.basket_menu{
			.level_0{
				margin: 0 0 40px;
				&:last-child{
					margin: 0 0 20px;
				}
			}
			padding: 20px 0;
			margin: 0;
			.group_title{
				text-transform: uppercase;
				padding: 5px 20px;
				line-height: 24px;
				font-size: 14px;
				font-weight: bold;
			}
			ul{
				margin: 0;
				padding: 0;
				ul{
					a{
						padding: 3px 20px 3px 40px;
						font-size: 14px;
    					line-height: 18px;
						&:before{
							content: '• ';
						}
						&.is-active,
						&:hover{
							background: transparent;
							color: #ffffff;
							background: $Color3;
						}
					}
				}
			}
			a{
				color: #fff;
				padding: 8px 20px;
				font-size: 16px;
				line-height: 18px;
				display: flex;
				margin: 0 0 1px;
				.count{
					color: #fff;
					background: $Color2;
					border-radius: 10px;
					float: right;
					font-size: 13px;
					padding: 0 8px;
					height: 20px;
					line-height: 20px;
					margin-left: auto;
				}
				.ico{
					width: 10px;
					flex-shrink: 0;
				}
				&.is-active,
				&:hover{
					background: $Color2;
					position: relative;
					.count{
						background: #fff;
						color: $Color2;
					}
				}
			}
			.active-trail{
				& > a{
					background: $Color2;
					position: relative;
					.count{
						background: #fff;
						color: $Color2;
					}
				}
			}
		}
		.user_info{
			height: 70px;
			background: $Color2;
			padding: 0 20px;
			.ava{
				float: left;
				width: 50px;
				height: 50px;
				margin: 10px 20px 0 0;
				overflow: hidden;
				border-radius: 50%;
				background-position: center;
    			background-size: cover;
			}
			.info{
				overflow: hidden;
				padding: 10px 0 10px 0;
				.name{
					font-size: 16px;
					line-height: 24px;
				}
				.role{
					color: #CFCFCF;
					font-size: 14px;
					line-height: 20px;
				}
			}
		}
		.logo_wrap{
			text-align: center;
			margin: 0 auto 30px;
		}
	}
	.sub_pages_list{
	    display: flex;
		flex-wrap: wrap;
		margin: 0 -10px;
		.item{
			width: 25%;
			padding: 0 10px;
			a{
				background: #fff;
				height: 90px;
				text-align: center;
				display: inline-block;
				width: 100%;
				box-shadow: $BoxShadow;
				border-radius: 5px;
				padding: 20px;
				margin: 0 0 20px;
				font-size: 18px;
				font-weight: bold;
				display: table;
				position: relative;
				overflow: hidden;
				span{
					display: table-cell;
					vertical-align: middle;
				}
				&:after{
					content: '';
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					height: 0;
					@include trans;
				}
				&:hover:after{
					height: 5px;
					background: $Color2;
				}
				&.disabled{
					opacity: 0.5;
					box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
					cursor: help;
				}
			}
		}
	}
	.views-empty{
		text-align: center;
		padding: 30px;
		font-size: 20px;
	}
	.add_block_list{
		display: flex;
		margin: 0 0 30px;
		background: #fff;
		box-shadow: $BoxShadow;
		border-radius: 5px;
		.item{
			width: 25%;
			text-align: center;
			display: flex;
			min-height: 50px;
			flex: 1 1 auto;
			a{
				display: flex;
				vertical-align: middle;
				line-height: 20px;
				padding: 0 20px;
				border-bottom: 2px solid transparent;
				flex: 1;
				align-items: center;
				justify-content: center;
				path{
					fill: #333333;
				}
				.ico{
					margin: 0 5px 0 0;
				}
				&:hover{
					border-color: $Color2;
					color: $Color2;
					path{
						fill: $Color2;
					}
				}
			}
			& + .item{
				border-left: 1px solid #E6F0F5;
			}
		}
	}
	.stat_block{
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10px 30px;
		.item{
			width: 25%;
			padding: 0 10px;
			.item_wrap{
				background: #fff;
				box-shadow: $BoxShadow;
				border-radius: 5px;
				overflow: hidden;
				.title{
					color: #fff;
					height: 30px;
					padding: 0 30px 0 15px;
					line-height: 30px;
					background: $Color2;
					position: relative;
					&:after{
						content: '';
						width: 13px;
						height: 13px;
						position: absolute;
						right: 13px;
						top: 8px;
						background: url(misc/images/arr.svg);
					}
				}
			}
		}
	}
	a.target_link,
	a.token-dialog{
		color: $Color2;
	    font-size: 14px;
	    text-decoration: underline;
	    &:hover{
	    	text-decoration: none;
	    }
	}
	.template_item{
		padding: 10px 10px 0;
		.link_wrap{
			a{
				color: $Color2;
				font-weight: bold;
				text-decoration: underline;
				&:before{
					content: '+';
					padding: 0 5px 0 0;
				}
				&:hover{
					text-decoration: none;
				}
			}
		}
		&.is-active{
			margin: 10px 0 0;
			border: 1px solid $Color2;
			border-radius: 5px;
			.link_wrap{
				margin: 0 0 10px;
				a{
					text-decoration: none;
					color: $Color4;
					&:before{
						content: '-';
					}
				}
			}
		}
		.language_switch{
			.form-item{
				display: inline-block;
				label{
					border: 1px solid $Color2;
					border-radius: 5px;
					padding: 0 5px;
					&:before,
					&:after{
						display: none;
					}
					&:hover{
						color: #fff;
						background: $Color2;
					}
				}
				input:checked ~ label{
					color: #fff;
					background: $Color2;
				}
			}
		}
	}
	.basket_admin_orders_stat_block{
		position: relative;
		.items{
			display: flex;
		    flex-wrap: wrap;
		    margin: 0 -10px 30px;
		    .stat_row{
		    	width: 25%;
	    		padding: 0 10px;
	    		.wrap_row{
	    			background: #fff;
	    			border-radius: 5px;
	    			height: 98px;
	    			overflow: hidden;
	    			box-shadow: $BoxShadow;
	    			cursor: pointer;
	    			.title{
	    				position: relative;
	    				color: #fff;
	    				font-size: 14px;
	    				list-style: 20px;
	    				padding: 5px 30px 5px 15px;
	    				&:after{
	    					content: '';
	    					position: absolute;
	    					right: 0;
	    					top: 0;
	    					bottom: 0;
	    					width: 25px;
	    					background: url(misc/images/arrow_white.svg) no-repeat center center transparent;
	    				}
	    			}
	    			.wrap{
	    				padding: 20px 15px 0;
		    			.text{
		    				font-size: 28px;
		    				float: right;
		    			}
		    			.ico{
		    				float: left;
		    			}
	    			}
	    		}
	    		&.not_click{
	    			.wrap_row{
	    				cursor: default;
	    			}
	    			.title:after{
	    				display: none;
	    			}
	    		}
		    }
		}
	    .field_settings_link{
	    	right: 5px;
    		top: -15px;
	    }
	    &:hover .field_settings_link{
	    	opacity: 1;
	    }
	}
	.basket_caption_block{
		padding: 20px 0;
		overflow: hidden;
		.items{
			float: left;
			width: 80%;
			margin: -10px 0 0;
			a{
				float: left;
				margin: 10px 10px 0 0;
				color: #fff;
				&:hover,
				&.is-active{
					background: $Color3;
					color: #fff;
					font-weight: 600;
				}
			}
		}
		a{
			height: 30px;
			line-height: 30px;
			padding: 0 15px;
			font-size: 12px;
			border-radius: 5px;
			background: $Color8;
			display: inline-block;
			position: relative;
		}
		.export_link{
			float: right;
			font-size: 14px;
			background: transparent;
		}
		.field_settings_link{
			position: inherit;
		}
		&:hover{
			.field_settings_link{
				opacity: 1;
			}
		}
		.combo_field{
			border-bottom: 1px solid $Color8;
			font-size: 12px;
		    margin: 0 0 10px;
			padding: 0 0 5px;
			a{
			    height: auto;
			    background: none;
			    line-height: inherit;
			    padding: 0;
			    text-transform: lowercase;
			    color: $Color2;
			    font-weight: bold;
			    &:hover{
			    	text-decoration: underline;
			    }
			}
		}
	}
}
.info-help{
	cursor: pointer;
	path{
		fill: $Color5;
	}
	&:hover path{
		fill: $Color2;
	}
}
.info-help-content{
	display: none;
}
.tooltipster-base{
	z-index: 999999 !important;
}
#order_info_block{
	border: 1px solid $Color5;
	margin: 0 0 15px;
	th{
		padding-bottom: 0;
	}
	td{
		padding-bottom: 5px;
		padding-top: 5px;
	}
}
.mfp-content,
#drupal-modal,
.menu_header,
#basket_page_content_ajax{
	padding: 30px;
	input.form-email,
	input.form-text,
	input.form-date,
	input.form-time,
	input.form-url,
	.form-textarea,
	input.form-number,
	.form-select{
		height: 42px;
		line-height: 20px;
		color: $Color4;
		border: 1px solid $Color5;
		border-radius: 5px;
		box-shadow: $BoxShadow;
		width: 100%;
		padding: 10px 30px 10px 10px;
		background: #fff;
		&:focus{
			border-color: $Color1;
		}
		&.ms-parent{
			padding: 0;
			min-width: 80px;
			background: transparent;
			.ms-choice{
				border: none;
				padding: 10px 30px 10px 10px;
				height: 100%;
				div{
					height: 100%;
					background: url(misc/images/select_arrow.svg) no-repeat left center;
					width: 25px;
				}
				span{
					display: inline-block;
					color: $Color4;
					font-size: 14px;
					padding: 7px 30px 7px 10px;
				}
			}
			.ms-drop{
				border: $Color11;
				box-shadow: $BoxShadow;
				li + li{
					margin: 5px 0 0;
				}
				label{
					font-size: 14px;
					font-weight: inherit;
					padding: 0 0 0 24px;
					position: relative;
					line-height: 20px;
					cursor: pointer;
					&:after{
					    content: '';
					    position: absolute;
					    left: 0;
					    top: 0;
					    width: 18px;
					    height: 18px;
					    border-radius: 2px;
					    border: 1px solid $Color8;
					}
				}
				.selected label:before {
					content: '';
				    background: url(misc/images/is_checked.svg) no-repeat center center $Color3;
    				border-color: $Color3;
    				position: absolute;
				    left: 0;
				    top: 0;
				    width: 18px;
				    height: 18px;
				    border-radius: 2px;
					border: 1px solid $Color8;
				}
			}
		}
		&.inline_twig{
			background: $Color0;
			color: #fff;
		}
		&.color_input{
			width: 36px;
		}
	}
	input.form-email,
	input.form-text,
	input.form-date,
	input.form-time,
	.form-textarea,
	input.form-number{
		padding-right: 10px;
	}
	.form-textarea{
		height: auto;
	}
	.form-select{
		background: #fff;
		background: url(misc/images/select_arrow.svg) no-repeat calc(100% - 15px) center #fff;
		min-width: 60px;
	}
	&.ui-dialog-content{
		padding: 15px;
	}
	input.form-date{
		background: url(misc/images/calendar.svg) no-repeat calc(100% - 15px) center #fff;
		&:not([disabled]):focus,
		&:not([disabled]):hover{
			background: #fff;
		}
		&[disabled]{
			background-color: $Color11;
		}
	}
	.form-type--boolean{
		margin-left: 0;
	}
}
.mfp-content,
.ui-dialog,
form{
	.button,
	.form-submit{
		@include btn;
		&.preview{
			background-image: url(misc/images/eye.svg);
			background-repeat: no-repeat;
			background-position: 8px center;
		}
	}
	&.hide_submit{
		.form-submit{
			display: none;
		}
	}
}
#export_finish{
	.b_content{
		text-align: center;
		a{
			vertical-align: inherit;
			color: $Color2;
			text-decoration: underline;
			&.download{
				@include btn;
				margin: 10px 0 0;
				text-decoration: none;
			}
			&:hover{
				text-decoration: none;
			}
		}
	}
}
.basket_table_wrap{
	margin: 0 0 30px;
	.b_title{
		font-size: 16px;
		line-height: 24px;
		font-weight: bold;
		padding: 0 0 15px;
		a{
		    width: auto;
		    background: #fff;
		    margin: 0 0 0 10px;
		    &:hover{
		    	background: $Color2;
		    	color: #fff !important;
		    }
		}
	}
	.b_content{
		background: #fff;
		border-radius: 5px;
		box-shadow: $BoxShadow;
		padding: 15px;
		.basket_color_info{
			padding: 10px;
			.term_color{
				color: inherit !important;
			}
		}
		&:after {
			content: '';
			display: table;
			clear: both;
		}
	}
	.tabledrag-toggle-weight-wrapper{
		display: none;
	}
	table{
		margin: 0;
	    border-spacing: 3px;
		border-collapse: separate;
		font-size: $TabseTextSize;
		line-height: $TabseTextHeight;
		tr{
			border: none;
			th{
				background: none;
				text-transform: inherit;
				border: none;
				color: $Color4;
				font-weight: bold;
				padding: 10px;
				a{
					color: $Color4 !important;
					&:after{
						display: none;
					}
					.sort_arrow{
						margin: 0 0 0 10px;
						position: relative;
						top: 3px;
						float: right;
						path{
							fill-opacity: 0.3;
						}
						&.asc path:last-child{
							fill-opacity: 1;
						}
						&.desc path:first-child{
							fill-opacity: 1;
						}
					}
					&:hover:after{
						display: block;
					}
				}
			}
			td{
				background: $Color6;
				padding: 10px;
				position: relative;
				&.views-field-status{
					padding-right: 20px;
				}
				&.td_ico{
					svg{
						margin: 0 0 0 3px;
					}
				}
				&.not_padding{
					padding: 0;
				}
				&.tabledrag-handle-td{
					width: 20px;
				}
				textarea{
					border: 1px solid $Color11;
				}
				.translate_textarea{
					padding: 0 30px 0 0;
					.translate_link{
						position: absolute;
						right: 15px;
						top: 50%;
						margin: -13px 0 0;
						width: 30px;
						text-align: left;
						width: 20px;
						height: 20px;
					}
				}
				.term_change_select{
					webkit-aperance: none;
					position: absolute;
					left: 0;
					width: 100%;
					top: 0;
					height: 100% !important;
					border: none !important;
					background: transparent !important;
					text-indent: -9999px;
					font-size: 0; 
					z-index: 5;
					& + .field-suffix{
						&:before,
						&:after{
							content: '';
							position: absolute;
							z-index: 1;
							width: 17px;
							height: 100%;
							right: 0;
							top: 0;
							background: $Color5;
							opacity: 0.1;
						}
						&:after{
							background: url(misc/images/select_arr.svg) no-repeat center center transparent;
							opacity: 1;
						}
					}
					option{
						font-size: 14px;
					}
				}
				.form-item{
					margin: 0;
					padding: 0;
				}
				.form-checkboxes{
					.form-item + .form-item{
						margin: 2px 0 0;
					}
				}
				.edit_order_link{
					display: block;
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
					z-index: 5;
				}
				&.td_settings_row{
					width: 20px;
				}
				.settings_row{
					&:hover{
						path{
							fill: $Color2;
						}
					}
				}
				&.not_specified{
					color: #ccc;
					font-style: italic;
				}
				&.items_td_delete{
					width: 20px;
					white-space: nowrap;
					input{
						text-indent: -9999px;
						width: 36px;
						height: 36px;
						padding: 0;
						background-image: url(misc/images/delete_trash.svg);
						background-position: center center;
						background-repeat: no-repeat;
						margin: 0;
						&.button--cancel{
							background-image: url(misc/images/cancel.svg);
						}
					}
				}
			}
			&:hover{
				textarea{
					color: #fff;
					background: transparent;
				}
				.td_ico{
					path{
						fill: #fff;
					}
				}
			}
		}
		tbody tr:nth-child(2n) td{
			background: none;
		}
		tbody tr:hover td:not(.not_hover, .views-field-operations){
			background: $Color7;
			color: #fff;
			.term_color{
				text-shadow: 0 0 1px #333;
				.color_ico{
					box-shadow: 0 0 1px #333;
				}
			}
			a{
				color: #fff !important;
			}
			path{
				fill: #fff;
			}
			.button--link{
				background: $Color2;
			}
			&.translate_textarea{
				path{
					fill: $Color13;
				}
			}
		}
	}
	code{
		border: 1px solid $Color11;
		background: #333;
		padding: 10px;
		display: inline-block;
		width: 100%;
		color: #fff;
		border-radius: 5px;
		box-shadow: $BoxShadow;
		&:hover{
			border-color: $Color12;
		}
		.params{
			color: #d84811;
		}
	}
	.basket_getError_page{
	    text-align: center;
	    font-size: 20px;
	    max-width: 960px;
	    margin: 0 auto;
	    padding: 20px;
		.code{
			font-size: 100px;
    		font-weight: bold;
    		color: $Color2;
		}
		.small_text{
			font-size: 14px;
    		padding-top: 20px;
    		color: red;
    		font-weight: bold;
		}
	}
	.order_tabs{
		overflow: hidden;
		margin: 0 0 20px;
		border-bottom: 1px solid $Color1;
		a{
			float: left;
			height: 30px;
    		line-height: 30px;
    		padding: 0 10px;
    		font-size: 12px;
    		border-radius: 5px 5px 0 0;
    		background: $Color8;
    		& ~ a{
    			margin: 0 0 0 10px;
    		}
    		&.is-active,
    		&:hover{
    			background: $Color3;
				color: #fff !important;
    		}
		}
	}
	&.trash_page{
		.view-filters{
			display: none;
		}
		.basket_caption_block{
			padding-top: 0 !important;
		}
	}
}
.views-exposed-form{
	position: relative;
	.form--inline{
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10px;
	}
	.form-item,
	.form-actions{
		width: 25%;
		display: inline-block;
		clear: none;
		flex: 1 1 auto;
		padding: 0 15px 15px;
		float: none;
		margin: 0 !important;
		label{
			line-height: 20px;
			font-weight: bold;
		}
		.form-submit{
			margin: 20px 0 0;
			min-width: 150px;
		}
	}
	.items_combine{
		display: flex;
		align-items: center;
		.form-item{
			padding: 0;
			&.arrow{
				flex-grow: 0;
			    flex-shrink: 1;
			    margin: 20px 5px 0 !important;
			    width: 8px;
			    background: $Color8;
			    height: 1px;
			}
		}
	}
	&:hover{
		.field_settings_link{
			opacity: 1;
		}
	}
}
.field_settings_link{
	position: absolute;
	right: -5px;
	top: -10px;
	opacity: 0;
	svg{
		width: 10px;
		height: 10px;
	}
}
.tooltipster_content{
	display: none;
}
.term_color{
	font-weight: bold;
	.color_ico{
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		margin: 0 5px 0 0;
		position: relative;
		top: -1px;
	}
}
.button--link{
	border: 1px solid $Color8;
	display: inline-block;
    border-radius: 5px;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    width: 100%;
    box-sizing: border-box;
    color: $Color4;
    text-decoration: none;
    font-size: 12px;
    &.target{
    	width: auto;
    }
    &.small{
    	height: 20px;
    	padding: 0 5px;
    	line-height: 20px;
    }
    @include trans;
    & ~ .button--link{
    	margin: 5px 0 0;
    }
    .ico{
    	display: none;
    }
    &:hover{
    	color: #fff !important;
    	background: $Color2;
    	border-color: $Color2;
    	text-decoration: none;
    	svg *{
    		fill: #fff;
    	}
    }
}
.settings_list_block{
	font-size: 12px;
	svg{
		width: 18px;
	}
}
.auto_width.form-item{
	display: flex;
	align-items: center;
	input.form-number{
		flex: 1;
	}
	.field-suffix{
		margin: 0 0 0 5px;
	}
}
.pager{
	clear: both;
	padding: 20px 0;
	ul{
		float: right;
		border: 1px solid $Color8;
		border-radius: 3px;
		overflow: hidden;
		li{
			border-left: 1px solid $Color8;
			float: left;
			margin: 0 0 0 -1px;
			padding: 0;
			&.pager__item--last,
			&.pager__item--first{
				display: none;
			}
			&.pager__item--ellipsis,
			a{
				display: inline-block;
				line-height: 34px;
				padding: 0 14px;
				color: $Color4;
				height: 34px;
				font-size: 14px;
				font-weight: normal;
				min-width: 38px;
			}
			&.pager__item--next,
			&.pager__item--previous{
				a{
					text-indent: -9999px;
					background: url(misc/images/pager.svg) no-repeat center center transparent;
					width: 38px;
					&:hover{
						background-image: url(misc/images/pager_white.svg);
					}
				}
			}
			&.pager__item--previous a{
				@include flip;
			}
			&:hover,
			&.is-active{
				a{
					color: #fff !important;
					background-color: $Color2;
					border: none;
				}
			}
		}
	}
	&:after {
		content: '';
		display: table;
		clear: both;
	}
}
#table_excel{
	.table_excel_wrap{
		overflow-x: auto;
		padding-bottom: 5px;
	}
	table{
		border-collapse: collapse;
		width: 8000px;
		th,
		td{
			width: 100px;
			border: 1px solid #ccc;
			padding: 0;
			position: relative;
			text-align: center;
			color: #333;
			input{
				position: absolute;
			    left: 0;
			    top: 0;
			    right: 0;
			    bottom: 0;
			    border-radius: 0 !important;
			    box-shadow: none !important;
			    padding: 2px !important;
			    font-weight: bold;
			}
			textarea{
				border-radius: 0 !important;
			    box-shadow: none !important;
			    padding: 2px !important;
			    background: #fff;
			    resize: none;
			}
			&.td_num{
				background: #e4e4e4;
			}
		}
		th{
			background: #e4e4e4;
			padding: 2px;
		}
	}
}
body{
  background: $Color0 !important;
	&.toolbar-vertical.toolbar-tray-open{
		#basket_admin_page{
			.basket_toolbar{
				left: 15rem;
			}
		}
	}
	*{
		outline: none;
	}
	a{
		&:focus{
			text-decoration: none;
		}
	}
}
.basket_header{
	background: #fff;
	height: 70px;
	box-shadow: $BoxShadow;
	.breadcrumbs_wrap{
		float: left;
		padding: 20px 0 20px 20px;
		line-height: 30px;
		font-weight: bold;
		font-size: 18px;
		.arrow{
			background: url(misc/images/arrow.svg) no-repeat center center transparent;
			width: 6px;
			display: inline-block;
			margin: 0 10px;
			height: 10px;
		}
		#CreateLink{
			border: 1px solid $Color2;
			color: $Color2;
			border-radius: 5px;
			padding: 5px;
			font-size: 14px;
			margin: 0 0 0 10px;
			&:hover{
				color: #fff;
				background: $Color2;
			}
		}
	}
	.menu_header{
		float: right;
		padding: 0;
		margin: 0;
		.item{
			float: left;
			list-style: none;
			border-left: 1px solid $Color5;
			a{
				display: block;
				padding: 0 25px;
				height: 70px;
				line-height: 70px;
				font-size: 16px;
				.ico{
				    margin: 0 3px 0 0;
				}
				&:hover{
					background: $Color5;
					color: $Color4 !important;
					svg path{
						fill: $Color4;
					}
				}
			}
			.form-item{
				height: 70px;
				padding: 0 25px;
				margin: 0;
				align-items: center;
    			justify-content: center;
    			display: flex;
			}
		}
	}
}
.ajax-progress{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.4);
    .throbber{
	    background: none;
    	display: block;
	    position: relative;
	    left: 50%;
	    top: 50%;
	    width: 150px;
	    height: 150px;
	    margin: -75px 0 0 -75px;
	    border-radius: 50%;
	    border: 3px solid transparent;
	    border-top-color: #ffe30b;
	    -webkit-animation: spin 2s linear infinite;
	    animation: spin 2s linear infinite;
	    &:before{
	    	content: "";
		    position: absolute;
		    top: 5px;
		    left: 5px;
		    right: 5px;
		    bottom: 5px;
		    border-radius: 50%;
		    border: 3px solid transparent;
		    border-top-color: #50ab09;
		    -webkit-animation: spin 3s linear infinite;
		    animation: spin 3s linear infinite;
	    }
	    &:after{
	    	content: "";
		    position: absolute;
		    top: 15px;
		    left: 15px;
		    right: 15px;
		    bottom: 15px;
		    border-radius: 50%;
		    border: 3px solid transparent;
		    border-top-color: #333;
		    -webkit-animation: spin 1.5s linear infinite;
		    animation: spin 1.5s linear infinite;
	    }
    }
}
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
input[type="radio"],
input[type="checkbox"]{
	display: none;
	& + label{
		position: relative;
		display: inline-block !important;
		padding: 0 0 0 24px;
		line-height: 20px;
		margin: 0;
		&:after{
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 18px;
			height: 18px;
			border-radius: 2px;
			border: 1px solid $Color8;
		}
	}
	&:checked ~ label:after{
		background: url('misc/images/is_checked.svg') no-repeat center center $Color3;
		border-color: $Color3;
	}
	&.not_label ~ label{
		text-indent: -9999px;
		width: 18px;
		height: 18px;
		margin: 0;
	}
}
.views-field-node-bulk-form input[type="checkbox"]{
	display: inherit;
}
@media screen and (min-width: 1200px) {
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    ::-webkit-scrollbar-track {
        background: $Color3;
    }
    ::-webkit-scrollbar-thumb {
        background: $Color2;
        cursor: pointer;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: $Color1;
    }
}
.mfp-content{
	background: #fff;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: $BoxShadow;
	max-width: 1200px;
	min-width: 320px;
	width: auto !important;
	padding: 0 20px 15px;
	.magnific-popup__title,
	.magnific-content-title{
		background: $Color3;
	    color: $Color0;
	    font-size: 20px;
	    font-weight: bold;
	    padding: 20px 40px 20px 20px;
	    margin: 0 -20px;
	}
}
.mfp-close-btn-in .mfp-close{
	color: #fff;
}
.basket-toolbar-item{
	background: $Color3;
}
.basket_price{
	&.old{
		text-decoration: line-through;
	}
	&.red{
		color: red;
	}
}
.basket_count{
	.count{
		margin: 0 20px 0 0;
	}
}
.basket_area_buttons{
	margin: 15px 5px 0;
	display: flex;
	a{
		&:not(.not_white){
			svg *{
				fill: #fff;
			}
		}
		position: relative;
		width: 36px;
		height: 36px;
		border-radius: 5px;
		display: inline-block;
		border: 1px solid $Color8;
		margin: 0 10px 0 0;
		text-align: center;
		line-height: 34px;
		@include trans;
		overflow: hidden;
		.title_hover{
			position: absolute;
			left: 0;
			bottom: 40px;
			background: $Color2;
			color: #fff;
			border-radius: 5px 5px 5px 0;
			white-space: nowrap;
			padding: 3px 15px;
			@include trans;
			opacity: 0;
		}
		&:hover{
			overflow: inherit;
			box-shadow: 0 0 5px #000;
			border-color: #333333;
			.title_hover{
				opacity: 1;
			}
		}
	}
	.all_info{
	    align-items: center;
	    display: flex;
	    margin-left: auto;
	    .on{
	    	color: green;
	    }
	}
}
.title_img_wrap{
	position: relative;
	.img_hover_wrap{
		position: absolute;
		left: 0;
		bottom: 100%;
		background: #fff;
		padding: 10px;
		width: 100px;
    	height: 100px;
    	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
    	border-radius: 5px;
    	border: 1px solid $Color8;
    	display: none;
    	.img{
    		display: table-cell;
    		vertical-align: middle;
    	}
	}
	&:hover{
		.img_hover_wrap{
    		display: table;
		}
	}
}
.help_content{
	padding: 20px;
    font-size: 16px;
}
.ms-drop{
	min-width: 180px;
}
.ms-choice{
	min-width: 100px;
}
.node-form{
	tr:hover{
		td{
			background: inherit !important;
    		color: inherit !important;
		}
	}
}
@media screen and (max-width: 1600px) {
	.auto_width.count_td {
		max-width: 120px;
	}
}
.ui-widget.ui-autocomplete{
	z-index: 99999;
}