whmcsCrosterTemplates/assets/less/pricing-tables.less

.@{brand}-pricing-container {
	position: relative;
	
	.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
		bottom: -20px;
	}
		
	.pricing-slider, .pricing-box, .home-products {
		position: relative;
		
		&.row-eq-height {
			margin: 0;
			
			[class*=" col-"] {
				padding-left: 10px;
				padding-right: 10px;
			}
		}
	}
	
	.pricing_style_2 {
		position: relative;
		margin: 35px 0;
	}
	
	.pricing-box {
		.@{brand}-pricing-table {
			.sticker-wrapper {
				top: -15px;
				right: 30px;
				.sticker {
					font-size:@baseFontSize;
					.transform(rotate(0deg));
					border-radius: 12px;
				}
			}
		}
	}
	
	.@{brand}-pricing-table {
	  display: flex;
	  flex-direction: column;
	  position: relative;
	  margin: 35px 0;
	  padding: 30px 30px 15px;
	  box-shadow: @box-shadow;
	  border: 1px solid @default-border-color;
	  border-radius: 4px;
	  color: @baseFontcolor;
	  
		.st-sm {
			display: none;
		}
		
		.price-free {
			padding: 0.5rem 1.5rem;
			font-size: @font-size-base * 1.25;
			border-radius: 0.25rem!important;
		}
		.product_pricing_single, .billing-cycle-pricing {
			margin: 1rem 0;
		}
		.billing-cycle-pricing {
			display: block;
			.btn-group {
				width: 100%;
				.btn {
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: transparent!important;
					border-color: @default-border-color;
					color: @baseFontcolor;
					padding: 5px 10px;
					text-align: left;
					margin: 0;
					
					.fas, .far, .fal, .fad {
						margin: 0;
					}
					
					&.dropdown-toggle {
						&:after {
							display: none;
						}
					}
				}
				.dropdown-menu {
					width: 100%;
					border-color: @default-border-color;
					border-radius: 0;
					padding: 0;
					li {
						display: block;
						padding: 5px 10px;
						cursor: pointer;
						border-bottom: 1px solid @default-border-color;
						position: relative;
						&:last-child {
							border-bottom: 0 none;
						}
						&:hover, &:focus {
							background-color: @gray-lighter;
						}
						.current_prcing {
							color: @baseFontcolor;
							.dollar {
								font-size: @baseFontSize + 6;
							}
						}
					}
				}
				.discounted_options {
					color: #777;
					div {
						&:first-child {
							margin-right: 4px;
						}
					}
					
					.price_duration {
						font-size: @baseFontSize;
					}
				}
				.current_prcing {
					display: flex;
					align-items: baseline;
					flex-wrap: wrap;
					word-break: break-all;
					
					.dollar, .cents, .prefix {
						font-weight: 700;
						color: @brand-secondary;
					}
					.suffix {
						margin: 0 2px;
					}
					.dollar {
						font-size: 29px;
						color: @brand-secondary;
					}
					
				}

				&.open {
					.fa-angle-down {
						&:before {
							content: "\f106";
						}
					}
				}
			}
			

			.regular_pricing {
				.savecut, &.savecut {
					font-size: 80%;
					text-decoration: line-through;							
				}
			}

			
			&.desc_belwo {
				margin-bottom: 10px;
			}
			
			&.fixed-height {
				min-height: 120px;
			}
			&.float {
				.btn-group {
					.save_text {
						position: absolute;
						top: 5px;
						right: 25px;
					}
				}
			}
		}
		
		.tab-pane {
			.btn-group {
				.btn {
					&.dropdown-toggle {
						&:after {
							display: none;
						}
					}
				}
			}
		}
		
		h3, h4, .h3, .h4 {
			color: @baseHeadingcolor;
			display: block;
			font-weight: 700;
			margin: 0 0 1rem;
		}
		
		h3, .h3 {
			font-size: 30px;
		}
		.desc {
			margin-bottom: 1rem;
		}
		.heading-desc {
			h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
				margin: 10px 0;
			}
			p {
				margin-bottom: 25px;
			}
		}
		.cterms {
			text-transform: capitalize;
		}	
		.price {
			display: flex;
			align-items: baseline;
			flex-wrap: wrap;
			word-break: break-all;
			
			small {
				&.start {
					margin-right: 4px;
				}
			}
			&.free {
				color: @brand-success;
			}
			
			span, s, del {
				font-weight:700;
			}
			s, del {
				font-size: 16px;
				color: @gray-light;
			}	
			span {
				white-space: nowrap;
				margin-right: 2px;
				
				&:last-child {
					margin-right: 0;
				}
				&.prefix, &.cost, &.dollar, &.cents {
					color:  @brand-secondary;
				}
				&.prefix {
					top: -0.9em;
					position: relative;
					vertical-align: top;
				}
				&.cost, &.dollar { 
					font-size:36px;
				}
				&.cents {
					font-size: 20px;
				}
				&.cycle, &.suffix {
					font-weight: normal;
				}
			}
		}

		.cost-small {
			font-size:24px!important;
		}
		
		.btn {
			display: block;
			width: 100%;
		}
		
		@media only screen and (min-width: 768px) {
			span {		
				&.pull-right {
					display: none;
				}
			}
			.PriceList-toggle {
				display: none;
			}
			.plan-features {
				height: auto!important;
				&.collapse {
					display: block!important
				}		
			}
			
			h3, h4, .h3, .h4 {
				small {
					display: none;
				}
			}
		}
		.plan-features {				
			padding:1rem 0 0;
			
			li {
				position: relative;
				list-style: none;
				padding: 5px 0;
				
				&:first-child {
					padding-top: 0;
				}
				&:last-child {
					padding-bottom: 0;
				}
			}
			
			&.check-list, &.arrows, &.check-circle, &.check-square {
				li {
					padding: 10px 0 0 20px;
					&:before {
						position: absolute;
						margin-right: 4px;
						font-family: "Font Awesome 5 Pro";
						font-size: @baseFontSize + 2;
						font-weight: 300;
						left: 0;
						opacity: 0.80;
					}
					
					&:first-child {
						padding-top: 0;
					}
				}
			}
			&.check-list {
				li {
					&:before {
						content: "\f00c";
					}
				}			
			}
			&.arrows {
				li {
					&:before {
						content: "\f061";
					}
				}
			}
			
			&.check-circle {
				li {
					&:before {
						content: "\f058";
					}
				}
			}
			&.check-square {
				li {
					&:before {
						content: "\f14a";
					}
				}
			}
			
		}
		
		@media only screen and (max-width: 767px) {
			.PriceList-toggle {
				margin: 15px 0;
				cursor: pointer;
				font-weight: 700;
				
				span {
					&:after {
						content: "\f068";
						font-family: "Font Awesome 5 Pro";
						font-size: 15px;
						float: right;
					}					
				}
				
				&.collapsed {
					span {
						&:after {
							content: "\f067";
						}					
					}				
				}
			}
			
			.plan-features {
				&.collapse, &.collapsing {
					padding: 0;
				}
			}
		}
		
		.table-heading {
			display: inline-block;
			background-color: @themeColor;
			color: @white;
			padding: .08em .7em .08em .7em;;
			line-height: 1.42857143;
			position: relative;
			text-transform: none;
			margin: 30px 0 0;
			
			&:after {
				content: "";
				background-color: @themeColor;
				position: absolute;
				top: 0;
				right: -.1em;
				width: .2em;
				height: 1.535em;
				.transform( skew(-7deg,0));
			}
		}
		
		.table {
			margin: 0;
			thead {
				th {
					font-weight: 500;
					border-bottom: 0 none;
				}
			}
			th {
				text-align: center;
				
				&:first-child {
					text-align: left;
				}
			}
			tbody {
				border-collapse: separate;
				tr {
					vertical-align: baseline;
					background-color: @gray-lighter;
					border-bottom: 10px solid @white;
				}
				
				 td {
					vertical-align: middle;
					text-align: center;
					border-right: 1px solid @white;
					border-top: 0 none;
					
					h3, h4, .h3, .h4 {
						background: transparent;
						padding: 0;
						margin: 10px 0;
						border: 0 none;
					}
					
					&:first-child {
						text-align: left;
						border-right: 0 none;
					}
					
					&:last-child {
						border-right: 0 none;
						
					}
					
					@media (min-width: 768px) {
						&:first-child {						
							.server-info {
								img {
									width: 70px; max-width: 70px;
								}								
								h4, .h4 {font-size: 21px; margin: 20px 0;}
							}
						}
						&:last-child {
							max-width: 195px;
						}
					}

					@media only screen and (max-width: 991px) {
						.footable-toggle {
							margin-left: 5px;
						}
					}
					&.server-heading {
						 padding-left: 0;
					}
					.server-info {
						display: flex;
						align-items: center;
						justify-content: space-between;
						background: @gray-dark;
						color: @white;
						text-align: left;
						padding: 7px;
						margin-left: -4px;
						position: relative;
						margin-right: 10px;
						
						&:before {
							border-top: 4px solid transparent;
							border-right: 4px solid @gray-dark;
							left: 0;
							content: "";
							display: block;
							height: 0;
							position: absolute;
							top: -3px;
							width: 0;
						}						
						
						h4, .h4 {color: @white;}
						
						h5, .h5 {
							font-weight: 700;
							text-transform: uppercase;
						}
						img {
							float: right;
							width: 50px; max-width: 50px;
						}
						span {
							.fad {font-size: 48px;}
						}
						
						&.highlight {						
							border: 5px solid @sticker-bg;
							margin-right: 0;
							border-left: 0;
							
							&:before {
								top: -8px;
							}
						}
					}
					
					small {
						display:block;
					}
					
					.footable-row-detail-inner {
						width: 100%;
					}
					
					.footable-row-detail-name {
						color: @themeColor;
					}
					.footable-row-detail-value {
						margin-bottom: 0.5rem;
					}
					.footable-row-detail-name, .footable-row-detail-value {
						display: block;
					}
					
					&.server-price {
						min-width: 180px;
						.billing-cycle-pricing {
							margin: 0 0 0.50rem;
						}
						.price {
							flex-wrap: nowrap;
							word-break: normal;
							justify-content: center;
							span {
								&.cost {
									font-size: 21px;
								}
							}
						}
					}
					
					@media only screen and (max-width: 597px) {
						.footable-row-detail-row {
							&:last-child {
								margin-top: 15px;
							}
						}
					}
				}
			}
		}
		&.no-animation {
			padding: 15px 30px 15px;
		}
		
		&.bg-primary {
			h3, h4, .h3, .h4, .desc, .price span, .plan-features ul li {
				color: @white;
			}
			
			.btn-primary {
				background-color: transparent;
				border-color: @white;
				border-bottom-width: 2px;
				color: @white;
				
				&:hover, &:focus {
					background-color: rgba(255,255,255,0.1);
				}
			}

		}
		&.dark {
			h3, h4, .h3, .h4, .desc, .price span, .plan-features ul li {
				color: @white;
			}		
		}
		
		&.bg-primary, &.dark {
			border: 0 none;
			.billing-cycle-pricing {
				.btn-group {
					.btn {
						color: @white;
						border-color: rgba(255,255,255,0.25);
						.discounted_options, .current_prcing {
							color: @white;
						}
					}
					
					.dropdown-menu li {
						.current_prcing {
							.prefix, .dollar, .cents {
								color: @brand-secondary;
							}
						}						
					}
				}
			}
			
			.plan {
				.plan__column {
					.plan__header {
						border-right: 1px solid rgba(255,255,255,0.25);
						border-bottom: 3px solid rgba(255,255,255,0.25);
					}
					
					.plan__body {
						.plan__cell {
							border-right: 1px solid rgba(255,255,255,0.25);
							border-bottom: 1px solid rgba(255,255,255,0.25);
						}
						
					}
				}	
				
			}
			
			.text-muted {
				color: rgba(255,255,255,0.7)!important;
			}
			.graphics {
				.icon {
					color: var(--primary);
					&:before {
						background-color: var(--white);
					}
				}
			}
		}
		
		&.no-shadow {
			box-shadow: none;
		}
		
		
		/* Sticker */
		.sticker-wrapper {
			position: absolute;
			top: -20px;
			right: 15px;

			.sticker {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: @baseFontSize - 3;
				.text-color(@sticker-bg);
				.transform(rotate(45deg) translateX(50%));
				position: relative;
				background-color: @sticker-bg;
				white-space: nowrap;
				padding: 0.25rem 1.25rem;				
			}
			
			&.flat {
				top: 20px;
				right: 0;
				.sticker {
					border: 0 none;
					border-radius: 25px 0px 0px 25px;
					.transform(rotate(0));
				}
			}
		}
		
		&.st_s-2 {
			&.popular, &.active {
				h4, .h4 {
					margin-bottom: 0;
				}
				.sticker-wrapper {
					display: none;
				}
			}
			.st-sm {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				padding: 0.25rem 0.5rem;
				font-size: @baseFontSize - 3;
				background-color: @sticker-bg;
				.text-color(@sticker-bg);
				border-radius: 12px;
				margin: 5px 0;
			}			
		}
		
		&.pt_st_4 {
			padding: 0;
			.no-gutters {
				display: flex;
				flex-wrap: wrap;
				margin: 0;
				
				@media (max-width: 767px) {
					flex-direction: column;
				}
			}
			[class*=col-] {
				display: flex;
				padding: 20px;
				align-items: center;
				&:first-child {
					border-bottom: 1px solid @default-border-color;
					@media (min-width: 768px) {
						border-right: 1px solid @default-border-color;
						border-bottom: 0 none;
					}
					
					h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
						margin-top: 0;
					}
					.product_pricing_single, .billing-cycle-pricing {
						margin: 0;
					}					

				}
				
				&:last-child {
					.btn {
						margin: 0;
					}
				}
				
				@media (max-width: 778px) {
					display: block;
					width: 100%;
				}
				
				.content {
					display: flex;
					flex-direction: column;
					width: 100%;
					.featured_desc {
						border-top: 1px dashed @default-border-color;
						padding: 10px 0 0;
						margin-top: 15px;
					}
					.plan-features {
						.features-divider {
							display: none!important;
						}
					}
				}
				
				.plan-features {
					padding: 0;
					margin: 0;
					li {
						display: inline-table;
						width: 48%;
						
						@media (min-width: 1200px) {
							width: 32%;
						}
						@media (max-width: 991px) {
							width: 100%;
						}
					}
				}
			}
			
			&.active {
				margin: 45px 0 30px;
				border-color: @brand-secondary;
				box-shadow: @box-shadow-hover;
				
				[class*=col-] {
					h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
						margin-top: 10px;
						margin-bottom: 15px;
					}
				}
				
				&:first-child {
					margin-top: 0;
				}
			}

		}
		
		&.pt_st_5 {
			padding: 0 0.5rem;
			.no-gutters {
				display: flex;
				flex-wrap: wrap;
				margin: 0;
				
				@media (max-width: 767px) {
					flex-direction: column;
				}
			}
			
			.sticker-wrapper {
				&.se {
					top: -15px;
					right: auto;
					left: 1rem;
					.sticker {
						.transform(rotate(-5deg));
						border-radius: 12px 12px 0px 0px;
					}
				}
			}
				
			[class*=col-] {
				display: flex;
				padding: 1rem;
				align-items: center;
				&:first-child {
					border-bottom: 1px solid @default-border-color;
					@media (min-width: 768px) {
						border-bottom: 0 none;
					}
					@media (min-width: 992px) {
						.content {
							flex-direction: row;
							.graphics {
								justify-content: center;
								margin-right: 2rem;
								margin-bottom: 0;
							}
						}
					}
					h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
						margin: 0;
					}
				}
				.content {
					display: flex;
					flex-direction: column;
					width: 100%;
					.graphics {
						display: flex;
						align-items: center;
						margin-bottom: 1rem;
						&.fix-width {
							min-width: 185px; max-width: 185px; width: 185px;
						}
					}
					.plan-name {
						display: flex;
						align-items: center;
						margin-bottom: 1rem;
					}
					.plan-details:not(.h4) {
						font-size: @baseFontSize;
					}
					.featured_desc {
						border-top: 1px dashed @default-border-color;
						padding: 0.50rem 0 0;
						margin-top: 15px;
					}
					.plan-features, .custom-features {
						display: flex;
						flex-wrap: wrap;
						text-align: left;
						padding: 0;
						margin: 0;
						li {
							position: relative;
							padding: 0.25rem 1rem 0.25rem 0;
							margin-right: 15px;
							opacity: 0.85;
						}
					}
					
					.plan-features {
						&.check-list, &.arrows, &.check-circle, &.check-square {
							li {
								padding: 0.25rem 1rem 0.25rem 1.25rem;
							}
						}
					}

					@media (min-width: 992px) {
						.billing-cycle-pricing {
							display: flex;
							flex-direction: column;
							align-items: flex-end;
							.btn-group {
								max-width: 180px;
							}
						}
						.price {
							justify-content: flex-end;
						}
						.pricing_main, .pricing_main_default, .cycle, .setup-fee  {
							text-align: right;
						}
						.plan-action {
							display: flex;
							align-items: center;
							justify-content: flex-end;
							
							.btn {
								width: auto;
								min-width: 185px;
							}
						}
					}
					
					@media (max-width: 1200px) {
						.plan-features, .custom-features {
							li {
								width: calc(50% - 30px);
								white-space: nowrap
							}
						}
					}
					.billing-cycle-pricing {
						.pricing_wrapr {
							display: flex;
							align-items: center;
							.save_text {
								position: unset;
								margin-left: 4px;
							}
						}
					}
					.price {
						flex-wrap: nowrap;
					}
					.regular_pricing {
						span {
							font-weight: normal;
							margin-right: 2px;
						}
					}
					.custom-features {
						.features-divider {
							display: none!important;
						}
					}
					.cost {
						font-size: @font-size-base * 1.65;
					}
				}
			}

			.product_pricing_single, .billing-cycle-pricing {
				margin: 0;
			}			
			&.active {
				border-color: @brand-secondary;
				box-shadow: @box-shadow-hover;
				
				&:first-child {
					margin-top: 0;
				}
			}

		}
		
		.graphics {
			.icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 66px;
				height: 66px;
				font-size: 1.75rem;
				color: var(--white);
				position:relative;

				[class*=" fa-"], [class^="fa-"] {
					z-index:1;
				}
				&:before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: var(--primary);
					border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
				}
			}
		}
		
		&.centered {
			align-items: center;
			.graphics {
				display: flex;
				align-items: center;
				justify-content: center;
				width:100%;				
			}
			.desc, .desc_small, .plan-features, .pricing_main, .pricing_main_default, .product_pricing_single {
				text-align: center;
			}
			.billing-cycle-pricing {
				width: 100%;
			}
			.btn-link, .billing-cycle-pricing .pricing_main .price, .billing-cycle-pricing .pricing_main_default .price {
				justify-content: center;
			}
			.plan-features {
				&.check-list, &.arrows, &.check-circle, &.check-square {
					li {
						&:before {
							margin-right: 0;
							margin-left: -1.25rem;
							left: auto;
						}
					}
				}
			}
			@media only screen and (max-width: 767px) {
				.PriceList-toggle {
					span {
						&:after {
							float: none;
							margin-left: 10px;
						}					
					}
				}
			}
		}
		
		.plans_slider__nav {
			position: relative;
			padding: 1.25rem;
			.swiper-button-next, .swiper-button-prev {
				top: 50%;
				transform: translateY(-50%);
				outline: none;
				width: auto;
				height: auto;
				margin: 0;				
				.btn__icon {
					font-size: @font-size-lg;
				}
				&:after {
					display: none;
				}
				&.swiper-button-disabled {
					opacity: 0.35;
				}
			}
			.swiper-button-next {
				right: 20px;
				.btn__icon {
					margin-left: 10px;
				}
			}
			.swiper-button-prev {
				left: 20px;
				.btn__icon {
					margin-right: 10px;
				}
			}
		}
		
	}
	
	&.mbo {
		table {
			&.trns {
				border-collapse: separate;
				border-spacing: 0;
				border: 0 none;
				
				th, tr, td {
					border: 0 none;
				}
			}
		}
		.@{brand}-pricing-table {
			position: static;
			margin: 0 0 30px;

			&.pt_st_4 {
				.st-sm {
					margin: -10px 0 10px;
				}
				.sticker-wrapper {
					top: -28px;
					left: auto;
					right: 15px;
				}			
			}
			
		}
	}
	
	.card {
		&.upgrade-plans {
			.card-body {
				ul {
					li {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0.25rem 0;
						border-top: 1px dotted @default-border-color;
						font-size: 80%;	

						&:last-child {
							border-bottom: 1px dotted @default-border-color;
						}

						.feature-label {
							text-align: left;
							margin-right: 5px;
							max-width: 75%;
						}
						.feature-value {
							text-align: right;
							margin-left: 5px;
						}						
					}
				}
			}
		}
	}
}


