/* Биллинг */
.billing h1, h2 {
	/*text-align: center;*/
}

.billing h2 {
	margin-top: 2em;
}

.month_annualy {
	margin-bottom: 2em;
}

.billing .current {
	color: #888;
	margin: 1em 0;
	font-size: 14px;
	text-align: center;
}

.billhead {
	text-align: center;
}

.btn_period {
	background: transparent;
	border: 0;
	z-index: 1;
	padding: 10px 20px;
	cursor: pointer;
	font-size: 15px;
	transition: all .3s ease;
	font-weight: 500;
	color: #888;
}

.btn_period:hover {
	color: #000;
}


.btn_period.active {
	color: #0088cc;
}

.btn_period > span {
	display: inline-block;
	transform: translate(5px, -5px);
	font-size: 10px;
	color: #0088cc;
}

	.btn_period.active > span {
		color: red;
	}

.highlight {
	background: #fff;
    --width: calc(100% / var(--items));
    position: absolute;
    z-index: 0;
    width: var(--width);
    height: 100%;
    
    border-radius: 7px;
    -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 0 0 rgb(0 0 0 / 5%);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 0 0 rgb(0 0 0 / 5%);
    -webkit-transform: translateX(calc(100% * var(--item-active)));
    transform: translateX(calc(100% * var(--item-active)));
    -webkit-transition: transform .6s cubic-bezier(.2,1,.2,1);
    transition: transform .6s cubic-bezier(.2,1,.2,1);
}

.period-out {
	display: inline-block;
	background-color: #eee;
	padding: 5px;
	border-radius: 10px;
	margin-bottom: 2em;
}

.period {
    position: relative;
    display: inline-grid;
    cursor: pointer;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    outline: none;
    -webkit-transition: background .24s;
    transition: background .24s;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    --items:2
}


