@import url(https://fonts.googleapis.com/css2?family=Manrope:wght@600;800&display=swap);.react-toggle{touch-action:pan-x;display:inline-block;position:relative;cursor:pointer;background-color:transparent;border:0;padding:0;-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}.react-toggle-screenreader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.react-toggle--disabled{cursor:not-allowed;opacity:.5;transition:opacity .25s}.react-toggle-track{width:43px;height:22px;padding:0;border-radius:30px;background-color:#cdd7ee;transition:all .2s ease}.react-toggle--checked .react-toggle-track,.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track,.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track{background-color:#10d5c2}.react-toggle-track-check{position:absolute;width:14px;height:10px;top:0;bottom:0;margin-top:auto;margin-bottom:auto;line-height:0;left:8px;opacity:0;transition:opacity .25s ease}.react-toggle--checked .react-toggle-track-check,.react-toggle-track-x{opacity:1;transition:opacity .25s ease}.react-toggle-track-x{position:absolute;width:10px;height:10px;top:0;bottom:0;margin-top:auto;margin-bottom:auto;line-height:0;right:10px}.react-toggle--checked .react-toggle-track-x{opacity:0}.react-toggle-thumb{transition:all .5s cubic-bezier(.23,1,.32,1) 0ms;position:absolute;top:2px;left:2px;width:18px;height:18px;border:2px solid #cdd7ee;border-radius:50%;background-color:#fafafa;box-sizing:border-box;transition:all .25s ease}.react-toggle--checked .react-toggle-thumb{left:27px;border-color:#ff8c66}.react-toggle--focus .react-toggle-thumb{box-shadow:0 0 2px 3px #ff8c66}.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb{box-shadow:0 0 5px 5px #ff8c66}*{box-sizing:border-box;margin:0;padding:0}body,html{font-family:"Manrope",sans-serif;color:#858fad;background:#fafbff url(/FEM-interactive-pricing-component/static/media/bg-pattern.76d3fa7d.svg) no-repeat top/100% 40%}@media only screen and (min-width:768px){body,html{background-size:100% 55%}}.App{min-width:100%;height:100vh;justify-content:flex-start}.App,.header{display:flex;align-items:center;flex-direction:column}.header{align-self:flex-start;padding:3rem 2rem;margin:2rem auto;background:url(/FEM-interactive-pricing-component/static/media/pattern-circles.9f6ed14b.svg) no-repeat 50%;width:100%;text-align:center;justify-content:center}@media only screen and (min-width:768px){.header{display:grid;grid-template-areas:"tl tl" "span1 span2";padding:3rem 2rem;margin:3rem auto}.header span:first-of-type{padding-left:.6rem;grid-area:span1}.header span:last-of-type{grid-area:span2;padding-right:.5rem}}.header__h1{color:#303750;font-size:20px;padding-bottom:.25rem}@media only screen and (min-width:768px){.header__h1{grid-area:tl;font-size:28px;padding-bottom:.65rem}}.header__span{font-size:13px;padding-bottom:.25rem;font-weight:600}@media only screen and (min-width:768px){.header__span{font-size:15px}}.card{width:327px;height:478px;background-color:#fff;border-radius:8px;box-shadow:2px 16px 20px rgba(0,0,0,.09)}.card,.card>*{display:flex;align-items:center;flex-direction:column}.card>*{justify-content:center;margin:1.5rem 0 1rem}@media only screen and (min-width:768px){.card>*{margin:0}}@media only screen and (min-width:768px){.card{width:540px;height:397px;padding:2rem 0;margin:0 0 2rem}}.card__section-1{width:100%;display:flex;align-items:center;justify-content:space-between;align-self:flex-start}@media only screen and (min-width:768px){.card__section-1{display:grid;grid-template-areas:"pageviews pageviews price price" "slider slider slider slider";padding:auto 1rem}}.card__section-1>:not(:last-child){padding:0 2rem 2rem}@media only screen and (min-width:768px){.card__section-1>:not(:last-child){padding:0 2rem}}.card__section-1 .card__pageviews{font-size:12px;letter-spacing:1.71px;text-transform:uppercase;font-weight:700}@media only screen and (min-width:768px){.card__section-1 .card__pageviews{grid-area:pageviews;display:flex;align-items:center;justify-content:flex-start;font-size:14px;width:100%;height:100%;padding-top:8px}.card__section-1 .card__pageviews span:first-of-type{padding-right:.35rem}}.card__section-1 .slider__container{width:100%;display:flex;height:100%}@media only screen and (min-width:768px){.card__section-1 .slider__container{grid-area:slider;padding:2.5rem 2rem}}.card__section-1 .slider__container .rc-slider-handle:active{background:#24aea1 url(/FEM-interactive-pricing-component/static/media/icon-slider.cbca35e0.svg) no-repeat 50%!important}.card__section-1 .card__subsection-1{display:flex;align-items:center;justify-content:center;width:100%;height:100%}@media only screen and (min-width:768px){.card__section-1 .card__subsection-1{display:inline-flex;grid-area:price;justify-content:flex-start}}.card__section-1 .card__subsection-1 .dollars{padding-top:.5rem}@media only screen and (min-width:768px){.card__section-1 .card__subsection-1 .dollars{padding-top:0;margin-left:1rem}}.card__section-1 .card__subsection-1 .dollars .dollars__amt{font-size:32px;font-weight:900;color:#303750}@media only screen and (min-width:768px){.card__section-1 .card__subsection-1 .dollars .dollars__amt{font-size:40px}}.card__section-1 .card__subsection-1 .billing__period{font-size:16px;padding:.7rem 0 0 .5rem;text-transform:lowercase}@media only screen and (min-width:768px){.card__section-1 .card__subsection-1 .billing__period{padding-top:0}}.card__section-2{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;width:100%;margin:1rem auto;padding-bottom:2.4rem;border-bottom:2px solid #eaeefb}@media only screen and (min-width:768px){.card__section-2{margin:1rem 0 0;padding:2rem auto}}.card__section-2 .toggle{align-self:center}.card__section-2 .billing-cycle-group{font-weight:600;font-size:12px;display:inline-flex;align-items:center;justify-content:center;width:100%}.card__section-2 .billing-cycle-group.flex-end{justify-content:flex-end;padding-right:10px}@media only screen and (min-width:768px){.card__section-2 .billing-cycle-group.flex-end{padding-right:16px}}.card__section-2 .billing-cycle-group.flex-start{justify-content:flex-start;padding-left:10px}@media only screen and (min-width:768px){.card__section-2 .billing-cycle-group.flex-start{padding-left:16px}}.card__section-2 .billing-cycle-group .yearly-discount{font-size:10px;font-weight:900;background-color:#feece7;color:#ff8c66;margin-left:3px;margin-right:5px;width:42px;height:19px;display:flex;align-items:center;justify-content:center;vertical-align:middle;border-radius:16px}@media only screen and (min-width:768px){.card__section-2 .billing-cycle-group .yearly-discount{width:80px;margin-left:10px}}.card__section-2 .billing-cycle-group .yearly-discount span:first-of-type{padding-bottom:1px;display:flex}.card__section-2 .billing-cycle-group .yearly-discount span:first-of-type .span__mobile-shown{display:block}@media only screen and (min-width:768px){.card__section-2 .billing-cycle-group .yearly-discount span:first-of-type .span__mobile-shown{display:none}}.card__section-2 .billing-cycle-group .yearly-discount span:first-of-type .span__mobile-hidden{display:none}@media only screen and (min-width:768px){.card__section-2 .billing-cycle-group .yearly-discount span:first-of-type .span__mobile-hidden{display:block;padding-left:2px}}.card__section-3{width:100%;display:flex;align-items:center;justify-content:flex-start;height:100%;margin:.25rem auto}.card__section-3 ul.member__perks{list-style:none;display:flex;align-items:center;flex-direction:column}@media only screen and (min-width:768px){.card__section-3 ul.member__perks{align-items:flex-start}}.card__section-3 ul.member__perks li{padding-bottom:.5rem}.card__section-3 ul.member__perks li img{margin-right:.75rem}.card__section-3 ul.member__perks li span{font-size:12px}.card__section-3 .btn{font-family:"manrope",sans-serif;font-size:12px;font-weight:900;color:#bdccff;background-color:#303750;border:none;width:170px;height:41px;margin:1.5rem auto;border-radius:20.5px;transition:color .3s}.card__section-3 .btn:hover{cursor:pointer;color:#fff}@media only screen and (min-width:768px){.card__section-3 .btn{margin:0}}@media only screen and (min-width:768px){.card__section-3{flex-direction:row;align-items:center;justify-content:space-between;padding:0 2rem;margin:1.5rem 0 0}}
/*# sourceMappingURL=main.48daaf6b.chunk.css.map */