.tab-pane {
	.plan-specs {		
		[class*='col-'] {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: @gray-lighter;
			border: 1px solid @default-border-color;
			border-width: 1px 1px 1px 0;
			min-height: 117px;
			height: auto;
			
			&:first-child {
				border-width: 1px;
				.border-radius(4px 0 0 4px);
			}
			
			&:last-child {
				border-width: 1px;
				border-color: @themeColor; 
				background: @themeColor;
				color: @white;
				.border-radius(0 4px 4px 0);
				
				&:before {
					content: "";
					width: 25px;
					height: 25px;
					display: block;
					position: absolute;
					background-color: inherit;
					margin-right: -15px;
					top: 50%;
					margin-top: -13px;
					right: 100%;
					.rotate(45deg);
					z-index: 1;
				}
				
				h2, .h2 {
					color: @white;
					line-height: 60px;
					margin: 10px 0 0;
				}
			}
		}
		.description, .pricing, .pricing_main, .pricing_main_default {
			text-align: center;
			
			h5, .h5 {
				margin: 10px 0;
			}
			
			h2, .h2 {
				font-size: 17px;
				font-weight: 700;
				color: #000;
				margin-top: 0;
				margin-bottom: 10px;
			}
		}
		
		.pricing {
			h5, .h5 {
				margin: 0;
			}
			span {
				font-weight: 700;
				
				&.prefix, &.cost {
					color:  @brand-secondary;
				}
				&.prefix {
					top: -0.2em;
					line-height: 0;
					position: relative;
					vertical-align: baseline;
				}					
				&.cost {
					font-size: 21px;
				}
				&.cycle, &.suffix {
					font-weight: normal;
				}
			}
		}

		.order-now {
			text-align: center;
			line-height: 113px;
			display: block;
			color: @white;
			
			&:hover, &:focus, &:active {
				text-decoration: none;
				background: lighten(@themeColor, 7%);
			}

			&.bg-secondary {
				&:hover, &:focus, &:active {
					background: lighten(@brand-secondary, 7%)!important;
				}
			}
			
			&.bg-success {
				&:hover, &:focus, &:active {
					background: lighten(@brand-success, 7%)!important;
				}
			}
			&.bg-danger {
				&:hover, &:focus, &:active {
					background: lighten(@brand-danger, 7%)!important;
				}
			}
			&.bg-warning {
				&:hover, &:focus, &:active {
					background: lighten(@brand-warning, 7%)!important;
				}
			}
			&.bg-info {
				&:hover, &:focus, &:active {
					background: lighten(@brand-info, 7%)!important;
				}
			}
			&.inverse, &.dark, &.gray {
				&:hover, &:focus, &:active {
					background: lighten(@gray-darker, 7%)!important;
				}
			}
		}		
		@media (min-width:992px) {
			.description {
				h2, .h2 {
					font-size: 28px;
				}
			}
		}
		@media (max-width: 991px) {
			[class*='col-'] {
				&:last-child {					
					&:before {
						display: none;
					}
				}
			}		
		}
		@media (max-width: 767px) {
			[class*='col-'] {
				border-width: 0 1px 1px;
				&:first-child {
					border-width: 1px;
				}
				&:last-child {
					border-width: 0 1px 1px;
				}
			}
			.order-now {
				flex: auto;
				max-width: 100%;
			}
			.description {
				h2, .h2 {
					font-size: 28px;
				}
			}
		}
	}
	.btn-group {
		.dropdown-menu {
			.dropdown-item {
				cursor: pointer;
			}
		}
	}
}