.plans-out, .details {
	overflow-x: scroll;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
	width: calc(100vw - 280px - 60px);
	max-width: 1100px;
}

	.pricing .plans-out, .pricing .details {
		width: calc(100vw - 40px);
		max-width: 1140px;
	}

		.plans {
			background-color: #fff;
			border-radius: 10px;
			min-width: 850px;
		}

		.stroke {
			min-width: 715px;
		}

	.plans .minidesc {
		display: flex;
		flex-direction: column-reverse;
		justify-content: center;
	}

	.plans ul {
		padding: .5em 1.5em;
		margin: 0;
	}

	.plans ul li {
		list-style: none;
		margin: 0 0 .15em;
		padding: 10px 0 0 35px;
		min-height: 24px;
		background-repeat: no-repeat;
		background-position: 0 center;
	}

		.plans ul li.trial {
			background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='%23a4caff' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' x='0' y='0' viewBox='0 0 24 24' style='enable-background:new 0 0 512 512' xml:space='preserve'%3E%3Cpath d='m19 5h-1v-2a1 1 0 0 0 -2 0v2h-8v-2a1 1 0 0 0 -2 0v2h-1a3 3 0 0 0 -3 3v1h20v-1a3 3 0 0 0 -3-3z' /%3E%3Cpath d='m2 19a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-8h-20z' /%3E%3C/svg%3E");
		}

		.plans ul li.upgrade {
			background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='%23a4caff' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' x='0' y='0' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512' xml:space='preserve'%3E%3Cpath d='M256,0C114.512,0,0,114.497,0,256c0,141.488,114.497,256,256,256c141.488,0,256-114.497,256-256 C512,114.512,397.503,0,256,0z M351.276,274.753h-47.917v101.688c0,9.425-7.641,17.067-17.067,17.067h-60.584 c-9.425,0-17.067-7.641-17.067-17.067V274.753h-47.918c-14.214,0-22.165-16.4-13.456-27.565l95.276-122.128 c6.836-8.761,20.093-8.742,26.913,0l95.276,122.128C373.444,258.355,365.49,274.753,351.276,274.753z' /%3E%3C/svg%3E");
		}

		.plans ul li.stop {
			background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='%23a4caff' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' x='0' y='0' viewBox='0 0 409.6 409.6' style='enable-background:new 0 0 512 512' xml:space='preserve'%3E%3Cpath d='M204.8,0C91.648,0,0,91.648,0,204.8s91.648,204.8,204.8,204.8s204.8-91.648,204.8-204.8S317.952,0,204.8,0z M182.272,256 c0,12.8-10.24,22.528-22.528,22.528c-12.8,0-22.528-10.24-22.528-22.528V153.6c-0.512-12.288,9.728-22.528,22.016-22.528 c12.8,0,23.04,10.24,23.04,22.528V256z M272.896,256c0,12.8-10.24,22.528-22.528,22.528c-12.8,0-22.528-10.24-22.528-22.528V153.6 c-0.512-12.288,9.728-22.528,22.016-22.528c12.8,0,23.04,10.24,23.04,22.528V256z' /%3E%3C/svg%3E");
		}

		.plans ul li.discount {
			font-weight: 500;
			background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='%234394ff' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' x='0' y='0' viewBox='0 0 512.003 512.003' style='enable-background:new 0 0 512 512' xml:space='preserve'%3E%3Cpath d='M477.958,262.633c-2.06-4.215-2.06-9.049,0-13.263l19.096-39.065c10.632-21.751,2.208-47.676-19.178-59.023l-38.41-20.38 c-4.144-2.198-6.985-6.11-7.796-10.729l-7.512-42.829c-4.183-23.846-26.241-39.87-50.208-36.479l-43.053,6.09 c-4.647,0.656-9.242-0.838-12.613-4.099l-31.251-30.232c-17.401-16.834-44.661-16.835-62.061,0L193.72,42.859 c-3.372,3.262-7.967,4.753-12.613,4.099l-43.053-6.09c-23.975-3.393-46.025,12.633-50.208,36.479l-7.512,42.827 c-0.811,4.62-3.652,8.531-7.795,10.73l-38.41,20.38c-21.386,11.346-29.81,37.273-19.178,59.024l19.095,39.064 c2.06,4.215,2.06,9.049,0,13.263l-19.096,39.064c-10.632,21.751-2.208,47.676,19.178,59.023l38.41,20.38 c4.144,2.198,6.985,6.11,7.796,10.729l7.512,42.829c3.808,21.708,22.422,36.932,43.815,36.93c2.107,0,4.245-0.148,6.394-0.452 l43.053-6.09c4.643-0.659,9.241,0.838,12.613,4.099l31.251,30.232c8.702,8.418,19.864,12.626,31.03,12.625 c11.163-0.001,22.332-4.209,31.03-12.625l31.252-30.232c3.372-3.261,7.968-4.751,12.613-4.099l43.053,6.09 c23.978,3.392,46.025-12.633,50.208-36.479l7.513-42.827c0.811-4.62,3.652-8.531,7.795-10.73l38.41-20.38 c21.386-11.346,29.81-37.273,19.178-59.024L477.958,262.633z M196.941,123.116c29.852,0,54.139,24.287,54.139,54.139 s-24.287,54.139-54.139,54.139s-54.139-24.287-54.139-54.139S167.089,123.116,196.941,123.116z M168.997,363.886 c-2.883,2.883-6.662,4.325-10.44,4.325s-7.558-1.441-10.44-4.325c-5.766-5.766-5.766-15.115,0-20.881l194.889-194.889 c5.765-5.766,15.115-5.766,20.881,0c5.766,5.766,5.766,15.115,0,20.881L168.997,363.886z M315.061,388.888 c-29.852,0-54.139-24.287-54.139-54.139s24.287-54.139,54.139-54.139c29.852,0,54.139,24.287,54.139,54.139 S344.913,388.888,315.061,388.888z' /%3E%3Cpath d='M315.061,310.141c-13.569,0-24.609,11.039-24.609,24.608s11.039,24.608,24.609,24.608 c13.569,0,24.608-11.039,24.608-24.608S328.63,310.141,315.061,310.141z' /%3E%3Cpath d='M196.941,152.646c-13.569,0-24.608,11.039-24.608,24.608c0,13.569,11.039,24.609,24.608,24.609 c13.569,0,24.609-11.039,24.609-24.609C221.549,163.686,210.51,152.646,196.941,152.646z' /%3E%3C/svg%3E");
		}

	.plan-items {
		height: 100%;
	}

	.plan-items > .col {
		border-left: 1px solid #eee;
		height: 100%;
		text-align: center;
		padding: 2em 1.2em;
		position: relative;
	}

		.most {
			position: absolute;
			top: -.6em;
			left: 0;
			right: 0;
		}

		.most > span {
			background-color: #4394ff;
			color: #fff;
			font-size: .91em;
			padding: .35em 1em;
			border-radius: 50px;
		}

	.plan-items .title {
		font-size: 1.5em;
		margin-bottom: .55em;
	}

	.plan-items .price .price_span {
		display: inline-block;
		font-weight: bold;
		font-size: 1.5em;
	}

		.price_span {
			display: inline-block;
		}

		.bill_cur {
			/*padding: 0 5px;*/
		}

		.ru .bill_cur {
			padding: 0 0 0 5px;
		}

		.en .bill_cur {
			padding: 0 5px 0 0;
			float: left;
		}

	.plan-items .qua {
		color: #888;
		margin-bottom: 1.5em;
	}

	.plan-items .desc {
		margin-top: 1.5em;
		line-height: 1.3;
		font-size: 1em;
		color: #444;
		margin-bottom: 1.5em;
	}

