.@{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; } } } } } }