.@{brand}-tabsbar {
	@media only screen and (max-width:767px) {
		.mobile-tab-headings {
			background-color: @themeColor;
			border-color: @themeColor;
			color: @white;
			cursor: pointer;
			margin: 0;
			white-space: nowrap;
			height: 100%;
			padding: 10px 16px;
			font-size: 18px;
			line-height: 1.3333333;
		}
	}
}

.mobile-tab-headings {
	display: none;
	@media only screen and (max-width:767px) {
		width: 100%;
		display: block;
	}
	+ .nav-tabs {
		@media only screen and (max-width:767px) {
			display: none;
		}
	}
}


.section__plan_comparison {
	position: relative;
    min-height: 100%;
	z-index: 2;
	
	.@{brand}-pricing-container {
		.@{brand}-pricing-table {
			padding: 0;
		}
	
	}
	
	.plan {
		display: flex;
		position: relative;
		overflow: hidden;
		.plan__column {
			flex: 1;
			position: relative;
			
			.plan__header {
				padding: 30px 24px;
				height: 80px;
				border-right: 1px solid @default-border-color;
				border-top: 1px solid transparent;
				border-bottom: 3px double @default-border-color;
				h4, .h4 {
					margin: 0;
				}
				&.hg {
					height: 150px;
					h4, .h4 {
						margin: 0.50rem 0;
					}
					.graphics {
						img {
							height: 66px;
							max-height: 66px;
						}
					}
				}
			}
			&.plan__column--empty {
				height: 100%;
				min-width: 240px;
				@media (max-width: 513px) {
					min-width: 50%;
				}
				.plan__header {
					border-left: 1px solid transparent;
					height: 80px;
					&.hg {
						height: 150px;
					}					
				}
			}
			
			.plan__body {
				border-bottom-left-radius: 6px;
				border-bottom-right-radius: 6px;
				outline: none;
				
				.plan__cell {
					border-right: 1px solid @default-border-color;
					border-bottom: 1px solid @default-border-color;
					height: 56px;
					display: flex;
					align-items: center;
					padding: 0 24px;
					
					&.plan__cell-last {
						display: block;
						height: 240px;
						border-bottom-color: transparent;
						padding: 24px;
						
						.product_pricing_single, .billing-cycle-pricing {
							margin: 0;
						}						
						&.sb {
							height: 190px;
						}
						
						.pricing_main, .pricing_main_default {
							min-height: 90px;
						}
						.cost {
							font-size: 26px;
						}

					}
				}
				
				&.plan__body--right {
					text-align: left;
					
					.plan__cell {
						justify-content: flex-start;
						font-weight: 500;
						
						span {
							&.underline, [class*=" fa-"], [class^="fa-"] {
								cursor: pointer;
							}
							&.underline {
								font-weight: 700;
								border-bottom: 2px dotted var(--primary);
							}
							[class*=" fa-"], [class^="fa-"] {
								padding: 0 4px;
							}
						}
					}					
				}
				
			}
		}
		
		.sticker-wrapper {
			top: 5px;
			left: 0;
			right: auto;
			
			.sticker {
				border-radius: 0 8px 8px 0;
				transform: rotate(0);
				padding: 0 22px;
				border: 0 none;
			}
		}
		
		.swiper-container {
			width: 100%;
			padding: 0;
		}
		.swiper-wrapper {
			.swiper-slide {
				&:last-of-type {
					.plan__column {
						.plan__header {
							border-right-color: transparent;
						}
						.plan__body {
							.plan__cell {
								border-right-color: transparent;
							}
						}
					}
				}
			}
		}
		
		&.centered {
			.plan__column {
				.plan__header {
					text-align: center;
					.graphics {
						display: flex;
						align-items: center;
						justify-content: center;
						width:100%;
					}
				}
				.plan__body:not(.plan__body--right) {
					.plan__cell {
						justify-content: center;
						
						&.plan__cell-last {
							text-align: center;
							.price {
								justify-content: center;
							}
						}
					}
				}
			}
			
		}
		
	}
}

