.upgrade__plan{
	padding:32px 24px;
	&>h6{
		margin-top: 0px;
		margin-bottom: 24px;
		font-size: 28px;
		line-height: 125%;
		font-weight: 600;
		color:#111928;
	}
	& .upgrade__wrapper{
		display: flex;
		align-items:flex-start;
		justify-content:space-between;
		&>.upgrade__main{
			width: 100%;
			margin-right: 20px;
			&>.box{
				padding:24px;
				border:1px solid #E5E7EB;
				border-radius: 8px;
				background-color:#fff;
				margin-bottom: 20px;
				& .details{
					margin-top: 16px;
					padding-left: 31px;
					padding-bottom: 12px;
					display: none;
					& .details__grid{
						display: grid;
						grid-template-columns:repeat(2 ,1fr);
						grid-column-gap:90px;
						grid-row-gap:20px;
						& .el{
							& .radio{
								position: relative;
								margin-top: 3px;
								margin-right: 12px;
							}
							& .inf{
								display: flex;
								flex-direction:column;
								align-items:flex-start;
								&>p{
									margin-top: 0px;
									margin-bottom: 3px;
									font-size: 14px;
									line-height: 150%;
									font-weight: 500;
									color:#111928;
								}
								&>span{
									font-size: 16px;
									line-height: 24px;
									color:#4B5563;
									font-weight: 400;
								}
							}
						}
					}
				}
				&.options{
					& .elem__option{
						margin-bottom: 12px;
						& label{
							font-weight: 500;
						}
						&:last-child{
							margin-bottom: 0px;
						}
					}
				}
				& .billing__form{
					& .controls{
						display: flex;
						flex-direction:column;
						align-items:center;
						justify-content:center;
						margin-top: 32px;
						&>p{
							margin-top: 24px;
							margin-bottom: 0px;
							font-size: 14px;
							line-height: 150%;
							font-weight: 500;
							color:#4B5563;
						}
						&>button{
							width: 100%;
							font-size: 14px;
							min-height: 41px;
						}
					}
					& .card__info{
						width: 100%;
						&>.group__dropdown{
							margin-bottom: 8px;
						}
						& .add__card{
							display: flex;
							justify-content:flex-end;
							align-items:center;
							&>a{
								display: inline-flex;
								align-items:center;
								justify-content:center;
								text-decoration: none;
								font-size: 13px;
								line-height: 130%;
								font-weight: 500;
								color:#1C45C2;
								transition:.3s ease all;
								&:hover{
									opacity:.7;
								}
							}
						}
					}
				}
				& .option__picker{
					display: grid;
					grid-template-columns:repeat(2 ,1fr);
					grid-column-gap:20px;
					grid-row-gap:20px;
					&>a{
						display: flex;
						flex-direction:column;
						align-items:flex-start;
						text-decoration: none;
						padding:16px;
						border:1px solid #E5E7EB;
						border-radius: 8px;
						& .before{
							padding-right: 4px;
						}
						&.current{
							border:2px solid #1C45C2;
						}
						& .name{
							display: inline-flex;
							font-size: 14px;
							line-height: 150%;
							font-weight: 500;
							color:#111928;
						}
						&>p{
							margin-top: 16px;
							margin-bottom: 0px;
							font-size: 14px;
							line-height: 150%;
							font-weight: 400;
							color:#4B5563;
						}
						& .price{
							display: flex;
							align-items:center;
							justify-content:flex-start;
							& span{

								font-size: 12px;
								line-height: 150%;
								font-weight: 400;
								color:#4B5563;
							}
							font-size: 24px;
							line-height: 150%;
							color:#111928;
							font-weight: bold;
						}
					}
				}
				&>.top{
					display: flex;
					justify-content:space-between;
					margin-bottom: 24px;
					padding-bottom: 24px;
					border-bottom: 1px solid #E5E7EB;
					&>p{
						margin:0px;
						font-size: 16px;
						line-height: 125%;
						font-weight: 600;
						color:#111928;
					}
					&>a{
						display: inline-flex;
						text-decoration: none;
						font-size: 16px;
						line-height: 125%;
						font-weight: 500;
						color:#1C45C2;
					}
				}
				&:last-child{
					margin-bottom: 0px;
				}
			}
		}
		&>.upgrade__subscription{
			&  .fields{
				&>.field{
					margin-bottom: 24px;
					& .bottom{
						margin-top: -20px;
						&>p{
							margin:0px;
							margin-top: 15px;
							font-size: 13px;
							line-height: 130%;
							font-weight: 400;
							color:#4B5563;
						}
					}
					&>.top{
						display: flex;
						align-items:center;
						justify-content:space-between;
						margin-bottom: 15px;
						&>input{
							height: 29px;
							border:0px;
							border-bottom:2px solid #E5E7EB;
							font-size: 14px;
							line-height: 150%;
							font-weight: 400;
							color:#111928;
							width: 85px;
						}
						&>p{
							margin:0px;
							font-size: 14px;
							line-height: 150%;
							font-weight: 500;
							color:#111928;
						}
					}
					&:last-child{
						margin-bottom: 0px;
					}
				}
			}
			min-width: 370px;
			max-width: 370px;
			padding:24px;
			border-radius: 8px;
			border:1px solid #E5E7EB;
			background-color:#fff;
			& .total__wrapper{
				margin-top: 24px;
				& .total{
					display: flex;
					align-items:center;
					justify-content:space-between;
					padding-top: 24px;
					margin-top: 24px;
					border-top:1px solid #E5E7EB;
					&>p{
						margin:0px;
						font-size: 18px;
						line-height: 27px;
						font-weight: 600;
						color:#111928;
					}
					&>span{
						display: block;
						margin-right: 12px;
						font-size: 14px;
						line-height: 150%;
						font-weight: 600;
						color:#111928;
					}
				}
				& .list{

					&>.elem{
						display: flex;
						align-items:center;
						justify-content:space-between;
						margin-bottom: 15px;
						&>span{
							font-size: 14px;
							line-height: 150%;
							font-weight: 500;
							color:#111928;
							display: block;
							margin-right: 15px;
						}
						&>p{
							margin:0px;
							font-size: 14px;
							line-height: 150%;
							font-weight: 500;
							color:#111928;
						}
					}
				}
			}
			&>.title{
				padding-bottom: 24px;
				margin-bottom: 24px;
				border-bottom:1px solid #E5E7EB;
				&>p{
					margin:0px;
					font-size: 16px;
					line-height: 125%;
					font-weight: 600;
					color:#111928;
				}
			}
		}
	}
}
@media (max-width: 1200px){
	.upgrade__plan .upgrade__wrapper{
		flex-direction:column;
	}
	.upgrade__plan .upgrade__wrapper>.upgrade__subscription{
		min-width: 0px;
		max-width: 100%;
		width: 100%;
		margin-top: 24px;
	}
	.upgrade__plan .upgrade__wrapper>.upgrade__main{
		margin-right: 0px;
	}
}
@media (max-width: 991px){
	.upgrade__plan .upgrade__wrapper>.upgrade__main>.box , .upgrade__plan .upgrade__wrapper>.upgrade__subscription{
		padding:16px;
	}
	.upgrade__plan .upgrade__wrapper>.upgrade__subscription>.title , .upgrade__plan .upgrade__wrapper>.upgrade__main>.box>.top{
		padding-bottom: 16px;
		margin-bottom: 16px;
	}
	.upgrade__plan>h6{
		font-size: 24px;
		margin-bottom: 15px;
	}
}
.upgrade__plan .upgrade__wrapper>.upgrade__main>.box .billing__form .controls>p{
	width: 100%;
	text-align: center;
}
@media (max-width: 767px){
	.upgrade__plan{
		padding:20px 15px;
	}
	.upgrade__plan .upgrade__wrapper>.upgrade__main>.box .option__picker{
		grid-template-columns:1fr;
	}
	.upgrade__plan .upgrade__wrapper>.upgrade__main>.box .option__picker>a .price{
		font-size: 20px;
	}
	.upgrade__plan .upgrade__wrapper>.upgrade__main>.box .details .details__grid{
		grid-template-columns:1fr;
	}
}