.integration__wrapper{
	padding:32px 24px;
	& .head{
		display: flex;
		align-items:center;
		margin-bottom: 24px;
		justify-content:space-between;
		&>h6{
			margin-top: 0px;
			margin-bottom: 0px;
			font-size: 28px;
			line-height: 125%;
			font-weight: 600;
			color:#111928;
		}
		&>a{
			display: inline-flex;
			align-items:center;
			justify-content:center;
			& span{
				display: inline-flex;
				margin-right: 8px;
			}
		}
	}
	& .integration__plates{
		display: grid;
		grid-template-columns:repeat(4 ,1fr);
		grid-column-gap:20px;
		grid-row-gap:24px;
		&>.elem{
			padding:16px;
			border-radius: 9px;
			background-color:#fff;
			padding-bottom: 70px;
			position: relative;
			& .bottom{
				position: absolute;
				left: 16px;
				bottom:16px;
				width: calc(100% - 32px);
				&>a{
					width: 100%;
					font-size: 14px;
					line-height: 150%;
					font-weight: 500;
					height: 37px;
					display: inline-flex;
					align-items:center;
					text-decoration: none;
					justify-content:center;
				}
			}
			border:1px solid #E5E7EB;
			& .desc{
				&>p{
					margin-top: 0px;
					margin-bottom: 4px;
					font-size: 14px;
					line-height: 150%;
					font-weight: 400;
					color:#4B5563;
					& span{
						font-weight: 500;
						color:#111928;
					}
					&:last-child{
						margin-bottom: 0px;
					}
				}
			}
			&>.top{
				display: flex;
				align-items:center;
				margin-bottom: 16px;
				justify-content:flex-start;
				&>p{
					margin:0px;
					font-size: 16px;
					line-height: 150%;
					font-weight: 600;
					color:#000000;
				}
				&.border{
					& span img{
						border:1px solid #E5E7EB;
					}
				}
				& span{
					margin-right: 16px;
					display: inline-flex;
					align-items:center;
					justify-content:center;
					& img{
						min-width: 40px;
						max-width: 40px;
						border-radius: 10px;
					}
				}
			}
		}
	}
}
.add__integration{
	padding:32px 24px;
	&>h6{
		margin-top: 0px;
		margin-bottom: 35px;
		font-size: 28px;
		line-height: 125%;
		color:#111928;
		font-weight: 600;
	}
	& .templates__list{
		display: flex;
		justify-content:space-between;
		& .find__template{
			min-width: 225px;
			max-width: 225px;
			& form{
				width: 100%;
				& .categories__list{
					&>h6{
						margin-top: 0px;
						margin-bottom: 24px;
						font-size: 18px;
						line-height: 150%;
						font-weight: 600;
						color:#111928;
					}
					& ul{
						padding:0px;
						list-style-type: none;
						margin:0px;
						&>li{
							margin-bottom: 4px;
							&>a{
								display: flex;
								align-items:center;
								justify-content:flex-start;
								padding:8px 12px;
								border-radius: 8px;
								text-decoration: none;
								font-size: 14px;
								line-height: 150%;
								font-weight: 500;
								color:#1F2A37;
								&.current{
									background-color:rgba(229,231,235,.5);
								}
								transition:.3s ease all;
								&:hover{
									background-color:rgba(229,231,235,.5);
								}
							}
							&:last-child{
								margin-bottom: 0px;
							}
						}
					}
				}
				&>.group__input{
					position: relative;
					margin-bottom: 24px;
					&>input{
						width: 100%;
						height: 37px;
						border-radius: 8px;
						border:1px solid #E5E7EB;
						background-color:#F9FAFB;
						padding-left: 34px;
						padding-right: 15px;
					}
					& span{
						position: absolute;
						display: inline-flex;
						top:50%;
						transform:translateY(-50%);
						align-items:center;
						justify-content:center;
						left: 12px;
						& img{
							max-width: 12px;
						}
					}
				}
			}
		}
		& .grid{
			width: 100%;
			margin-right: 35px;
			display: grid;
			grid-template-columns:repeat(3, 1fr);
			grid-column-gap:20px;
			grid-row-gap:20px;
			&>a{
				display: flex;
				flex-direction:column;
				align-items:flex-start;
				padding:16px;
				background-color:#fff;
				border-radius: 9px;
				text-decoration: none;
				transition:.3s ease all;
				&:hover{
					box-shadow:0px 4px 6px rgba(0,0,0,.1);
				}
				border:1px solid #E5E7EB;
				&>p{
					margin:0px;
					font-size: 14px;
					line-height: 150%;
					font-weight: 400;
					color:#111928;
				}
				& .top{
					display: flex;
					align-items:center;
					justify-content:flex-start;
					margin-bottom: 16px;
					&>p{
						margin:0px;
						font-size: 16px;
						line-height: 150%;
						font-weight: 600;
						color:#000000;
					}
					& .media{
						display: inline-flex;
						align-items:center;
						justify-content:center;
						&.border{
							&>span{
								border:1px solid #E5E7EB;
							}
						}
						&>span{
							display: inline-flex;
							align-items:center;
							justify-content:center;
							min-width: 40px;
							max-width: 40px;
							min-height: 40px;
							max-height: 40px;
							border-radius: 10px;
							overflow:hidden;
							margin-right: 16px;
							& img{
								&.not__full{
									max-width: 24px;
								}
								max-width: 100%;
								max-height: 100%;
							}
						}
					}
				}
			}
		}
	}
	& .back__btn{
		display: flex;
		align-items:center;
		margin-bottom: 24px;
		justify-content:flex-start;
		&>a{
			display: inline-flex;
			align-items:center;
			justify-content:flex-start;
			font-size: 14px;
			line-height: 130%;
			font-weight: 500;
			color:#4B5563;
			text-decoration: none;
			transition:.3s ease all;
			&:hover{
				opacity:.7;
			}
			& span{
				display: inline-flex;
				margin-right: 12px;
			}
		}
	}
}
.add__integration .templates__list .grid>a .top .media>span img.not__full{
	max-width: 24px;
	max-height: auto;
	width: auto;
	height: auto;
}
.add__integration .templates__list .grid>a .top .media>span img{
	width: 100%;
	height: 100%;
	object-fit:cover;
}
.integration__details{
	padding:32px 24px;
	& .box{
		max-width: 930px;
		margin-left: auto;
		margin-right: auto;
		& .details{
			padding:26px 24px;
			padding-bottom: 25px;
			border:1px solid #E5E7EB;
			border-radius: 9px;
			background-color:#fff;
			& .desc{
				&>.elem{
					margin-bottom: 24px;
					&>h6{
						margin-top: 0px;
						margin-bottom: 8px;
						font-size: 18px;
						line-height: 150%;
						font-weight: 600;
						color:#111928;
					}
					&>p{
						font-size: 14px;
						line-height: 150%;
						font-weight: 400;
						color:#111928;
						margin-top: 0px;
						margin-bottom: 15px;
						&:last-child{
							margin-bottom: 0px;
						}
					}
					&:last-child{
						margin-bottom: 0px;
					}
				}
			}
			& .medias{
				display: grid;
				grid-template-columns:repeat(2 ,1fr);
				grid-column-gap:10px;
				margin-bottom: 24px;
				& .media{
					display: flex;
					align-items:center;
					justify-content:center;
					&>img{
						max-width: 100%;
						max-height: 100%;
						object-fit:cover;
						border-radius: 8px;
					}
				}
			}
			& .top__part{
				display: flex;
				align-items:center;
				justify-content:space-between;
				margin-bottom: 24px;
				& .right{
					display: inline-flex;
					&>a{
						min-height: 41px;
						min-width: 0px;
						padding-left: 20px;
						padding-right: 20px;
						font-size: 14px;
					}
				}
				&>.left{
					display: flex;
					align-items:center;
					justify-content:flex-start;
					&>.elem{
						display: flex;
						flex-direction:column;
						align-items:flex-start;
						margin-right: 53px;
						&>span{
							display: block;
							margin-bottom: 3px;
							font-size: 14px;
							line-height: 150%;
							font-weight: 500;
							color:#6B7280;
						}
						&>p{
							margin:0px;
							font-size: 14px;
							line-height: 150%;
							font-weight: 400;
							color:#111928;
						}
						&:last-child{
							margin-right: 0px;
						}
					}
				}
			}
		}
		& .integration__title{
			display: flex;
			align-items:center;
			justify-content:flex-start;
			margin-bottom: 24px;
			& .desc{
				display: flex;
				flex-direction:column;
				align-items:flex-start;
				&>p{
					margin-top: 0px;
					margin-bottom: 0px;
					font-size: 20px;
					line-height: 150%;
					font-weight: 600;
					color:#000000;
				}
				&>span{
					font-size: 14px;
					line-height: 150%;
					font-weight: 400;
					color:#111928;
				}
			}
			&>.media{
				display: inline-flex;
				align-items:center;
				justify-content:center;
				min-width: 48px;
				max-width: 48px;
				min-height: 48px;
				max-height: 48px;
				border-radius: 10px;
				background-color:#fff;
				margin-right: 16px;
				& img{
					width: 100%;
					height: 100%;
					object-fit:cover;
					&.not__full{
						max-width: 28px;
						max-height: 28px;
					}
				}
				&.border{
					border:1px solid #E5E7EB;
				}
			}
		}
		& .back{
			display: flex;
			align-items:center;
			margin-bottom: 24px;
			justify-content:flex-start;
			&>a{
				display: inline-flex;
				align-items:center;
				justify-content:flex-start;
				font-size: 14px;
				line-height: 130%;
				font-weight: 500;
				color:#4B5563;
				text-decoration: none;
				transition:.3s ease all;
				&:hover{
					opacity:.7;
				}
				& span{
					display: inline-flex;
					margin-right: 12px;
				}
			}
		}
	}
}