.@{brand}-pricing-table, .product_config_info, .products-radio {
	.custom-features {
		position: relative;
		list-style: none;
		padding-left: 0;
		li {
			padding: 5px 0;
			&:first-child {
				padding-top: 0;
			}
			
			&:last-child {
				padding-bottom: 0;
			}
			span {
				&.underline, [class*=" fa-"], [class^="fa-"] {
					cursor: pointer;
				}
				&.underline {
					font-weight: 700;
					border-bottom: 2px dotted var(--primary);
				}
				[class*=" fa-"], [class^="fa-"] {
					padding: 0 4px;
				}
			}
			&.features-divider {
				display: inline-flex;
				align-items: center;
				position: relative;
				padding: 5px 16px;
				margin-bottom: 10px;
				&:after {
					content: ""; 
					display: flex;
					width: 100%;
					height: 2px;
					position: absolute;
					bottom: 0;
					left: 0;
					background-color: var(--primary);
				}
				span {
					font-size: @baseFontSize;
					padding: 2px;
					white-space: nowrap;
					display: inline-flex;
					justify-content: center;
					align-items: center;						
				}
			}
		}
	}

	&.bg-primary, .primary {
		.custom-features {
			li {
			span {
				&.underline {
					font-weight: 700;
					border-bottom: 2px dotted var(--white);
				}
			}			
				&.features-divider {
					&:after {
						background-color: var(--white);
					}				
				}
			}
		}	
	
	}
}

