.progress__campaign{
	position: relative;
	& .progress{
		position: absolute;
		left: 0px;
		top:-15px;
		width: 100%;
		height: 4px;
		background-color:#E5E7EB;
		left: -24px;
		width: calc(100% + 48px);
		& .active{
			position: absolute;
			left: 0px;
			top:0px;
			height: 100%;
			background:linear-gradient(to right , rgba(28,69,194,0) , rgb(28,69,194))
		}
	}
	& ul{
		padding:0px;
		list-style-type: none;
		margin:0px;
		display: flex;
		align-items:center;
		justify-content:space-between;
		margin-top: -25px;
		&>li{

			font-size: 14px;
			line-height: 150%;
			font-weight: 500;
			color:#9CA3AF;
			&.current , &.filled{
				&:before{
					content:none!important;
				}
				color:#111928;
			}
		}
	}
}
.campaign__box{
	& .controls{
		display: flex;
		justify-content:space-between;
		align-items:center;
		margin-top: 32px;
		& .btns{
			display: flex;
			align-items:center;
			justify-content:flex-end;
			&>.outline-btn{
				min-width: 150px;
				min-height: 48px;
				font-size: 16px;
				line-height: 22px;
				align-items:center;
				justify-content:center;
				margin-right: 16px;
			}
		}
		& .regular-btn{
			min-height: 48px;
			min-width: 150px;
			padding-left: 20px;
			padding-right: 20px;
			font-size: 16px;
		}
		& .cancel-btn{
			display: inline-flex;
			align-items:center;
			justify-content:center;
			text-decoration: none;
			min-height: 48px;
			border-radius: 8px;
			padding-left: 20px;
			padding-right: 20px;
			font-size: 16px;
			line-height: 150%;
			font-weight: 500;
			color:#1C45C2;
			transition:.3s ease all;
			&:hover{
				opacity:.7;
			}
		}
	}
	& .new__campaign--box{
		padding:20px 24px;
		border-radius: 8px;
		border:1px solid #E5E7EB;
		background-color:#FFFFFF;
		margin-bottom: 32px;
		& .top{
			display: flex;
			align-items:center;
			justify-content:space-between;
			& ul{
				padding:0px;
				list-style-type: none;
				margin:0px;
				display: flex;
				align-items:center;
				justify-content:flex-start;
				border-radius: 8px;
				border:1px solid #E5E7EB;
				& li{
					border-right:1px solid #E5E7EB;
					&:nth-child(1) a{
						border-top-left-radius: 8px;
						border-bottom-left-radius: 8px;
					}
					&:nth-child(3) a{
						border-top-right-radius: 8px;
						border-bottom-right-radius: 8px;
					}
					& a{
						display: flex;
						align-items:center;
						justify-content:center;
						text-decoration: none;
						font-size: 14px;
						line-height: 130%;
						font-weight: 400;
						color:#111928;
						transition:.3s ease all;
						min-width: 175px;
						padding-left: 15px;
						padding-right: 15px;
						white-space: nowrap;
						min-height: 42px;
						&:hover{
							color:#374151;
							background-color:#F9FAFB;							
						}
						&.current{
							color:#374151;
							background-color:#F9FAFB;
						}
					}
					&:last-child{
						border-right: 0px;
					}
				}
			}
			&>p{
				margin:0px;
				font-size: 16px;
				line-height: 150%;
				font-weight: 500;
				color:#111928;
				margin-right: 15px;
			}
		}
		& .content{
			margin-top: 20px;
			& .double{
				display: grid;
				grid-template-columns:repeat(2 ,1fr);
				grid-column-gap:16px;
			}
		}
	}
	padding-top: 40px;
	&>h6{
		margin-top: 0px;
		margin-bottom: 32px;
		font-size: 28px;
		line-height: 125%;
		font-weight: 600;
		color:#111928;
	}
}
.select__objective{
	padding:20px 24px;
	background-color:#FFFFFF;
	border-radius: 8px;
	border:1px solid #E5E7EB;
	&>p{
		margin-top: 0px;
		margin-bottom: 20px;
		font-size: 16px;
		line-height: 150%;
		font-weight: 500;
		color:#111928;
	}
	& .grid{
		display: grid;
		grid-template-columns:repeat(4 ,1fr);
		grid-column-gap:24px;
		& .elem{
			cursor:pointer;
			transition:.3s ease all;
			display: flex;
			flex-direction:column;
			justify-content:space-between;
			min-height: 120px;
			padding:20px;
			border-radius: 8px;
			border:1px solid #E5E7EB;
			&.active{
				border-color:#1C45C2;
			}
			& .icon{
				display: inline-flex;
				margin-bottom: 15px;
			}
			&>p{
				margin:0px;
				font-size: 16px;
				line-height: 125%;
				font-weight: 600;
				color:#111928;
			}
		}
		grid-row-gap:24px;
	}
}
.create__content{
	padding:20px 24px;
	background-color:#FFFFFF;
	border-radius: 8px;
	border:1px solid #E5E7EB;
	& .double{
		display: grid;
		grid-template-columns:repeat(2 ,1fr);
		grid-column-gap:16px;
	}
	&>p{
		margin-top: 0px;
		margin-bottom: 20px;
		font-size: 16px;
		line-height: 150%;
		font-weight: 500;
		color:#111928;
	}
}
.templates__box{
	padding:20px 24px;
	border-radius: 8px;
	border:1px solid #E5E7EB;
	background-color:#fff;
	margin-top: 16px;
	& .another__variant{
		margin-top: 16px;
		display: flex;
		justify-content:flex-end;
		&>a{
			display: inline-flex;
			align-items:center;
			justify-content:center;
			padding:12px 20px;
			text-decoration: none;
			border-radius: 8px;
			min-height: 48px;
			font-size: 16px;
			line-height: 150%;
			font-weight: 500;
			color:#1C45C2;
			transition:.3s ease all;
			&:hover{
				opacity:.7;
			}
		}
	}
	& .template__container{
		padding:24px;
		border:1px solid #E5E7EB;
		border-radius: 8px;
		background-color:#F9FAFB;
		max-height: 840px;
		overflow-y:auto;
		&::-webkit-scrollbar {
		  width: 6px;
		  height: 4px;
		}
		 
		&::-webkit-scrollbar-track {

		}
		 
		&::-webkit-scrollbar-thumb {
			border-radius: 250px;
		  background-color:rgb(28,69,194);
		}
		& .new__template ,  & .library__template , & .my__template{
			& .grid{
				display: grid;
				grid-template-columns:repeat(6 , 1fr);
				grid-column-gap:23px;
				grid-row-gap:24px;
				& .elem{
					display: flex;
					align-items:center;
					justify-content:center;
					position: relative;
					border:1px solid #E5E7EB;
					border-radius: 9px;
					overflow:hidden;
					padding-bottom:141%;
					height: auto;
					position: relative;

					&:hover .overlay{
						opacity:1;
					}
					& .overlay{
						position: absolute;
						left: 0px;
						top:0px;
						width: 100%;
						height: 100%;
						background-color:rgba(0,0,0,.7);
						z-index: 2;
						opacity:0;
						pointer-events:none!important;
						transition:.4s ease all;
						&.pointed{
							pointer-events:initial!important;
						}
						& .inn{
							width: 100%;
							height: 100%;
							display: flex;
							align-items:center;
							justify-content:center;
							&>a{
								display: inline-flex;
								align-items:center;
								justify-content:center;
								margin-right: 10px;
								min-height: 45px;
								padding-left: 15px;
								padding-right: 15px;
								font-size: 18px;
								line-height: 26px	;
								color:#fff;
								border:1px solid #fff;
								border-radius: 4px;
								transition:.3s ease all;
								&:hover{
									background-color:#fff;
									color:#000;
								}
								text-decoration: none;
								&:last-child{
									margin-right: 0px;
								}
							}
						}
					}
					& img{
						position: absolute;
						left: 0px;
						top:0px;
						width: 100%;
						height: 100%;
						object-fit:cover;
					}
				}
			}
		}
		& .new__template{
			& .grid{
				& .elem{
					padding-bottom: 127%;
				}
			}
		}
	}
	& .template__switcher{

		margin-bottom: 20px;
		display: flex;
		justify-content:flex-start;
		& ul{
			padding:0px;
			list-style-type: none;
			margin:0px;
			display: flex;
			align-items:center;
			border:1px solid #E5E7EB;
			border-radius: 8px;
			justify-content:flex-start;
			&>li:nth-child(1){
				&>a{
					border-top-left-radius: 8px;
					border-bottom-left-radius: 8px;
				}
			}
			&>li:last-child{
				&>a{
					border-top-right-radius: 8px;
					border-bottom-right-radius: 8px;
				}
			}
			&>li{
				border-right:1px solid #E5E7EB;
				&:last-child{
					border-right: 0px;
				}
			}
			&>li>a{

				min-width: 210px;
				display: flex;
				align-items:center;
				justify-content:center;
				text-decoration: none;
				font-size: 14px;
				line-height: 130%;
				font-weight: 400;
				color:#111928;
				min-height: 42px;
				transition:.3s ease all;
				&:hover{
					background-color:#F9FAFB;
					color:#374151;
				}
				&.current{
					background-color:#F9FAFB;
					color:#374151;
				}
			}
		}
	}
}
.frame{
	position: relative;
	height: 0px;
	padding-bottom: 50%;
	& iframe{
		position: absolute;
		top:0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}
}
.template__frame{

	padding:16px;
	border:1px solid #E5E7EB;
	border-radius: 8px;
	background-color:#fff;
	position: relative;
	height: 0px;
	padding-bottom: 50%;
	& iframe{
		position: absolute;
		top:16px;
		left: 16px;
		width: calc(100% - 32px);
		height: calc(100% - 32px);
	}
}
.segment__frame{
	padding:20px 24px;
	border-radius: 8px;
	background-color:#FFFFFF;
	border:1px solid #E5E7EB;
	margin-top: 16px;
	& .bottom{
		margin-top: 16px;
		display: flex;
		justify-content:flex-end;
		&>a{
			display: inline-flex;
			align-items:center;
			justify-content:center;
			text-decoration: none;
			min-height: 48px;
			border-radius: 8px;
			font-size: 16px;
			line-height: 150%;
			font-weight: 500;
			color:#1C45C2;
			transition:.3s ease all;
			&:hover{
				opacity:.7;
			}
		}
	}
	&>.top{
		display: flex;
		align-items:center;
		justify-content:space-between;
		margin-bottom: 20px;
		& .right__controls{
			display: flex;
			align-items:center;
			& .btns{
				display: flex;
				justify-content:flex-end;
				align-items:center;
				&>a{
					display: inline-flex;
					align-items:center;
					justify-content:center;
					text-decoration: none;
					min-width: 42px;
					font-size: 12px;
					padding-left: 12px;
					padding-right: 12px;
					margin-right: 12px;
					&:last-child{
						margin-right: 0px;
					}
				}
			}
			& .group__input{
				width: 285px;
				&>input{
					width: 100%;
					height: 41px;
					border-radius: 8px;
					border:1px solid #D1D5DB;
					padding-left: 12px;
					padding-right: 12px;
					color:#000;
					font-size: 14px; 
				}
				margin-left: 12px;
			}
			justify-content:flex-end;
			&>a{

				font-size: 14px;
				min-height: 41px;
				padding-left: 24px;
				padding-right: 24px;
				margin-left: 8px;
			}
		}
		&>p{
			margin:0px;
			font-size: 16px;
			line-height: 150%;
			font-weight: 500;
			color:#111928;
		}
	}
}
.variant{
	margin-top: 32px;
	padding-top: 32px;
	border-top:1px solid #E5E7EB;
}
.segment__frame{
	& .frame{
		border-radius: 8px;
		overflow:hidden;
	}
}
.create__content>.top{
	display: flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom: 20px;
	&>a{
		display: inline-flex;
		text-decoration: none;
		align-items:center;
		font-size: 12px;
		line-height: 150%;
		font-weight: 500;
		color:#F05252;
		transition:.3s ease all;
		margin-left: 12px;
		&:hover{
			opacity:.7;
		}
		& span{
			display: inline-flex;
			align-items:center;
			justify-content:center;
			margin-right: 4px;
		}
	}
	&>p{
	    margin-top: 0px;
	    font-size: 16px;
	    margin-bottom: 0px;
	    line-height: 150%;
	    font-weight: 500;
	    color: #111928;
	}
}
.segments__campaign{
	border:1px solid #E5E7EB;
	border-radius: 8px;
	background-color:#fff;
	& .segments__list{
		max-height: 520px;
		overflow-y:auto;
		& .inner__list--segments{
			display: grid;
			grid-template-columns:repeat(5, 1fr);
			grid-column-gap:24px;
			grid-row-gap:24px;
			&>a{
				&.current{
					border-color:#1C45C2;
				}
				transition:.3s ease all;
				display: flex;
				border:1px solid #E5E7EB;
				border-radius: 8px;
				flex-direction:column;
				align-items:flex-start;
				min-height: 118px;
				justify-content:space-between;
				padding:20px;
				text-decoration: none;
				&>span{
					font-size: 14px;
					line-height: 125%;
					font-weight: 500;
					color:#6B7280;
				}
				&>p{
					margin-top: 0px;
					margin-bottom: 20px;
					font-size: 16px;
					line-height: 125%;
					font-weight: 600;
					color:#111928;
				}
			}
		}
		&::-webkit-scrollbar {
		  width: 6px;
		  height: 4px;
		}
		 
		&::-webkit-scrollbar-track {

		}
		 
		&::-webkit-scrollbar-thumb {
			border-radius: 250px;
		  background-color:rgb(28,69,194);
		}
		& .inner__list--segments{
			padding:24px;
		}
	}
	& .head{
		display: flex;
		align-items:center;
		justify-content:space-between;
		padding:24px;
		border-bottom: 1px solid #E5E7EB;
		& .right{
			display: flex;
			align-items:center;
			justify-content:flex-end;
			width: 100%;
			max-width: 770px;
			&>.exclude{
				padding-left: 65px;
				padding-right: 65px;
				color:#1C45C2;
				white-space: nowrap;
				&.opened{
					background-color:#1C45C2;
					color:#fff;
				}
			}
			& .all__categories{

				padding-left: 12px;
				padding-right: 12px;
				font-size: 12px;
				min-height: 37px;
				margin-right: 24px;
				white-space: nowrap;
			}
			& .group__input{
				width: 100%;
				max-width: 370px;
				position: relative;
				margin-right: 8px;
				&>input{
					width: 100%;
					background-color:#F9FAFB;
					height: 37px;
					border-radius: 8px;
					border:1px solid #D1D5DB;
					padding-left: 34px;
					padding-right: 15px;
					outline:none;
				}
				&>span{
					position: absolute;
					display: inline-flex;
					align-items:center;
					justify-content:center;
					left: 10px;
					top:9px;
				}
			}
		}
		& .left{
			width: 100%;
			max-width: 500px;
			margin-right: 20px;
			& ul{
				border:1px solid #E5E7EB;
				border-radius: 8px;
				background-color:#fff;
				padding:0px;
				list-style-type: none;
				margin:0px;
				display: flex;
				align-items:center;
				justify-content:flex-start;
				width: 100%;
				max-width: 500px;
				&>li{
					border-right:1px solid #E5E7EB;
					&:nth-child(1){
						&>a{
							border-top-left-radius: 8px;
							border-bottom-left-radius: 8px;
						}
					}
					&:nth-child(2){
						&>a{
							border-top-right-radius: 8px;
							border-bottom-right-radius: 8px;
						}
					}
					&:last-child{
						border-right: 0px;
					}
					width: 100%;
					&>a{
						&.current{
							color:#111928;
							font-weight: 500;
							background-color:#F9F9F9;
						}
						transition:.3s ease background-color , .3s ease color;
						&:hover{
							color:#111928;
							background-color:#F9F9F9;
						}
						display: flex;
						align-items:center;
						justify-content:center;
						text-decoration: none;
						min-height: 42px;
						font-size: 14px;
						line-height: 130%;
						font-weight: 400;
						color:#6B7280;
					}
				}
			}
		}
	}
}

