.flows__wrapper{
	width: 100%;
	padding:32px 24px;
	&>.top{
		display: flex;
		align-items:center;
		justify-content:space-between;
		&>h6{
			margin:0px;
			font-size: 28px;
			line-height: 125%;
			font-weight: 600;
			color:#111928;
		}
		&>a{
			font-size: 12px;
			& span svg{
				width: 12px;
				height: 12px;
			}
		}
	}
	& .flows__table{
		margin-top: 24px;
		background-color:#fff;
		border:1px solid #E5E7EB;
		border-radius: 8px;
		&>.top{
			display: flex;
			align-items:center;
			justify-content:space-between;
			padding:16px;
			& .show__data{
				width: 100%;
				max-width: 200px;
			}
			& .group__input{
				width: 100%;
				max-width: 310px;
				position: relative;
				display: flex;
				align-items:center;
				&>input{
					width: 100%;
					height: 37px;
					border-radius: 8px;
					background-color:#F9FAFB;
					border:1px solid #E5E7EB;
					padding-left: 34px;
					padding-right: 10px;
					font-size: 14px;
				}
				&>span{
					position: absolute;
					left: 10px;
					display: inline-flex;
					align-items:center;
					justify-content:center;
				}
			}
		}
	}
}
.flow__progress{
	width: 100%;
}
.flow__progress{
	width: 100%;
	& .stick{
		position: relative;
		width: 100%;
		height: 4px;
		background-color:#E5E7EB;
		& .active{
			position: absolute;
			left: 0px;
			top:0px;
			height: 100%;
			background:linear-gradient(to right, rgba(28,69,194,0) 0%, #1c45c2 20%);
		}
	}
	& .flow__elements{
		display: flex;
		align-items:center;
		justify-content:space-between;
		padding-top: 8px;
		& .elem{
			position: relative;
			&:before{
				content:"";
				position: absolute;
				left: 50%;
				width: 800%;
				height: 5px;
				top:-13px;
				background-color:#E5E7EB;
			}
			&.current{
				& p{
					color:#111928;
				}
			}
			&:nth-child(1){
				margin-left: 24px;
			}
			&:nth-child(4){
				margin-right: 24px;
			}
			&>p{
				margin:0px;
				font-size: 14px;
				line-height: 150%;
				font-weight: 500;
				color:#9CA3AF;
			}
		}
	}
}
.create__flow , .enroll__audience{
	padding-top: 40px;
	padding-bottom: 30px;
	padding-left: 24px;
	padding-right: 24px;
	& .controls{
		margin-top: 32px;
		display: flex;
		align-items:center;
		justify-content:space-between;
		& .right__part{
			display: flex;
			align-items:center;
			justify-content:flex-start;
			&>.regular-btn{
				min-height: 48px;
				padding-left: 20px;
				padding-right: 20px;
				font-size: 16px;
			}
			&>.ongoing__button{

				padding-left: 12px;
				padding-right: 12px;
				min-height: 48px;
				margin-right: 16px;
			}
		}
		&>.cancel-btn{

			min-height: 48px;
			display: flex;
			align-items:center;
			justify-content:center;
			border-radius: 8px;
			text-decoration: none;
			padding-left: 20px;
			padding-right: 20px;
			font-size: 16px;
			line-height: 150%;
			font-weight: 500;
			color:#1C45C2;
			transition:.3s ease all;
			&:hover{
				opacity:.7;
			}
		}
	}
	& .first__step--flow{
		padding:20px 24px;
		background-color:#FFFFFF;
		border:1px solid #E5E7EB;
		border-radius: 8px;
		& .double{
			display: grid;
			grid-template-columns:repeat(2 ,1fr);
			grid-column-gap:16px;
			& .tag__field{
				padding:0px;
				margin:0px;
			}
		}
		&>p{
			margin-top: 0px;
			margin-bottom: 20px;
			font-size: 16px;
			line-height: 150%;
			font-weight: 500;
			color:#111928;
		}
	}
	&>h6{
		margin-top: 0px;
		margin-bottom: 32px;
		font-size: 28px;
		line-height: 125%;
		font-weight: 600;
		color:#111928;
	}
}
.flow__progress .flow__elements .elem.filled:before{
	content:none;
}
.enroll__audience{
	padding-top: 40px;
	padding-left: 24px;
	padding-right: 24px;
	padding-bottom: 30px;
	&>h6{
		margin-top: 0px;
		margin-bottom: 32px;
		font-size: 28px;
		line-height: 125%;
		font-weight: 600;
		color:#111928;
	}
}
.enroll__audience>.box{
	margin-bottom: 32px;
	background-color:#fff;
	border:1px solid #E5E7EB;
	border-radius: 8px;
}
.enroll__audience{
	&>h6{
		&>span{
			color:#6B7280;
		}
	}
}
.criterias__wrapper{

	border-radius: 8px;
	background-color:#fff;
	border:1px solid #E5E7EB;
	& .criteria__box{
		padding:24px;
		min-height: 355px;
	}
	& .criteria__grid{
		
		display: grid;
		grid-template-columns:repeat(4,1fr);
		grid-column-gap:24px;
		grid-row-gap:24px;

		& .elem{
			display: flex;
			flex-direction:column;
			align-items:flex-start;
			border-radius: 8px;
			padding:20px;
			border:1px solid #E5E7EB;
			text-decoration: none;
			transition:.3s ease all;
			justify-content:space-between;
			&.current{
				border-color:#1C45C2;
			}
			& .name{
				&>p{
					margin:0px;
					font-size: 14px;
					line-height: 125%;
					font-weight: 500;
					color:#6B7280;
				}
			}
			& .top{
				display: flex;
				align-items:flex-start;
				justify-content:space-between;
				min-height: 60px;
				width: 100%;
				margin-bottom: 12px;
				& .more__dots{
					display: inline-flex;
					margin-left: 8px;
					position: relative;
					top:2px;
				}
				&>p{
					margin:0px;
					font-size: 16px;
					line-height: 125%;
					font-weight: 600;
					color:#111928;
					margin-right: 12px;
				}
			}
		}
	}
	&>.head{
		display: flex;
		align-items:center;
		border-bottom:1px solid #E5E7EB;
		justify-content:space-between;
		padding:24px 25px;
		&>a{
			color:#1C45C2;
		}
		&>p{
			margin:0px;
			font-size: 16px;
			line-height: 150%;
			font-weight: 500;
			color:#111928;
		}
	}
}
.flow__box{
	width: 100%;
	overflow-x:auto;
	border-radius: 8px;
	border:1px solid #E5E7EB;
	min-height: 590px;
	background-color:#fff;
	display: flex;
	align-items:center;
	justify-content:flex-start;
	padding:35px 70px;
	padding-right: 0px;
	padding-right: 35px;
	& .add{
		display: inline-flex;
		align-items:center;
		justify-content:center;
		&>a{
			display: inline-flex;
			align-items:center;
			justify-content:center;
			min-width: 48px;
			max-width: 48px;
			min-height: 48px;
			max-height: 48px;
			border-radius: 250px;
			border:1px solid #E5E7EB;
			transition:.3s ease all;
			&:active{
				box-shadow:0px 0px 0px 3px #C3DDFD;
			}
		}
	}
	& .spacer{
		min-width: 64px;
		min-height: 1px;
		background-color:#E5E7EB;
	}
	& .row{
		& .start{
			min-width: 190px;
			min-height: 101px;
			display: flex;
			align-items:center;
			justify-content:center;
			border-radius: 8px;
			border:1px solid #E5E7EB;
			background-color:#F9FAFB;
			&>p{
				font-size: 18px;
				line-height: 125%;
				font-weight: 600;
				color:#111928;
				margin:0px;
				display: flex;
				align-items:center;
				justify-content:flex-start;
				& span{
					display: inline-flex;
					margin-right: 8px;
				}
			}
		}
	}
}
.menu__pick{
	min-width: 150px;
	max-width: 150px;
	border:1px solid #F9FAFB;
	z-index: 3;
	box-shadow:0px 4px 4px rgba(0,0,0,.1);
	position: absolute;
	left: 200px;
	top:200px;
	background-color:#fff;
	padding:24px 15px;
	& ul{
		padding:0px;
		list-style-type: none;
		margin:0px;
		&>li{
			margin-bottom: 24px;
			&>a{
				display: flex;
				font-size: 18px;
				line-height: 125%;
				font-weight: 600;
				color:#111928;
				flex-direction:column;
				align-items:center;
				justify-content:center;
				text-decoration: none;
				transition:.3s ease all;
				&:hover{
					opacity:.7;
				}
				&>span{
					display: inline-flex;
					margin-bottom: 8px;
				}
			}
			&:last-child{
				margin-bottom: 0px;
			}
		}
	}
}
.modal__side.add__action--popup{
	& .inner__modal{
		& .modal__box{
			max-width: 575px;
		}
	}
}
.modal__side{
	&.add__action--popup{
		& .top{
			& .template__picker{
				padding-bottom: 20px;
				& .template__list{
					& .elem{
						margin-bottom: 8px;
						display: flex;
						align-items:center;
						justify-content:spaec-between;
						border:1px solid #E5E7EB;
						border-radius: 8px;
						padding:12px;
						text-decoration: none;
						& .desc{
							display: flex;
							width: 100%;
							justify-content:space-between;
							&>span{
								transition:.3s ease all;
								&:hover{
									background-color:#F9FAFB;
								}
							}
							& .text{
								width: 100%;
								margin-right: 15px;
								display: flex;
								align-items:center;
								justify-content:flex-start;
								&>p{
									margin:0px;
									font-size: 14px;
									line-height: 150%;
									font-weight: 600;
									color:#111928;
								}
							}
							& .view{
								display: inline-flex;
								align-items:center;
								justify-content:center;
								min-width: 30px;
								max-width: 30px;
								min-height: 30px;
								max-height: 30px;
								border-radius: 4px;
								transition:.3s ease all;
							}
						}
						& .media{
							display: flex;
							align-items:center;
							justify-content:center;
							margin-right: 15px;
							& img{
								min-width: 65px;
								max-width: 65px;
								min-height: 65px;
								max-height: 65px;
								border-radius: 8px;
								border:1px solid #E5E7EB;
							}
						}
						&:last-child{
							margin-bottom: 0px;
						}
					}
				}
				&>.group__input{
					position: relative;
					width: 100%;
					display: flex;
					align-items:center;
					justify-content:flex-start;
					margin-bottom: 24px;
					&>input{
						width: 100%;
						outline:none;
						border-radius: 8px;
						border:1px solid #E5E7EB;
						background-color:#F9FAFB;
						height: 37px;
						font-size: 14px;
						color:#000;
						padding-left: 34px;
						padding-right: 10px;
					}
					&>span{
						display: inline-flex;
						align-items:center;
						justify-content:center;
						position: absolute;
						left: 10px;
					}
				}
				&>p{
					margin-top: 0px;
					margin-bottom: 15px;
					font-size: 16px;
					line-height: 150%;
					font-weight: 500;
					color:#6B7280;
				}
				&>ul{
					padding:0px;
					list-style-type: none;
					margin:0px;
					display: flex;
					align-items:center;
					justify-content:center;
					border:1px solid #E5E7EB;
					border-radius: 8px;
					margin-bottom: 16px;
					&>li{
						display: flex;
						align-items:center;
						justify-content:center;
						border-right:1px solid #E5E7EB;
						width: 100%;
						&: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;
						}
						&>a{
							display: flex;
							align-items:center;
							justify-content:center;
							width: 100%;
							transition:.3s ease all;
							text-decoration: none;
							height: 37px;
							font-size: 14px;
							line-height: 130%;
							font-weight: 400;
							color:#6B7280;
							&.current{
								font-weight: 500;
								background-color:#F9F9F9;
								color:#111928;
							}
						}
					}
				}
			}
			& .action__picker{
				margin-bottom: 32px;
				& ul{
					padding:0px;
					list-style-type: none;
					margin:0px;
					display: flex;
					align-items:center;
					justify-content:flex-start;
					&>li{
						margin-right: 8px;
						&>a{
							display: inline-flex;
							align-items:center;
							justify-content:center;
							border-radius: 8px;
							border:1px solid #E5E7EB;
							font-size: 14px;
							line-height: 150%;
							font-weight: 500;
							color:#1C45C2;
							transition:.3s ease all;
							min-height: 41px;
							text-decoration: none;
							padding-left: 20px;
							padding-right: 20px;
							&.current{
								background-color:#E9ECFB;
								border-color:#E9ECFB;
							}
						}
						&:last-child{
							margin-right: 0px;
						}
					}
				}
				&>p{
					margin-top: 0px;
					margin-bottom: 24px;
					font-size: 16px;
					line-height: 24px;
					font-weight: 500;
					color:#6B7280;
				}
			}
			&>h6{
				margin-top: 0px;
				margin-bottom: 32px;
				font-size: 24px;
				line-height: 125%;
				font-weight: 600;
				color:#111928;
			}
		}
	}
}
.modal__side.add__delay--popup{
	& .inner__modal .modal__box{
		max-width: 570px;
	}
	& .bottom{
		display: grid;
		grid-template-columns:repeat(2 ,1fr);
		grid-column-gap:8px;
		& .outline-btn{
			display: inline-flex;
			align-items:center;
			justify-content:center;
			min-height: 41px;
			border:1px solid #E5E7EB;
			border-radius: 8px;
			text-decoration: none;
			font-size: 14px;
			line-height: 150%;
			font-weight: 500;
			color:#1C45C2;
		}
	}
	& .top{
		padding-top: 15px;
		& .next__action{
			& .field{
				display: flex;
				align-items:center;
				justify-content:flex-start;
				&>.group__input{
					margin-right: 8px;
					width: 100%;
					&:nth-child(2){
						width: 92px;
						min-width: 92px;
						max-width: 92px;
					}
					&:nth-child(3){
						width: 92px;
						min-width: 92px;
						max-width: 92px;
					}
					&:nth-child(4){
						width: 92px;
						min-width: 92px;
						max-width: 92px;
					}
					&>input{
						width: 100%;
						height: 42px;
						border:1px solid #D1D5DB;
						border-radius: 8px;
						padding-left: 12px;
						padding-right: 12px;
						transition:.3s ease all;
						&:focus{
							border-color:#1C45C2;
						}
					}
					&:last-child{
						margin-right: 0px;
					}
				}
			}
			margin-top: 32px;
			&>p{
				margin-top: 0px;
				margin-bottom: 15px;
				font-size: 16px;
				line-height: 150%;
				font-weight: 500;
				color:#6B7280;
			}
		}
		&>.float__group{
			margin-bottom: 32px;
		}
		&>h6{
			margin-top: 0px;
			margin-bottom: 24px;
			font-size: 24px;
			line-height: 125%;
			font-weight: 600;
			color:#111928;
		}
	}
}
.item__picker{
	padding-bottom: 20px;
	&>p{
		margin-top: 0px;
		margin-bottom: 16px;
		font-size: 16px;
		line-height: 150%;
		font-weight: 500;
		color:#6B7280;
	}
	& .list__items{
		&>a{
			display: flex;
			align-items:center;
			justify-content:flex-start;
			padding:16px 14px;
			border:1px solid #E5E7EB;
			border-radius: 8px;
			text-decoration: none;
			margin-bottom: 8px;
			&>p{
				margin:0px;
				font-size: 14px;
				line-height: 150%;
				font-weight: 600;
				color:#111928;
			}
			&>span{
				display: inline-flex;
				align-items:center;
				justify-content:center;
				margin-right: 12px;
				& svg{
					min-width: 24px;
					max-width: 24px;
				}
			}
			&:last-child{
				margin-bottom: 0px;
			}
		}
	}
}
.modal__side.sms__content .inner__modal .modal__box{
	max-width: 570px;
}
.modal__side.sms__content{
	& .bottom{
		display: grid;
		grid-template-columns:repeat(2 ,1fr);
		grid-column-gap:8px;
		margin-top: 30px!important;
		&>a{
			align-items:center;
			justify-content:center;
			min-height: 41px;
			font-size: 14px;
		}
	}
	& .top{
		padding-top: 15px;
		& .contacts{
			margin-top: 30px;
			&>p{
				margin-top: 0px;
				margin-bottom: 16px;
				font-size: 16px;
				line-height: 24px;
				font-weight: 500;
				color:#111928;
			}
		}
		& .campaign__details{
			& .field__with--info{
				&>textarea{
					height: 132px;
				}
			}
			&>.group__input{
				margin-bottom: 16px;
				&:last-child{
					margin-bottom: 0px;
				}
			}
			&>.tag__field{
				margin:0px;
				padding:0px;
				margin-bottom: 16px;
			}
			&>p{
				margin-top: 0px;
				margin-bottom: 16px;
				font-size: 16px;
				line-height: 150%;
				font-weight: 500;
				color:#111928;
			}
		}
		& .number{
			display: inline-flex;
			align-items:center;
			justify-content:flex-start;
			min-height: 41px;
			border-radius: 8px;
			border:1px solid #E5E7EB;
			padding-left: 20px;
			padding-right: 20px;
			margin-bottom: 32px;
			&>span{
				display: inline-flex;
				margin-right: 8px;
			}
			&>p{
				margin:0px;
				font-size: 14px;
				line-height: 150%;
				font-weight: 500;
				color:#000000;
			}
		}
		&>h6{
			font-size: 24px;
			line-height: 125%;
			font-weight: 600;
			color:#111928;
			margin-bottom: 15px;
			margin-top: 0px;
		}
		&>p{
			margin-top: 0px;
			margin-bottom: 24px;
			font-size: 16px;
			line-height: 150%;
			font-weight: 500;
			color:#6B7280;
		}
	}
}
.modal__side.webhook{
	& .inner__modal{
		& .modal__box{
			max-width: 575px;
			& .bottom{
				display: grid;
				grid-template-columns:repeat(2 ,1fr);
				grid-column-gap:8px;
				margin-top: 30px;
				&>a{
					min-height: 41px;
					font-size: 14px;
					align-items:center;
					justify-content:center;
				}
			}
			& .top{
				& .payload{
					& .btn{
						&>a{
							display: inilne-flex;
							align-items:center;
							justify-content:center;
							font-size: 14px;
							line-height: 150%;
							font-weight: 500;
							color:#1C45C2;

						}
					}
					& .list__payload{
						margin-bottom: 24px;
						&>.elem{
							display: flex;
							align-items:center;
							justify-content:flex-start;
							margin-bottom: 12px;
							&:last-child{
								margin-bottom: 0px;
							}
							& .remove{
								margin-left: 16px;
								display: flex;
								align-items:center;
								justify-content:center;
								&>a{
									display: inline-flex;
									align-items:center;
									justify-content:center;
									min-width: 30px;
									max-width: 30px;
									min-height: 30px;
									max-height: 30px;
									border-radius: 4px;
									transition:.3s ease all;
									&:hover{
										background-color:rgba(240,82,82,0.15);
									}
								}
							}
							&>.group__input{
								margin-right: 24px;
								&>input{
									font-weight: 600;
									&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
									  color: #111928;
									}
									&::-moz-placeholder { /* Firefox 19+ */
									  color: #111928;
									}
									&:-ms-input-placeholder { /* IE 10+ */
									  color: #111928;
									}
									&:-moz-placeholder { /* Firefox 18- */
									  color: #111928;
									}
								}
							}
							&>.group__input , &>.group__dropdown{
								width: 100%;
							}
						}
					}
					&>h6{
						margin-top: 0px;
						margin-bottom: 12px;
						font-size: 18px;
						line-height: 150%;
						font-weight: 500;
						color:#111928;
					}
				}
				& .stages__details{
					margin-top: 32px;
					margin-bottom: 32px;
					&>.group__input{
						margin-bottom: 16px;
						&:last-child{
							margin-bottom: 0px;
						}
					}
					&>p{
						margin-top: 0px;
						margin-bottom: 16px;
						font-size: 16px;
						line-height: 150%;
						font-weight: 500;
						color:#111928;
					}
				}
				&>h6{
					margin-top: 0px;
					margin-bottom: 16px;
					font-size: 24px;
					line-height: 125%;
					font-weight: 600;
					color:#111928;
				}
				&>p{
					margin:0px;
					font-size: 16px;
					line-height: 150%;
					font-weight: 500;
					color:#6B7280;
				}
			}
		}
	}
}
.sms__picker{
	& .empty{
		&>p{
			margin:0px;
			font-size: 16px;
			line-height: 24px;
			color:#6B7280;
			font-weight: 500;
		}
	}
}
.sms__bottom{
	&>a{
		display: flex;
		align-items:center;
		justify-content:center;
		min-height: 41px;
		font-size: 14px;
		color:#1C45C2;
	}
}
.flow__dashboard{
	padding:32px 24px;
	& .contact__table{
		background-color:#fff;
		border-radius: 8px;
		border:1px solid #E5E7EB;
		margin-bottom: 20px;
		&:last-child{
			margin-bottom: 0px;
		}
		&>.top{
			display: flex;
			align-items:center;
			justify-content:space-between;
			padding:16px 20px;
			& .right{
				margin:0px;
				display: flex;
				align-items:center;
				justify-content:flex-end;
				&>.dropdown__filter{
					margin-right: 8px;
				}
			}
			& .left{

				&>p{
					margin:0px;
					font-size: 16px;
					line-height: 125%;
					font-weight: 600;
					color:#111928;
				}
			}
		}
	}
	&>.top{
		display: flex;
		flex-direction:column;
		align-items:flex-start;
		margin-bottom: 24px;
		&>h6{
			margin-top: 0px;
			margin-bottom: 8px;
			font-size: 28px;
			line-height: 125%;
			font-weight: 600;
			color:#111928;
		}
		&>p{
			margin:0px;
			font-size: 14px;
			line-height: 150%;
			font-weight: 400;
			color:#9CA3AF;
		}
	}
}
.flow__graph{
	width: 100%;
	margin-bottom: 20px;
	padding:20px;
	border-radius: 8px;
	border:1px solid #E5E7EB;
	background-color:#fff;
	& .items{
		display: flex;
		align-items:center;
		justify-content:flex-start;
		margin-left: -7px;
		margin-top: -7px;
		margin-bottom: 7px;
		&>.item{
			display: flex;
			align-items:center;
			justify-content:flex-start;
			margin:7px;
			&>p{
				margin:0px;
				font-size: 14px;
				line-height: 150%;
				font-weight: 400;
				color:#111928;
			}
			&>span{
				display: inline-flex;
				min-width: 16px;
				min-height: 4px;
				border-radius: 250px;
				margin-right: 9px;
			}
		}
	}
	& .top{
		display: flex;
		align-items:center;
		justify-content:space-between;
		margin-bottom: 10px;
		&>p{
			margin:0px;
			font-size: 16px;
			line-height: 125%;
			font-weight: 600;
			color:#111928;
		}
	}
	& .graph{
		width: 100%;
		& canvas{
			height: 400px!important;
			width: 100%;
		}
	}
}
.modal__side.modal__condition{
	&>.inner__modal{
		& .bottom{
			display: grid;
			grid-template-columns:repeat(2 ,1fr);
			grid-column-gap:8px;
			&>a{
				display: inline-flex;
				align-items:center;
				justify-content:center;
				min-height: 41px;
				font-size: 14px;
			}
		}
		&>.modal__box{
			max-width: 570px;
			& .condition__type{
				margin-top: 32px;
				& .radios{
					margin-top: 24px;
					& .container__radio{
						display: flex;
						align-items:center;
						justify-content:flex-start;
						margin-bottom: 15px;
						cursor:pointer;
						& p{
							font-size: 14px;
							line-height: 14px;
							color:#111928;
							font-weight: 500;
						}
						& span.radio{
							margin-right: 8px;
							position: relative;
							top:-1px;
						}
						&:last-child{
							margin-bottom: 0px;
						}
						& p{
							margin:0px;
						}
					}
				}
				&>p{
					margin-top: 0px;
					margin-bottom: 8px;
					font-size: 18px;
					line-height: 150%;
					font-weight: 500;
					color:#111928;
				}
				&>span{

					font-size: 16px;
					line-height: 24px;
					color:#4B5563;
					font-weight: 500;
					& span{
						font-weight: 600;
					}
				}
			}
			& .condition__criteria{
				margin-bottom: 32px;
				& .fields{
					margin-bottom: 24px;
					&>.field{
						display: flex;
						align-items:center;
						justify-content:space-between;
						& .btn{
							margin-left: 16px;
							&>a{
								display: inline-flex;
								align-items:center;
								justify-content:center;
								text-decoration: none;
								min-height: 30px;
								max-height: 30px;
								min-width: 30px;
								max-width: 30px;
								border-radius: 4px;
								transition:.3s ease all;
								&:hover{
									background-color:rgba(240,82,82,0.15);
								}
							}
						}
						&>.group__dropdown{
							min-width: 120px;
							max-width: 120px;
						}
						&>.group__input:nth-child(3){
							min-width: 120px;
							max-width: 120px;
						}
						&>.group__input:nth-child(1){
							min-width: 180px;
							max-width: 180px;
							&>input{
								font-weight: 600;
							}
						}
						& .spacer{
							min-height: 1px;
							width: 100%;
							background-color:#E5E7EB;
						}
					}
				}
				& .add{
					&>.outline-btn{
						padding-left: 20px;
						padding-right: 20px;
						min-height: 41px;
						font-size: 14px;
						line-height: 150%;
						font-weight: 500;
						color:#1C45C2;
					}
				}
				&>p{
					margin-top: 0px;
					margin-bottom: 12px;
					font-size: 18px;
					line-height: 150%;
					font-weight: 500;
					color:#111928;
				}
				&:last-child{
					margin-bottom: 0px;
				}
			}
			& .top{
				&>.group__input{
					margin-bottom: 24px;
				}
				&>h6{
					margin-top: 0px;
					margin-bottom: 24px;
					font-size: 24px;
					line-height: 125%;
					font-weight: 600;
					color:#111928;
				}
			}
		}
	}
}
.regular__element{
	min-width: 210px;
	padding:16px;
	background-color:#F9FAFB;
	border-radius: 8px;
	border:1px solid #E5E7EB;
	& .desc{
		&>p{
			margin:0px;
			font-size: 16px;
			line-height: 125%;
			font-weight: 600;
			color:#111928;
		}
	}
	&>.top{
		display: flex;
		align-items:center;
		justify-content:space-between;
		margin-bottom: 20px;

		& .left{
			display: inline-flex;
			align-items:center;
			justify-content:flex-start;
			&>p{
				margin:0px;
				display: flex;
				align-items:center;
				justify-content:flex-start;
				white-space: nowrap;
				font-size: 14px;
				line-height: 125%;
				font-weight: 600;
				&.delay{
					color:#FC512A;
				}
				&.condition{
					color:#EB903A;
				}
				&.campaign{
					color:#1C45C2;
				}
				&>span{
					display: inline-flex;
					margin-right: 8px;
				}
			}
		}
		&>.more{
			display: inline-flex;
			align-items:center;
			justify-content:center;
			&>a{
				min-width: 20px;
				max-width: 20px;
				min-height: 20px;
				max-height: 20px;
				display: inline-flex;
				align-items:center;
				justify-content:center;
			}
		}
	}
}
.regular__wrap{
	display: flex;
	align-items:center;
}
.regular__element{
	position: relative;
	z-index: 2;
}
.condition__middle .row{
	margin-top: auto;
	margin-bottom: auto;
}
.condition__bottom{
	display: flex;
	align-items:center!important;
}
.condition__triple .condition__yes .stick{
	top:auto;
	bottom:34px;
	left: -22px;
}
.condition__triple .condition__yes .stick:before{
	left: -21px;
	transform:rotate(90deg);
}
.condition__triple .condition__yes .stick:after{
	left: 1.5px;
	transform:rotate(90deg);
}
.condition__middle{
	display: flex;
	align-items:center;
	justify-content:flex-start;
}
.condition__triple .condition__no , .condition__triple .condition__yes{
	position: relative;
}
.condition__triple .condition__no  .stick{
	top:37px;
	left: -22px;
}
.condition__triple .stick{
	position: absolute;
	top:50%;
	height: calc(100% - 30px);
	left: 18px;
	width: 0.5px;
	background-color:#E5E7EB;
	border-top-left-radius: 20px;
	&:before{
		content:"";
		position: absolute;
		left: 0px;
		top:-20px;
		width: 21px;
		height: 21px;
		background-color:#fff;
		border-top:1px solid #E5E7EB;
		border-left: 1px solid #E5E7EB;
		border-top-left-radius: 10px;
	}
	&:after{
		content:"";
		position: absolute;
		right: 0px;
		bottom:-16px;
		width: 18px;
		height: 21px;
		background-color:#fff;
		border-bottom:1px solid #E5E7EB;
		border-right: 1px solid #E5E7EB;
		border-bottom-right-radius: 10px;
	}
}
.condition__top , .condition__bottom{
	display: flex;
	align-items:center;
	padding-left: 40px;
	position: relative;
	&>.row{
		display: flex;
		align-items:center;
		justify-content:flex-start;
	}
}
.spacer__long{
	min-width: 140px;
	min-height: 1px;
	background-color:#E5E7EB;
}
.condition__middle>.row{
	// min-height: 150px;
	margin:30px 0px;
}
.condition__middle .row{
	display: flex;
	align-items:center;
	justify-content:flex-start;
}
.condition__triple{
	position: relative;
}
.condition__yes{
	display: inline-flex;
	& span{
		font-size: 14px;
		line-height: 125%;
		font-weight: 600;
		color:#7CAA6F;
	}
	min-width: 41px;
	min-height: 35px;
	align-items:center;
	justify-content:center;
	border-radius: 8px;
	background-color: rgba(235,247,232,.8);
}
.condition__no{
	display: inline-flex;
	& span{
		font-size: 14px;
		line-height: 125%;
		font-weight: 600;
		color:#FC512A;
	}
	min-width: 35px;
	min-height: 35px;
	align-items:center;
	justify-content:center;
	border-radius: 8px;
	background-color: rgba(248,180,180,.4);
}
@media (max-width: 1280px){
	.criterias__wrapper .criteria__grid .elem{
		padding:15px;
	}
	.criterias__wrapper .criteria__grid{
		grid-column-gap:15px;
		grid-row-gap:15px;
		grid-template-columns:repeat(3 ,1fr);
	}
}
@media (max-width: 991px){
	.flow__graph{
		padding:15px;
	}
	.flow__graph .graph canvas{
		height: 300px!important;
	}
	.criterias__wrapper>.head{
		padding:15px;
	}
	.criterias__wrapper .criteria__grid{
		grid-template-columns:repeat(2 ,1fr);
	}
	.criterias__wrapper .criteria__box{
		padding:15px;
		min-height: 240px;
	}
	.enroll__audience>h6{
		font-size: 24px;
		margin-bottom: 15px;
	}
	.show__data .dropdown__check{
		width: 100%;
	}
	.flows__wrapper>.top>h6{
		font-size: 24px;
	}
	.flows__wrapper .flows__table{
		margin-top: 15px;
	}
	.create__flow>h6{
		margin-bottom: 20px;
		font-size: 24px;
	}
	.create__flow{
		padding:20px 15px;
	}
	.create__flow .controls ,  .enroll__audience .controls{
		margin-top: 15px;
	}
	.create__flow .first__step--flow{
		padding:15px;
	}
	.create__flow .first__step--flow>p{
		font-size: 14px;
		line-height: 125%;
		margin-bottom: 12px;
	}
}
@media (max-width: 767px){
	.flow__graph .top{
		flex-direction:column;
		&>p{
			width: 100%;
			margin-bottom: 10px;
		}
		&>.group__dropdown{
			width: 100%;
			&>a{
				width: 100%;
			}
		}
	}
	.flow__dashboard .contact__table>.top{

		flex-direction:column;
		&>.left{
			width: 100%;
			margin-bottom: 10px;
		}

	}
	.flow__dashboard .contact__table>.top .right{
		flex-direction:column;
		width: 100%;
		&>.dropdown__filter{
			width: 100%;
			margin-right: 0px;
			margin-bottom: 10px;
			&>.group__dropdown>a{
				width: 100%;
			}
		}
		&>a{
			width: 100%;
		}
	}
	.modal__side.add__action--popup .top>h6{
		margin-bottom: 15px;
	}
	.modal__side.add__action--popup .top .action__picker>p{
		margin-bottom: 12px;
	}
	.modal__side.add__action--popup .top .action__picker{
		margin-bottom: 15px;
	}
	.modal__side.add__action--popup .top .template__picker>p{
		margin-bottom: 10px;
	}
	.modal__side.add__action--popup .top .template__picker>.group__input{
		margin-bottom: 15px;
	}
	.enroll__audience{
		padding:20px 15px;
	}
	.create__flow .first__step--flow .double{
		grid-template-columns:1fr;
		grid-row-gap:10px;
	}
	.create__flow>h6{
		margin-bottom: 12px;
	}
	.flow__progress .flow__elements .elem>p{
		font-size: 12px;
	}
	.flow__progress .flow__elements .elem:nth-child(1){
		margin-left: 15px;
	}
	.flow__progress .flow__elements .elem:nth-child(4){
		margin-right: 15px;
	}
	.flow__progress{
		margin-top: -2px;
	}
	.flows__wrapper{
		padding:20px 15px;
	}
	.flows__wrapper .flows__table>.top{
		flex-direction:column;
	}
	.flows__wrapper .flows__table>.top .group__input{
		max-width: 100%;
		width: 100%;
		margin-bottom: 10px;
	}
	.flows__wrapper .flows__table>.top .show__data{
		max-width: 100%;
	}
	.flow__graph .items>.item>p{
		font-size: 12px;
	}
	.flow__graph .items>.item{
		margin:3px 4px;
	}
	.flow__graph .items{
		margin-left: -4px;
		margin-top: -4px;
	}
}
.flow__graph .items{
	flex-wrap:wrap;
}
@media (max-width: 640px){
	.criterias__wrapper .criteria__grid{
		grid-template-columns:1fr;
	}
	.flow__progress .flow__elements .elem>p{
		max-width: 90px;
		text-align:center;
		line-height: 15px;
	}
	.flow__progress .flow__elements .elem:before{
		top:-13px;
	}
	.flow__progress .flow__elements .elem>p{
		min-height: 30px;
		display: flex;
		align-items:center;
		justify-content:center;
	}
}
@media (max-width: 540px){
	.modal__side.modal__condition>.inner__modal>.modal__box .condition__criteria .fields>.field{
		flex-direction:column;
	}
	.modal__side.modal__condition>.inner__modal>.modal__box .condition__criteria .fields>.field .spacer{
		min-height: 15px;
		width: 1px;
	}
	.modal__side.modal__condition>.inner__modal>.modal__box .condition__criteria .fields>.field>.group__input:nth-child(1) , .modal__side.modal__condition>.inner__modal>.modal__box .condition__criteria .fields>.field>.group__input:nth-child(3) , .modal__side.modal__condition>.inner__modal>.modal__box .condition__criteria .fields>.field>.group__dropdown{
		min-width: 0px;
		max-width: 100%;
		width: 100%;
	}
	.modal__side.modal__condition>.inner__modal>.modal__box .condition__criteria .fields>.field>.group__dropdown{
		width: calc(100% - 45px);
		margin-right: auto;
	}
	.modal__side.modal__condition>.inner__modal>.modal__box .condition__criteria .fields>.field {
		position: relative;
	}
	.modal__side.modal__condition>.inner__modal>.modal__box .condition__criteria .fields>.field .btn{
		position: absolute;
		right: 0px;
		bottom:7px;
	}
}
@media (max-width: 480px){
	.modal__side.add__action--popup .top .template__picker .template__list .elem .media{
		margin-right: 7px;
	}
	.modal__side.add__action--popup .top .template__picker .template__list .elem{
		padding:8px;
	}
	.modal__side.add__delay--popup .top .next__action .field{
		flex-direction:column;
	}
	.modal__side.add__delay--popup .top .next__action .field>.group__input{
		margin-right: 0px!important;
		margin-bottom: 10px!important;
		min-width: 0px!important;
		max-width: 100%!important;
		width: 100%!important;
		&:last-child{
			margin-bottom: 0px!important;
		}
	}
	.modal__side.webhook .inner__modal .modal__box .top .payload .list__payload>.elem{
		flex-direction:column;
	}
	.modal__side.webhook .inner__modal .modal__box .top .payload .list__payload>.elem>.group__input{
		margin-right: 0px;
		margin-bottom: 10px;
	}
	.modal__side.webhook .inner__modal .modal__box .top .payload .list__payload>.elem{
		position: relative;
		& .remove{
			position: absolute;
			right: 0px;
			bottom:6px;
		}
	}
	.modal__side.webhook .inner__modal .modal__box .top .payload .list__payload>.elem>.group__dropdown{
		width: calc(100% - 40px);
		margin-right: auto;
	}
	.create__flow .controls ,  .enroll__audience .controls{
		flex-direction:column;
	}
	.create__flow .controls>.cancel-btn  ,.enroll__audience .controls>.cancel-btn{
		width: 100%;
		margin-bottom: 10px;
	}
	.create__flow .controls .right__part , .enroll__audience .controls .right__part{
		width: 100%;
	}
	.create__flow .controls .right__part>.ongoing__button , .enroll__audience .controls .right__part>.ongoing__button{
		min-width: 74px;
	}
	.create__flow .controls .right__part>.regular-btn  , .enroll__audience .controls .right__part>.regular-btn{
		width: calc(100% - 90px);
	}
	.flow__progress .flow__elements .elem>p{
		max-width: 70px;
	}
	.flow__progress .flow__elements .elem>p{
		font-size: 10px;
		line-height: 12px;
	}
	.flow__progress .flow__elements .elem:nth-child(1){
		margin-left: 10px;
	}
	.flow__progress .flow__elements .elem:nth-child(4){
		margin-right: 10px;
	}
}