.@{brand}-pricing-table {
	&.pt_st_5 {
		.custom-features {
			&.type-2 {
				li {
					.underline, b {
						display: block;
						font-size: @font-size-lg;
						font-weight: 500;
						margin-bottom: 0.25rem;
						[class*=" fa-"], [class^="fa-"] {
							color: var(--primary);
						}
					}
				}
			}
		}
	}
	
	&.bg-primary, &.primary, &.dark, &.inverse {
		&.pt_st_5 {
			.custom-features {
				&.type-2 {
					li {
						.underline, b {
							[class*=" fa-"], [class^="fa-"] {
								color: var(--white);
							}
						}
					}
				}
			}
		}		
	}
}

[class*='product-billing-switcher-'] {
	text-align: center;
	.btn-group {
		padding: 0.25rem;
		border-radius: 50px;
		margin-bottom: 1rem;
		.btn {
			padding: 0.25rem 1rem;
			font-size: @baseFontSize;
			border-radius: 50px!important;
			width: auto;
			&.active {
				background-color: var(--primary);
				color: var(--white);
			}
		}
		.dropdown-menu {
			.dropdown-item {
				cursor: pointer;
			}
		}
	}
}

.sec {
	&.products {
		.badge-primary {
			font-weight: 500;
			.text-color(@sticker-bg);
			background-color: @sticker-bg!important;			
		}
		&.margin-up {
			[class*='product-billing-switcher-'] {
				position: absolute;
				margin: 0 auto;
				width: 100%;
				top: -80px;
				&.inline-cycles {
					display: flex;
					align-items: center;
					position: relative;
					top: auto;
					bottom: auto;
					.btn-group {
						display: inline-flex;
					}
				}
			}
		}
	}
}