.result__wrapper{
	display: flex;
	align-items:flex-start;
	justify-content:space-between;
	& .result__details{
		min-width: 440px;
		max-width: 440px;
		&>.box{
			padding:20px 24px;
			border-radius: 8px;
			border:1px solid #E5E7EB;
			margin-bottom: 24px;
			&:last-child{
				margin-bottom: 0px;
			}
			background-color:#fff;
			& .content{
				&>img{
					max-width: 100%;
				}
			}
			& .head{
				padding-bottom: 20px;
				margin-bottom: 20px;
				border-bottom:1px solid #E5E7EB;
				display: flex;
				align-items:flex-start;
				justify-content:space-between;
				&>span{
					display: inline-flex;
					margin-left: 12px;
					min-height: 22px;
					align-items:center;
					justify-content:center;
					padding-top: 1.5px;
					border-radius: 6px;
					background-color:#E9ECFB;
					padding-left: 10px;
					padding-right: 10px;
					font-size: 12px;
					line-height: 150%;
					position: relative;
					top:2px;
					color:#1C45C2;
					white-space: nowrap;
					font-weight: 500;
				}
				&>p{
					margin:0px;
					font-size: 16px;
					line-height: 150%;
					font-weight: 500;
					color:#111928;
				}
			}
		}
	}
	& .information__wrapper{
		width: 100%;
		margin-right: 50px;
		&>.box{
			margin-bottom: 32px;
			background-color:#FFFFFF;
			border-radius: 8px;
			border:1px solid #E5E7EB;
			padding:20px 24px;
			& .content{
				& .test__group{
					display: flex;
					align-items:center;
					justify-content:space-between;
					&>a{
						white-space: nowrap;
						padding-left: 24px;
						padding-right: 24px;
						min-height: 42px;
					}
					margin-top: 20px;
					&>.group__input{
						width: 100%;
						margin-right: 8px;
					}
				}
				& .radios{
					& .elem__radio{
						margin-bottom: 16px;
						&:last-child{
							margin-bottom: 0px;
						}
						& .container__radio{
							display: flex;
							cursor:pointer;
							align-items:center;
							justify-content:flex-start;
							&>p{
								margin:0px;
								margin-left: 8px;
								font-size: 14px;
								line-height: 20px;
								font-weight: 500;
								color:#111928;
							}
						}
					}
				}
				&>.group__input{
					margin-bottom: 20px;
					&:last-child{
						margin-bottom: 0px;
					}
				}
				&>.tag__field{
					padding:0px;
					margin-bottom: 20px;
					& .dropdown{
						left: 0px;
						width: 100%;
						z-index: 2;
					}
				}
			}
			& .head{
				display: flex;
				align-items:center;
				justify-content:space-between;
				padding-bottom: 20px;
				margin-bottom: 20px;
				border-bottom:1px solid #E5E7EB;
				&>span{
					display: inline-flex;
					margin-left: 12px;
					font-size: 12px;
					line-height: 150%;
					font-weight: 400;
					color:#6B7280;
				}
				&>a{
					text-decoration: none;
					font-size: 14px;
					line-height: 150%;
					font-weight: 400;
					color:#1C45C2;
					transition:.3s ease all;
					&:hover{
						opacity:.7;
					}
				}
				&>p{
					margin:0px;
					font-size: 16px;
					line-height: 150%;
					font-weight: 500;
					color:#111928;
					margin-right: 15px;
				}
			}
		}
	}
}
.new__campaign--box{
	& .content{
		& .triple{
			display: grid;
			grid-template-columns:repeat(3 ,1fr);
			grid-column-gap:15px;
			grid-row-gap:12px;
			& .tag__field{
				margin:0px;
				padding:0px;
				& .dropdown{
					left: 0px;
					width: 100%;
					z-index: 3;
				}
			}
		}
		&>.double{
			&>.tag__field{
				margin:0px;
				padding:0px;
			}
		}
	}
}
.campaign__box{
	& .form__wrapper{
		margin-top: 24px;
		display: flex;
		align-items:flex-start;
		justify-content:space-between;
		& .form__main{
			width: 100%;
			&>.box{
				& .fields{
					& .double{
						display: grid;
						grid-template-columns:repeat(2 ,1fr);
						grid-column-gap:20px;
						grid-row-gap:20px;
						& .group__input.longer{
							grid-column-start:1;
							grid-column-end:3;
						}
					}
				}
				& .radios{
					&>.elem__radio{
						margin-bottom: 16px;
						& label{
							display: flex;
							align-items:center;
							justify-content:flex-start;
							&>span{
								margin-right: 8px;
							}
							&>p{
								margin:0px;
								font-size: 14px;
								line-height:20px;
								font-weight: 500;
								color:#111928;
							}
						}
						&:last-child{
							margin-bottom: 0px;
						}
					}
				}
				margin-bottom: 16px;
				&:last-child{
					margin-bottom: 0px;
				}
			}
			& .controls{
				& .right{
					display: flex;
					align-items:center;
					justify-content:flex-end;
					& .back-btn{
						margin-right: 16px;
						min-height: 48px;
						min-width: 150px;
						align-items:center;
						justify-content:center;
						font-size: 16px;
						font-weight: 500;
					}
				}
			}
			& .elem__box{
				& .keyword__elements{
					&>.elements{
						
						margin-bottom: 12px;
						border-radius: 8px;
						background-color:#F9FAFB;
						border:1px solid #F9FAFB;
						transition:.3s ease all;
						&.opened{
							border-color:#E5E7EB;
							&>.head{
								&>span{
									transform:rotate(180deg);
								}
							}
						}
						& .content{
							padding:20px;
							border-top:1px solid #E5E7EB;
							&>p{
								margin-top: 0px;
								margin-bottom: 16px;
								font-size: 14px;
								line-height: 150%;
								font-weight: 500;
								color:#4B5563;
								& span{
									font-weight: 400;
								}
								&:last-child{
									margin-bottom: 0px;
								}
							}
						}
						&>.head{
							cursor:pointer;
							display: flex;
							align-items:center;
							justify-content:space-between;
							padding:21px;
							&>span{
								display: inline-flex;
								transition:.3s ease all;
							}
							&>p{
								margin:0px;
								font-size: 14px;
								line-height: 125%;
								font-weight: 500;
								color:#374151;
							}
						}
						&:last-child{
							margin-bottom: 0px;
						}
					}
				}
				& .long__field{
					& .group__input{
						&>textarea{
							height: 225px;
						}
					}
				}
				& .double{
					display: grid;
					grid-template-columns:repeat(2 ,1fr);
					grid-column-gap:16px;
				}
				& .top.no__border{
					margin-bottom: 20px;
					padding-bottom: 0px;
					border-bottom:0px;
					&>p{
						margin:0px;
						font-size: 16px;
						line-height: 150%;
						font-weight: 600;
						color:#111928;
					}
				}
					& .segment__container{
						& .segment__radios{
							display: flex;
							align-items:center;
							justify-content:flex-start;
							& .el{
								margin-right: 16px;
								&:last-child{
									margin-right: 0px;
								}
								& .container__radio{
									display: flex;
									align-items:center;
									justify-content:flex-start;
									cursor:pointer;
									& .radio{
										margin-right: 8px;
									}
									&>p{
										margin:0px;
										font-size: 14px;
										line-height: 14px;
										font-weight: 500;
										color:#111928;
									}
								}
							}
						}
						&>p{
							margin-top: 0px;
							margin-bottom: 15px;
							font-size: 14px;
							line-height: 150%;
							color:#111928;
							font-weight: 500;
						}
					}
					& .created__segments{
						max-height: 490px;
						overflow-y:auto;
						margin-bottom: -24px;
						padding-bottom: 24px;
						width: calc(100% + 8px);
						padding-right: 8px;
						&::-webkit-scrollbar {
						  width: 6px;
						}
						 
						&::-webkit-scrollbar-track {

						}
						 
						&::-webkit-scrollbar-thumb {
							border-radius: 250px;
						  background-color:rgb(28,69,194);
						}
						& .grid{
							display: grid;
							grid-template-columns:repeat(3 ,1fr);
							grid-column-gap:24px;
							grid-row-gap:24px;
							& .elem{
								display: flex;
								flex-direction:column;
								justify-content:space-between;
								min-height: 120px;
								border-radius: 8px;
								border:1px solid #E5E7EB;
								text-decoration: none;
								padding:20px;
								& ul{
									padding:0px;
									list-style-type: none;
									margin:0px;
									display: flex;
									align-items:center;
									justify-content:flex-start;
									flex-wrap:wrap;
									& li{
										&:nth-child(1){
											word-break:break-all;
										}
										&.spacer{
											display: inline-flex;
											align-items:center;
											justify-content:center;
											margin:0px 8px;
										}
										display: flex;
										align-items:center;
										font-size: 14px;
										line-height: 150%;
										font-weight: 500;
										color:#6B7280;
										justify-content:flex-start;
										& span{
											display: inline-flex;
											margin-right: 4px;
										}
									}
								}
								&>p{
									margin-top: 0px;
									min-height: 55px;
									margin-bottom: 15px;
									font-size: 16px;
									line-height: 125%;
									font-weight: 600;
									color:#111928;
								}
							}
						}
					
				}
				&>.top{
					display: flex;
					align-items:center;
					justify-content:space-between;
					margin-bottom: 20px;
					padding-bottom: 20px;
					border-bottom:1px solid #E5E7EB;
					& .group__input{
						width: 100%;
						max-width: 370px;
						position: relative;
						display: flex;
						align-items:center;
						& span{
							display: inline-flex;
							position: absolute;
							left: 10px;
						}
						&>input{
							width: 100%;
							background-color:#F9FAFB;
							border-radius: 8px;
							border:1px solid #D1D5DB;
							padding-left: 34px;
							padding-right: 10px;
							height: 37px;
						}
					}
					& .btns{
						display: flex;
						align-items:center;
						justify-content:flex-end;
						&>a{
							margin-right: 12px;
							min-height: 37px;
							font-size: 12px;
							&:last-child{
								margin-right: 0px;
							}
						}
					}
					&>p{
						margin:0px;
						font-size: 16px;
						line-height: 150%;
						font-weight: 500;
						color:#111928;
					}
				}
				margin-bottom: 24px;
				padding:20px 24px;
				border:1px solid #E5E7EB;
				background-color:#fff;
				border-radius: 8px;
				&:last-child{
					margin-bottom: 0px;
				}
			}
			&.longer + .form__side{
				min-height: 567px;
			}
			&>.box{
				border-radius: 8px;
				border:1px solid #E5E7EB;
				background-color:#fff;
				width: 100%;
				padding:20px 24px;
				& .variant__name{
					display: flex;
					justify-content:space-between;
					align-items:center;
					padding-bottom: 20px;
					margin-bottom: 20px;
					border-bottom:1px solid #E5E7EB;
					&>a{
						display: inline-flex;
						align-items:center;
						justify-content:flex-start;
						font-size: 12px;
						line-height: 150%;
						font-weight: 500;
						color:#F05252;
						transition:.3s ease all;
						&:hover{
							opacity:.7;
						}
						text-decoration: none;
						& span{
							display: inline-flex;
							margin-right: 4px;
						}
					}
					&>p{
						margin:0px;
						font-size: 16px;
						line-height: 150%;
						font-weight: 500;
						color:#111928;
					}
				}
				& .add__more{
					display: flex;
					justify-content:flex-end;
					padding-top: 0px;
					padding-bottom: 6px;
					&>a{
						display: inline-flex;
						text-decoration: none;
						align-items:center;
						justify-content:flex-start;
						font-size: 16px;
						line-height: 150%;
						font-weight: 500;
						color:#1C45C2;
						transition:.3s ease all;
						&:hover{
							opacity:.7;
						}
					}
				}
				&>.elem{
					margin-bottom: 24px;
					& .field__with--info{
						&>textarea{
							height: 132px;
						}
					}
					& .top{
						display: flex;
						align-items:center;
						justify-content:space-between;
						margin-bottom: 20px;
						&.w__border{
							padding-bottom: 20px;
							border-bottom:1px solid #E5E7EB;
						}
						&>a{
							display: inline-flex;
							font-size: 14px;
							line-height: 150%;
							text-decoration: none;
							font-weight: 400;
							color:#1C45C2;
							transition:.3s ease all;
							&:hover{
								opacity:.7;
							}
						}
						&>p{
							margin:0px;
							font-size: 16px;
							line-height: 150%;
							font-weight: 500;
							color:#111928;
						}
					}
					&:last-child{
						margin-bottom: 0px;
					}
				}
			}
		}
		& .double__side{
			display: flex;
			flex-direction:column;
			justify-content:center;
			align-items:center;
			&>.form__side{
				margin-bottom: 24px;
				&:last-child{
					margin-bottom: 0px;
				}
			}
		}
		& .form__side{
			max-width: 430px;
			min-width: 430px;
			padding-top: 20px;
			padding-bottom: 20px;
			border-radius: 8px;
			border:1px solid #E5E7EB;
			background-color:#fff;
			margin-left: 24px;
			position: relative;
			&>span{
				position: absolute;
				top:16px;
				right: 16px;
				min-height: 22px;
				display: flex;
				align-items:center;
				justify-content:center;
				border-radius: 6px;
				background-color:#E9ECFB;
				font-size: 12px;
				line-height: 150%;
				font-weight: 500;
				color:#1C45C2;
				padding-left: 10px;
				padding-right: 10px;
			}
			& .media{
				display: flex;
				justify-content:center;
				align-items:center;
				position: relative;
				max-width: 250px;
				margin-left: auto;
				margin-right: auto;
				& .float__bubble{
					margin:0px;
					padding:4px 8px;
					background-color:#4162E5;
					border-radius: 10px;
					position: absolute;
					right:25px;
					top:90px;
					font-size: 7px;
					line-height: 11px;
					color:#fff;
					font-weight: 400;
					width: 100%;
					min-height: 20px;
					max-width: 120px;
				}
				
				&>img{
					min-width: 250px;
					max-width: 250px;
				}
			}
		}
	}
}
.edit-btn{
	display: inline-flex;
	align-items:center;
	justify-content:center;
	min-width: 39px;
	max-width: 39px;
	min-height: 37px;
	max-height: 37px;
	padding:0px;
	& svg{
		width: 16px;
	}
}
.campaign__overview{
	padding:20px;
	border-radius: 8px;
	background-color:#F9FAFB;
	&>p{
		margin-top: 0px;
		margin-bottom: 16px;

		font-size: 14px;
		line-height: 125%;
		font-weight: 500;
		color:#374151;
		& span{
			font-weight: 400;
		}
		&:last-child{
			margin-bottom: 0px;
		}
	}
}
.progress__campaign ul>li{
	position: relative;
	&.filled{
		&:before{
			content:none!important;
		}
	}
	&:before{
		content:"";
		position: absolute;
		left: 50%;
		top:-14px;
		width: 600%;
		height: 4px;
		background-color:#E5E7EB;
	}
}
.progress__campaign{
	// overflow:hidden;
}
.progress__campaign ul>li:before{
	top:-16px;
	height: 5px;
}
@media (max-width: 1360px){
	.segments__campaign .head .left{
		max-width: 400px;
	}
	.segments__campaign .head .left ul{
		max-width: 400px;
	}
	.segments__campaign .head .right>.exclude{
		padding-left: 25px;
		padding-right: 25px;
	}
}
@media (max-width: 1280px){
	.campaign__box .form__wrapper .form__main .elem__box .created__segments .grid{
		grid-template-columns:repeat(2 ,1fr);
	}
	.templates__box .template__container .new__template .grid, .templates__box .template__container .library__template .grid, .templates__box .template__container .my__template .grid{
		grid-column-gap:15px;
		grid-row-gap:15px;
		grid-template-columns:repeat(5 ,1fr);
	}
}
@media (max-width: 1200px){
	.campaign__box .form__wrapper .double__side{
		display: grid;
		grid-template-columns:repeat(2 ,1fr);
		grid-column-gap:16px;
		margin-bottom: 24px;
		width: 100%;
		&>.form__side{
			margin-bottom: 0px;
		}
	}
	.campaign__box .form__wrapper .form__main.longer+.form__side{
		min-height: 0px;
	}
	.campaign__box .form__wrapper{
		flex-direction:column-reverse;
	}
	.campaign__box .form__wrapper .form__side{
		min-width: 0px;
		max-width: 100%;
		width: 100%;
		margin-left: 0px;
		margin-top: 0px;
		margin-bottom: 24px;
	}
	.result__wrapper .result__details>.box .content>img{
		margin-left: auto;
		margin-right: auto;
		display: block;
		max-width: 390px;
		width: 100%;
	}
	.result__wrapper{
		flex-direction:column-reverse;
	}
	.result__wrapper .information__wrapper{
		margin-right: 0px;
	}
	.result__wrapper .result__details{
		min-width: 0px;
		max-width: 100%;
		margin-bottom: 32px;
		width: 100%;
	}
	.segments__campaign .segments__list .inner__list--segments{
		grid-column-gap:16px;
		grid-row-gap:16px;
		grid-template-columns:repeat(4 ,1fr);
	}
	.segments__campaign .head{
		flex-direction:column;
		& .left{
			width: 100%;
			margin-right: auto;
			margin-bottom: 10px;
		}
	}
	.segments__campaign .head .right{
		max-width: 100%;
	}
	.segments__campaign .head .right .group__input{
		max-width: 100%;
	}
	.templates__box .template__container .new__template .grid, .templates__box .template__container .library__template .grid, .templates__box .template__container .my__template .grid{
		grid-template-columns:repeat(4 ,1fr);
	}
	.campaign__box .new__campaign--box .top{
		flex-direction:column;
		align-items:flex-start;
		&>p{
			margin-bottom: 10px;
		}
	}
}
@media (max-width: 991px){
	.campaign__overview{
		padding:15px;
	}
	.campaign__box .form__wrapper .form__main .elem__box .keyword__elements>.elements>.head{
		padding:15px;
	}
	.campaign__box .form__wrapper .form__main .elem__box .keyword__elements>.elements .content{
		padding:15px;
	}
	.campaign__box .new__campaign--box .content{
		margin-top: 16px;
	}
	.campaign__box .form__wrapper .double__side{
		margin-bottom: 16px;
	}
	.campaign__box .form__wrapper .form__side{
		margin-bottom: 16px;
	}
	.campaign__box .form__wrapper .form__main .elem__box{
		margin-bottom: 16px;
	}
	.campaign__box .form__wrapper .form__main>.box{
		padding:16px;
	}
	.campaign__box .form__wrapper .form__main>.box>.elem{
		margin-bottom: 16px;
	}
	.campaign__box .form__wrapper .form__main>.box>.elem .top{
		margin-bottom: 12px;
	}
	.result__wrapper .information__wrapper>.box{
		margin-bottom: 16px;
	}
	.result__wrapper .result__details{
		margin-bottom: 16px;
	}
	.result__wrapper .result__details>.box{
		padding:16px;
	}
	.result__wrapper .result__details>.box .head{
		margin-bottom: 12px;
		padding-bottom: 12px;
	}
	.result__wrapper .information__wrapper>.box{
		padding:16px;
	}
	.result__wrapper .information__wrapper>.box .head{
		margin-bottom: 12px;
		padding-bottom: 12px;
	}
	.result__wrapper .information__wrapper>.box .content>.tag__field{
		margin-bottom: 15px;
		margin-top: 12px;
	}
	.result__wrapper .information__wrapper>.box .content>.group__input{
		margin-bottom: 15px;
	}
	.tag__wrapper{
		margin-top: 16px;
		padding-left: 16px;
		padding-right: 16px;
	}
	.segments__campaign .head .left ul{
		max-width: 100%;
	}
	.segments__campaign .head{
		padding:16px;
	}
	.segments__campaign .segments__list .inner__list--segments{
		padding:16px;
		grid-template-columns:repeat(3 ,1fr);
	}
	.segments__campaign .segments__list{
		max-height: 340px;
	}
	.segment__frame{
		padding:16px;
	}
	.variant{
		margin-top: 16px;
		padding-top: 16px;
	}
	.segment__frame>.top{
		flex-direction:column;
		&>p{
			width: 100%;
			margin-bottom: 10px;
		}
		& .right__controls{
			width: 100%;
		}
	}
	.segment__frame>.top .right__controls .group__input{
		width: 100%;
	}
	.segment__frame>.top .right__controls a{
		white-space: nowrap;
	}
	.templates__box .template__container{
		max-height: 540px;
	}
	.templates__box{
		padding:15px;
	}
	.templates__box .template__container{
		padding:15px;
	}
	.templates__box .template__switcher ul>li>a{
		min-width: 150px;
	}
	.templates__box .template__switcher ul{
		max-width: 100%;
		&::-webkit-scrollbar {
		  width: 6px;
		  height: 4px;
		}
		 
		&::-webkit-scrollbar-track {

		}
		 
		&::-webkit-scrollbar-thumb {
			border-radius: 250px;
		  background-color:rgb(28,69,194);
		}
		overflow-x:auto;
	}
	.templates__box .template__container .new__template .grid, .templates__box .template__container .library__template .grid, .templates__box .template__container .my__template .grid{
		grid-template-columns:repeat(3 ,1fr);
	}
	.templates__box .template__container .new__template .grid .elem .overlay .inn, .templates__box .template__container .library__template .grid .elem .overlay .inn, .templates__box .template__container .my__template .grid .elem .overlay .inn{
		padding-left: 12px;
		padding-right: 12px;
	}
	.templates__box .template__container .new__template .grid .elem .overlay .inn, .templates__box .template__container .library__template .grid .elem .overlay .inn, .templates__box .template__container .my__template .grid .elem .overlay .inn{
		flex-direction:column;
		&>a{
			width: 100%;
			margin-bottom: 10px;
			margin-right: 0px!important;
			&:last-child{
				margin-bottom: 0px;
			}
		}
	}
	.select__objective .grid{
		grid-template-columns:repeat(3 ,1fr);
	}
	.campaign__box>h6{
		margin-bottom: 20px;
		font-size: 24px;
	}
	.campaign__box{
		padding-top:25px;
	}
	.create__content{
		padding:16px;
		margin-bottom: 16px;
	}
	.create__content .double{
		grid-template-columns:1fr;
		grid-row-gap:10px;
	}
	.campaign__box .new__campaign--box{
		padding:16px;
		margin-bottom: 16px;
	}
	.campaign__box .controls{
		margin-top: 16px;
	}
	.select__objective{
		padding:16px;
	}
	.segments__campaign .head .left{
		max-width: 100%;
	}
	.campaign__box .form__wrapper .form__main .elem__box .created__segments .grid{
		grid-column-gap:16px;
		grid-row-gap:16px;
	}
	.campaign__box .form__wrapper .form__main .elem__box{
		padding:16px;
	}
	.campaign__box .form__wrapper .form__main>.box>.elem .top.w__border{
		padding-bottom: 12px;
	}
}
@media (max-width: 767px){
	.campaign__box .form__wrapper .form__main .elem__box .double{
		grid-template-columns:1fr;
		grid-row-gap:16px;
	}
	.campaign__box .form__wrapper .form__main .elem__box .top.no__border{
		margin-bottom: 12px;
	}
	.campaign__box .form__wrapper .form__main>.box .fields .double{
		grid-template-columns:1fr;
	}
	.campaign__box .form__wrapper .form__main>.box .fields .double .group__input.longer{
		grid-column-start:1;
		grid-column-end:2;
	}
	.campaign__box .form__wrapper .form__main>.box>.elem .top.w__border{
		flex-direction:column;
		align-items:flex-start;
		&>p{
			margin-bottom: 5px;
			&:last-child{
				margin-bottom: 0px;
			}
		}
	}
	.campaign__box .form__wrapper .double__side{
		grid-template-columns:1fr;
		grid-row-gap:16px;
	}
	.campaign__box .form__wrapper .form__main .elem__box .created__segments{
		max-height: 390px;
	}
	.campaign__box .form__wrapper .form__main .elem__box>.top{
		margin-bottom: 12px;
		padding-bottom: 12px;
		flex-direction:column;
		&.no__break{
			flex-direction:row;
		}
		&>a{
			width: 100%;
			align-items:center;
			justify-content:center;
		}
		& .group__input{
			width: 100%;
			margin-bottom: 8px;
			max-width: 100%;
		}
	}
	.campaign__box .form__wrapper .form__main .elem__box>.top>p{
		width: 100%;
		margin-bottom: 8px;
	}
	.campaign__box .form__wrapper .form__main .elem__box>.top .btns{
		display: grid;
		grid-template-columns:repeat(2 ,1fr);
		grid-column-gap:10px;
		width: 100%;
		max-width: 100%;
		&>a{
			align-items:center;
			justify-content:center;
			margin-right: 0px;
		}
	}
	.campaign__box .form__wrapper .form__main .elem__box .created__segments .grid{
		grid-template-columns:1fr;
	}
	.new__campaign--box .content .triple{
		grid-template-columns:1fr;
	}
	.result__wrapper .information__wrapper>.box .head{
		flex-direction:column;
		align-items:flex-start;
		&>span{
			margin-left: 0px;

		}
		&>p{
			margin-bottom: 7px;
			&:last-child{
				margin-bottom: 0px;
			}
		}
	}
	.tag__wrapper .dropdown ul>li>a{
		font-size: 13px;
	}
	.segments__campaign .segments__list .inner__list--segments>a{
		padding:15px;
	}
	.segments__campaign .segments__list .inner__list--segments>a>p{
		font-size: 15px;
	}
	.segments__campaign .head .right{
		padding-top: 47px;
		position: relative;

		&>.group__input{
			position: absolute;
			left: 0px;
			top:0px;
			width: 100%;
			margin-right: 0px;
		}
		&>a{
			width: 50%;
			align-items:center;
			justify-content:center;
		}
	}
	.segments__campaign .head .right>.exclude{
		padding-left: 15px;
		padding-right: 15px;
	}
	.segments__campaign .head .right .all__categories{
		margin-right: 15px;
	}
	.create__content>.top>a{
		font-size: 0px;
		& span{
			margin-right: 0px;
		}
	}
	.segment__frame>.top .right__controls{
		&>a{
			margin-left: 0px;
		}
	}
	.segment__frame>.top .right__controls{
		flex-direction:column;
		align-items:center;
		justify-content:center;
		& .btns{
			display: grid;
			width: 100%;
			grid-template-columns:repeat(2 ,1fr);
			grid-column-gap:10px;
			&>a{
				width: 100%;
				margin-right: 0px;
			}
		}
		& .group__input{
			margin:10px 0px;
		}

		&>a{
			width: 100%;
		}
	}
	.templates__box .template__container{
		max-height: 400px;
	}
	.campaign__box .new__campaign--box .top ul{
		max-width: 100%;
	}
	.campaign__box .new__campaign--box .top ul li a{
		min-width: 140px;
	}
	.campaign__box .new__campaign--box .top ul{

		flex-direction:column;
		width: 100%;
		&>li{
			width: 100%;
			border-right:0px;
			border-bottom:1px solid #E5E7EB;
			&:nth-child(1){
				&>a{
					border-top-left-radius: 8px;
					border-top-right-radius: 8px;
				}
			}
			&:last-child{
				&>a{
					border-top-right-radius: 0px;
					border-bottom-left-radius: 8px;
				}
				border-bottom:0px;
			}
		}
	}
	.progress__campaign .progress{
		width: calc(100% + 24px);
		left: -12px;
	}
	.progress__campaign ul{
		margin-top: -4px;
	}
	.select__objective .grid{
		grid-template-columns:repeat(2 ,1fr);
		grid-row-gap:15px;
		grid-column-gap:15px;
	}
}
@media (max-width: 640px){
	.segments__campaign .segments__list .inner__list--segments{
		grid-template-columns:repeat(2 ,1fr);
	}
	.templates__box .template__container .new__template .grid, .templates__box .template__container .library__template .grid, .templates__box .template__container .my__template .grid{
		grid-template-columns:repeat(2 ,1fr);
		grid-column-gap:8px;
		grid-row-gap:8px;
	}
	.templates__box .template__container .new__template .grid .elem .overlay .inn>a, .templates__box .template__container .library__template .grid .elem .overlay .inn>a, .templates__box .template__container .my__template .grid .elem .overlay .inn>a{
		font-size: 14px;
		line-height: 18px;
	}
}
@media (max-width: 540px){
	.campaign__box .form__wrapper .form__main .controls .right{
		flex-direction:column;
		width: 100%;
		&>a{
			width: 100%;
			margin-right: 0px!important;
			margin-bottom: 10px;
			&:last-child{
				margin-bottom: 0px;
			}
		}
	}
	.template__frame{
		padding-bottom: 70%;
	}
	.frame{
		padding-bottom: 70%;
	}
	.templates__box .template__container .new__template .grid .elem .overlay .inn>a, .templates__box .template__container .library__template .grid .elem .overlay .inn>a, .templates__box .template__container .my__template .grid .elem .overlay .inn>a{
		min-height: 35px;
	}
	.campaign__box .controls{
		flex-direction:column;
		&>a{
			width: 100%;
			margin-bottom: 10px;
		}
		& .btns{
			flex-direction:column;
			width: 100%;
			&>a{
				width: 100%;
				margin-right: 0px!important;
				margin-bottom: 10px;
				&:last-child{
					margin-bottom: 0px;
				}
			}
		}
	}
	.campaign__box .new__campaign--box .content .double{
		grid-template-columns:1fr;
		grid-row-gap:12px;
	}
	.select__objective .grid{
		grid-template-columns:1fr;
	}
}
.result__wrapper .information__wrapper>.box .content .radios .elem__radio .container__radio>p{
	line-height: 20px;
}
@media (max-width: 480px){
	.campaign__box .form__wrapper .form__main .elem__box>.top .btns{
		grid-template-columns:1fr;
		grid-row-gap:8px;
	}
	.upload__file--wrapper>a.draggable__box>p{
		max-width: 180px;
		text-align:center;
		line-height: 130%;
	}
	.campaign__box .form__wrapper .form__side .media>img{
		min-width: 225px;
		max-width: 225px;
	}
	.campaign__box .form__wrapper .form__side .media .float__bubble{
		right: 35px;
		top:85px;
	}
	.result__wrapper .information__wrapper>.box .content .test__group{
		flex-direction:column;
		&>.group__input {
			margin-right: 0px;
			margin-bottom: 10px;
		}
		&>a{
			width: 100%;
		}
	}
	.segments__campaign .segments__list .inner__list--segments{
		grid-template-columns:1fr;
	}
	.segments__campaign .head .right{
		flex-direction:column;
		&>a{
			width: 100%;
			margin-right: 0px!important;
			margin-bottom: 10px;
			&:last-child{
				margin-bottom: 0px;
			}
		}
	}
	.segments__campaign .head .left ul{
		flex-direction:column;
	}
	.segments__campaign .head .left ul>li{
		border-right:0px;
		border-bottom:1px solid #E5E7EB;
		&:last-child{
			border-bottom:0px;
		}
	}
	.templates__box .another__variant>a , .segment__frame .bottom>a{
		font-size: 14px;
		padding-left: 12px;
		padding-right: 12px;
		min-height: 40px;
	}
	.segment__frame .bottom>a{
		padding:0px;
	}
	.segment__frame>.top .right__controls .btns{
		grid-template-columns:1fr;
		grid-row-gap:10px;
	}
	.templates__box .template__container .new__template .grid, .templates__box .template__container .library__template .grid, .templates__box .template__container .my__template .grid{
		grid-template-columns:1fr;
		grid-column-gap:8px;
		grid-row-gap:8px;
	}
}