.details {
	background-color: #fff;
	border-radius: 10px;
	/*text-align: center;*/
}
	
	.details .center {
		text-align: center;
	}

	.details .center > .row {
		height: 100%;
	}

	.details .center > .row > .col {
		border-left: 1px solid #eee;
		padding: 1em;
		line-height: 1.5;
	}

		.details .center > .row > .col > .tips {
			display: block;
			color: #888;
			font-size: .8em;
			margin-top: 5px;
			line-height: 1.2;
		}

	.stroke {
		box-sizing: border-box;
		border-bottom: 1px solid #eee;
	}

	.stroke:last-child {
		border-bottom: 0;
	}

	.stroke .item {
		padding: 1em;
		line-height: 1.5;
	}

	.stroke .done {
		background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' fill='%234394ff' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' x='0' y='0' viewBox='0 0 45.701 45.7' style='enable-background:new 0 0 512 512' xml:space='preserve'%3E%3Cpath d='M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z' /%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
	}

	.stroke .pay {
		background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='%23dadada' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg%3E%3Cpath d='M288.134 158.533H222.8v98.533h65.334c27.166 0 49.267-22.101 49.267-49.267-.001-27.559-22.34-49.266-49.267-49.266z'%3E%3C/path%3E%3Cpath d='M256 0C114.841 0 0 114.841 0 256s114.841 256 256 256 256-114.841 256-256S397.159 0 256 0zm32.134 287.066H222.8v34.267h65.334c8.284 0 15 6.716 15 15s-6.716 15-15 15H222.8v33.2c0 8.284-6.716 15-15 15s-15-6.716-15-15v-33.2h-17.133c-8.284 0-15-6.716-15-15s6.716-15 15-15H192.8v-34.267h-17.133c-8.284 0-15-6.716-15-15s6.716-15 15-15H192.8V143.533c0-8.284 6.716-15 15-15h80.334c42.785 0 79.267 34.479 79.267 79.267-.001 43.708-35.559 79.266-79.267 79.266z' %3E%3C/path%3E%3C/g%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
	}

	.stroke.dop .price {
		display: flex;
		align-items: center;
	}

.large {
	background-color: #fff;
	/*color: #fff;*/
	padding: 2em;
	border-radius: 10px;
	margin-top: 3em;
	text-align: center;
	box-sizing: border-box;
}

	.large .title {
		font-size: 1.5em;
		font-weight: bold;
		margin-bottom: 1em;
	}

	.large .desc {
		font-size: 1.15em;
		line-height: 1.5;
		max-width: 700px;
		margin: 0 auto;
		margin-bottom: 1em;
	}

.promocode {
	margin-top: 2em;
	text-align: center;
}

.history {
	margin-top: 3em;
}

	.history > .items {
		background-color: #fff;
		border-radius: 10px;
	}

	.history > .items > .item {
		border-bottom: 1px solid #eee;
		line-height: 1.5;
	}

	.history > .items > .item:last-child {
		border-bottom: 0;
	}

	.history > .items > .item > .col {
		padding: .8em 1em;
	}

	.history > .items > .item > .col.amount_item {
		text-align: right;
	}

	.history > .items > .item > .col.date {
		text-align: right;
		color: #888;
	}

/* модальное */
.table > .col {
	padding: 8.5px 0;
	line-height: 1.35;
}

	.amount {
		border-top: 1px solid #e1e4ef;
		font-weight: 600;
		font-size: 1.25em;
		margin-top: 10px;
	}

	.saving {
		color: #da0000;
	}

.radio-inp {
	display: none;
}

.forstore {
	font-size: 14px;
	color: #888;
}

label.radio-item {
	padding: .5em 1em;
	border-radius: 10px;
	line-height: 1.5;
	background-color: #f5f5f5;
	display: block;
	cursor: pointer;
	margin-right: 20px;
	border: 2px solid #f5f5f5;
}

	.label-title {
		font-weight: 500;
	}

.radio-inp[type="radio"]:checked + label.radio-item {
	border-color: #6dacff;
	background-color: #e9f6ff;
	color: #4394ff;
}

.table {
	display: flex;
}

	.table.hidden {
		display: none;
	}

.up_till {
	margin-top: .5em;
	font-size: .95em;
	color: #888;
}

.foot.error {
	background-color: #ffefb4 !important;
}

.paymethod {
	border-top: 1px solid #eee;
	padding-top: 1em;
}



@media (max-width: 767px) {

	.plans-out, .details {
		width:  auto;
	}

	.history > .items > .item > .col.amount_item {
		text-align: left;
		font-weight: 500;
	}

	.period-out {
		padding: 3px;
		border-radius: 6px;
	}

	.btn_period {
		padding: 8px 16px;
	}

	.highlight {
		border-radius: 4px;
	}
	
}