.integration__details .box .details .top__part>.left{
	margin-right: 15px;
}
.integration__details .box .details .top__part>.left>.elem>p{
	word-break:break-all;
}
@media (max-width: 1200px){
	.add__integration .templates__list .grid{
		grid-template-columns:repeat(2 ,1fr);
	}
	.integration__wrapper .integration__plates{
		grid-template-columns:repeat(3 ,1fr);
	}
}
@media (max-width: 991px){
	.integration__details .box .details .top__part>.left>.elem{
		margin-right: 30px;
	}
	.add__integration .templates__list{
		flex-direction:column-reverse;
	}
	.add__integration .templates__list .find__template{
		min-width: 100%;
		max-width: 100%;
		margin-bottom: 25px;
	}
	.add__integration .templates__list .find__template form .categories__list>h6{
		margin-bottom: 10px;
	}
	.add__integration .templates__list .find__template form>.group__input{
		margin-bottom: 12px;
	}
	.add__integration .templates__list .find__template form .categories__list ul{
		max-height: 160px;
		overflow-y:auto;
		&::-webkit-scrollbar {
		  width: 6px;
		}
		 
		&::-webkit-scrollbar-track {

		}
		 
		&::-webkit-scrollbar-thumb {
			border-radius: 250px;
		  background-color:rgb(28,69,194);
		}
	}
	.add__integration>h6{
		margin-bottom: 20px;
		font-size: 24px;
	}
	.add__integration .back__btn{
		margin-bottom: 15px;
	}
	.add__integration .templates__list .grid{
		margin-right: 25px;
	}
	.integration__wrapper .integration__plates{
		grid-template-columns:repeat(2 ,1fr);
		grid-row-gap:16px;
		grid-column-gap:16px;
	}
	.integration__wrapper .head>h6{
		font-size: 24px;
	}
	.integration__wrapper .head{
		margin-bottom: 20px;
	}
	.add__integration .templates__list .grid{
		margin-right: 0px;
	}
	.integration__details .box .back{
		margin-bottom: 20px;
	}
	.integration__details .box .integration__title{
		margin-bottom: 20px;
	}
	.integration__details .box .details .top__part{
		margin-bottom: 20px;
	}
}
.integration__details .box .details .medias .media img{
	width: 100%;
}
@media (max-width: 767px){
	.integration__details .box .details .desc>.elem{
		margin-bottom: 15px;
	}
	.integration__details .box .details .top__part{
		flex-direction:column;
	}
	.integration__details .box .details .top__part .right{
		width: 100%;
		margin-top: 10px;
		&>a{
			width: 100%;
		}
	}
	.integration__details .box .details .top__part>.left{
		width: 100%;
		margin-right: 0px;
		margin-right: 0px;
	}
	.integration__details .box .details{
		padding:15px;
	}
	.integration__details .box .details .medias{
		margin-bottom: 15px;
		grid-template-columns:1fr;
		grid-row-gap:12px;
	}
	.integration__details{
		padding:20px 15px;
	}
	.add__integration .templates__list .grid{
		grid-column-gap:15px;
		grid-row-gap:15px;
	}
	.add__integration{
		padding:20px 15px;
	}
	.add__integration .templates__list .find__template{
		margin-bottom: 15px;
	}
	.integration__wrapper{
		padding:20px 15px;
	}
}
@media (max-width: 640px){
	.integration__details .box .integration__title{
		flex-direction:column;
		align-items:flex-start;
	}
	.integration__details .box .integration__title>.media{
		margin-right: 0px;
		margin-bottom: 10px;
	}
	.integration__details .box .details .top__part>.left{
		flex-direction:column;
		align-items:flex-start;
	}
	.integration__details .box .details .top__part>.left>.elem{
		margin-right: 0px;
		margin-bottom: 12px;
		&:last-child{
			margin-bottom: 0px;
		}
	}
	.add__integration .templates__list .grid{
		grid-template-columns:1fr;
	}
	.integration__wrapper .integration__plates{
		grid-template-columns:1fr;
	}
	.integration__wrapper .head{
		flex-direction:column;
		align-items:flex-start;

		&>a{
			width: 100%;
		}
		&>h6{
			margin-bottom: 10px;
		}
	}
}