/* Ported from Assets/UC/UI/Account/SubscriptionPlans/SubscriptionPlansPage.uss */
.sp-root { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgb(8,18,29); color: rgb(248,240,218); font-size: 17px; overflow: hidden; }
.sp-root .u-label { white-space: normal; flex-shrink: 0; }
.sp-atmosphere { position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: 0.25; }
.sp-header { flex-direction: row; align-items: center; padding: 14px 34px; border-bottom-width: 1px; border-bottom-color: rgba(214,202,170,0.18); background-color: rgba(8,18,29,0.95); flex-shrink: 0; }
.sp-brand { flex-direction: row; align-items: center; flex-grow: 1; }
.sp-brand-bulb { width: 28px; height: 42px; margin-right: 12px; }
.sp-wordmark { font-size: 22px; }
.sp-brand-sub { font-size: 9px; color: rgb(220,193,133); margin-top: 2px; }
.sp-steps { flex-direction: row; align-items: center; }
.sp-step { font-size: 12px; color: rgb(126,150,166); padding: 8px; }
.sp-step.is-current { color: rgb(246,220,159); }
.sp-step.is-done { color: rgb(157,219,204); }
.sp-step-line { color: rgb(57,79,95); margin: 0 6px; }
.sp-root button { min-height: 44px; margin: 0; padding: 10px 18px; color: rgb(239,230,208); background-color: rgb(22,39,55); border-width: 1px; border-color: rgb(71,89,102); border-radius: 24px; font-size: 16px; flex-shrink: 0; text-align:center; white-space: normal; transition-property: background-color, border-color, color; transition-duration: 0.18s; }
.sp-root button:hover { background-color: rgb(37,58,73); border-color: rgb(222,201,153); }
.sp-root button:focus { border-color: rgb(183,226,241); border-width: 2px; }
.sp-root button:disabled { opacity: 0.4; }
.sp-root .sp-close { width: 44px; height: 44px; padding: 0; margin-left: 24px; font-size: 26px; background-color: transparent; }
.sp-root .sp-primary { background-color: rgb(240,211,149); color: rgb(16,30,41); border-color: rgb(255,236,189); border-width: 1px; min-height: 52px; padding: 12px 28px; font-size: 18px; font-weight:700; }
.sp-root .sp-primary:hover { background-color: rgb(255,231,177); border-color: rgb(255,249,228); }
.sp-scroll { flex-grow: 1; min-height: 0; }
.sp-scroll > .unity-scroll-view__content-viewport { overflow: hidden; }
.sp-scroll .unity-scroll-view__content-container { flex-grow: 1; }
.sp-scroll .unity-scroll-view__vertical-scroller { width: 9px; }
.sp-scroll .unity-scroller { background-color: rgb(14,33,48); border-width: 0; }
.sp-scroll .unity-scroller__low-button, .sp-scroll .unity-scroller__high-button { display: none; }
.sp-scroll .unity-base-slider__tracker { background-color: rgb(14,33,48); border-width: 0; }
.sp-scroll .unity-base-slider__dragger { background-color: rgb(111,149,169); border-radius: 5px; border-width: 0; }
.sp-stage { width: 100%; max-width: 1330px; align-self: center; padding: 28px 42px 10px 42px; flex-shrink: 0; }
.sp-hero { flex-direction: row; align-items: center; margin-bottom: 22px; }
.sp-hero-copy { flex-grow: 1; flex-shrink: 1; min-width: 0; }
.sp-kicker { color: rgb(221,193,133); font-size: 11px; font-weight:700; letter-spacing: 1.4px; }
.sp-hero-title { font-size: 44px; margin: 9px 0 10px 0; }
.sp-hero-description { font-size: 18px; color: rgb(181,204,214); }
.sp-course-context { align-self: flex-start; max-width: 620px; padding: 9px 13px; border-radius: 10px; background-color: rgba(147,207,199,0.09); color: rgb(170,220,209); font-size: 13px; margin-top: 16px; border-left-width: 2px; border-left-color: rgb(121,191,177); }
.sp-pass-art { width: 270px; height: 190px; align-items: center; justify-content: center; margin-left: 28px; flex-shrink: 0; }
.sp-pass-orbit { position: absolute; width: 232px; height: 232px; border-width: 1px; border-color: rgba(228,209,163,0.24); border-radius: 120px; scale: 1 0.72; rotate: -25deg; }
.sp-pass-orbit-inner { width: 205px; height: 205px; rotate: 27deg; border-color: rgba(147,206,206,0.2); }
.sp-pass { width: 202px; height: 150px; padding: 16px; background-color: rgb(34,47,57); border-width: 1px; border-color: rgb(171,155,119); border-radius: 15px; rotate: -7deg; }
.sp-pass-kicker { color: rgb(198,181,143); font-size: 8px; letter-spacing: 1px; }
.sp-pass-bulb { width: 31px; height: 41px; margin-top: 12px; }
.sp-pass-title { font-size: 30px; margin-top: -2px; }
.sp-pass-footer { font-size: 7px; letter-spacing: 1px; color: rgb(161,188,195); margin-top: 3px; }
.sp-pass-infinity { position: absolute; bottom: 27px; right: 26px; font-size: 49px; color: rgb(225,202,151); rotate: -7deg; }
.sp-plans-heading { flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.sp-section-title { font-size: 23px; }
.sp-small { color: rgb(163,187,200); font-size: 13px; }
.sp-plan-cards { flex-direction: row; align-items: stretch; margin-left: -7px; margin-right: -7px; }
.sp-plan-card { flex-grow: 1; flex-basis: 0; min-width: 0; margin: 0 7px; padding: 23px 24px; border-radius: 19px; background-color: rgb(16,33,48); border-width: 1px; border-color: rgb(48,70,85); border-top-width: 3px; border-top-color: rgb(110,153,175); transition-property: background-color, border-color, translate; transition-duration: 0.2s; }
.sp-plan-card:hover { background-color: rgb(23,43,59); translate:0 -2px; }
.sp-plan-card.is-selected { background-color: rgb(35,47,56); border-color: rgb(230,205,153); border-top-color: rgb(255,225,162); }
.sp-plan-card.is-lifetime { border-top-color: rgb(200,174,111); }
.sp-plan-cap { flex-direction: row; justify-content: space-between; align-items: center; height: 27px; margin-bottom: 11px; }
.sp-plan-badge { font-size: 10px; color: rgb(165,203,218); letter-spacing: 1px; }
.sp-plan-card.is-selected .sp-plan-badge { color: rgb(248,218,153); }
.sp-plan-choice { width: 23px; height: 23px; border-radius: 14px; border-width: 1px; border-color: rgb(100,124,140); text-align:center; color: transparent; }
.sp-plan-card.is-selected .sp-plan-choice { color: rgb(15,28,37); background-color: rgb(241,211,148); border-color: rgb(241,211,148); }
.sp-plan-title { font-size: 25px; }
.sp-plan-tagline { font-size: 14px; color: rgb(179,201,211); margin-top: 4px; min-height: 20px; }
.sp-price-row { flex-direction: row; align-items: flex-end; margin-top: 13px; }
.sp-plan-price { font-size: 45px; color: rgb(250,238,206); }
.sp-plan-currency { font-size: 11px; color: rgb(142,167,182); margin-left: 8px; margin-bottom: 10px; }
.sp-plan-duration { font-size: 13px; color: rgb(184,203,214); }
.sp-plan-value { color: rgb(166,222,205); font-size: 12px; min-height: 23px; margin-top: 12px; }
.sp-plan-features { font-size: 14px; color: rgb(188,207,216); margin-top: 9px; margin-bottom: 20px; white-space: normal; }
.sp-root .sp-plan-select { margin-top: auto; border-color: rgb(100,120,133); background-color: transparent; }
.sp-root .is-selected .sp-plan-select { background-color: rgb(240,211,149); border-color: rgb(250,224,174); color: rgb(16,30,41); }
.sp-included { padding: 24px 4px; margin-top: 8px; border-bottom-width: 1px; border-bottom-color: rgb(43,62,77); }
.sp-included-items { flex-direction: row; flex-wrap: wrap; margin-top: 9px; }
.sp-included-items .u-label { margin-right: 30px; margin-bottom: 6px; color: rgb(184,205,214); font-size: 14px; }
.sp-faq { max-width: 880px; margin-top: 26px; }
.sp-faq > .sp-section-title { margin-bottom: 12px; }
.sp-faq details { margin: 0; padding: 8px 0; border-bottom-width: 1px; border-bottom-color: rgb(38,57,72); }
.sp-faq details label { min-height: 44px; color: rgb(221,227,222); font-size: 16px; }
.sp-faq details .u-label { color: rgb(173,197,209); font-size: 14px; }
.sp-faq details .unity-foldout__content .u-label { padding: 4px 16px 12px 2px; }
.sp-footer { align-items: center; padding: 32px 20px 24px 20px; }
.sp-footer > .u-label { font-size: 16px; color: rgb(194,182,149); }
.sp-footer > .sp-small { font-size: 11px; margin-top: 7px; color: rgb(124,152,169); }
.sp-selection-dock { flex-direction: row; align-items: center; flex-shrink: 0; padding: 14px 42px; border-top-width: 1px; border-top-color: rgb(74,82,78); background-color: rgb(13,27,40); }
.sp-dock-copy { flex-grow: 1; margin-right: 20px; min-width: 0; }
.sp-dock-name { font-size: 19px; margin-bottom: 3px; }
.sp-root .sp-text-button { background-color: transparent; border-width: 0; padding: 10px 3px; align-self: flex-start; color: rgb(175,213,222); font-size: 14px; text-overflow: ellipsis; }
.sp-root .sp-text-button:hover { color: rgb(255,228,171); }
.sp-root .sp-text-button:focus { border-width: 1px; }
.sp-checkout-stage > .sp-text-button { margin-bottom: 13px; }
.sp-checkout-stage > .sp-hero-title { margin-bottom: 24px; }
.sp-checkout-columns { flex-direction: row; align-items: flex-start; }
.sp-form-card { flex-grow: 1; flex-basis: 0; padding: 30px; border-radius: 20px; background-color: rgb(17,34,50); border-width: 1px; border-color: rgb(50,72,88); }
.sp-form-card > .sp-small { margin: 5px 0 17px 0; }
.sp-field { margin: 0 0 18px 0; flex-grow: 0; flex-basis: auto; min-width: 0; flex-shrink: 0; flex-direction: column; }
.sp-field > .unity-base-field__label { font-size: 13px; color: rgb(186,206,217); margin: 0 0 7px 0; min-width: 0; padding: 0; }
.sp-field > .unity-text-field__input { color: rgb(245,239,220); font-size: 18px; background-color: rgb(8,23,37); border-width: 1px; border-color: rgb(65,88,106); border-radius: 8px; min-height: 49px; padding: 11px 14px; margin: 0; }
.sp-field > .unity-text-field__input:focus { border-color: rgb(213,205,161); }
.sp-field > .unity-base-popup-field__input { color: rgb(245,239,220); font-size: 17px; background-color: rgb(8,23,37); border-width: 1px; border-color: rgb(65,88,106); border-radius: 8px; min-height: 49px; padding: 10px 12px; margin: 0; min-width: 0; }
.sp-field > .unity-base-popup-field__input:focus { border-color: rgb(213,205,161); }
.sp-field .unity-base-popup-field__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgb(245,239,220); }
.sp-field-row { flex-direction: row; margin-left: -6px; margin-right: -6px; }
.sp-field-row > .sp-field { margin-left: 6px; margin-right: 6px; flex-grow: 1; flex-basis: 0; }
.sp-payment-heading { margin-top: 12px; margin-bottom: 18px; }
.sp-payment-heading .sp-kicker { margin-top: 5px; font-size: 9px; }
.sp-payment-fields > .sp-small { margin-bottom: 20px; }
.sp-payment-unavailable { padding: 22px; border-radius: 10px; border-width: 1px; border-color: rgb(72,92,107); color: rgb(180,200,211); font-size: 15px; background-color: rgb(11,26,40); }
.sp-terms { flex-direction: row; align-items: center; min-height: 48px; margin-top: 12px; margin-left: 0; margin-right: 0; }
.sp-terms > .unity-base-field__label { min-width: 0; flex-shrink: 1; font-size: 14px; white-space: normal; color: rgb(199,215,220); }
.sp-terms .unity-toggle__input { min-width: 30px; min-height: 30px; }
.sp-terms .unity-toggle__checkmark { width: 23px; height: 23px; background-color: rgb(11,27,40); border-width: 1px; border-color: rgb(139,163,172); border-radius: 5px; }
.sp-legal { flex-direction: row; flex-wrap: wrap; margin-bottom: 8px; }
.sp-legal .sp-text-button { font-size: 12px; margin-right: 20px; }
.sp-form-error { color: rgb(255,171,150); font-size: 14px; margin-bottom: 14px; }
.sp-root .sp-pay { width: 100%; }
.sp-payment-status { color: rgb(170,216,204); font-size: 14px; text-align:center; margin-top: 12px; }
.sp-order-card { width: 32%; margin-left: 26px; padding: 28px; background-color: rgb(29,42,51); border-radius: 20px; border-width: 1px; border-color: rgb(120,112,88); }
.sp-order-name { font-size: 29px; margin-top: 16px; margin-bottom: 7px; }
.sp-order-rule { height: 1px; background-color: rgb(67,80,84); margin: 24px 0 18px 0; }
.sp-order-total { flex-direction: row; justify-content: space-between; align-items: center; }
.sp-order-total > .u-label { font-size: 14px; }
.sp-order-total > .sp-order-price { font-size: 27px; color: rgb(249,223,164); }
.sp-order-saving { font-size: 13px; color: rgb(164,219,200); margin-top: 15px; }
.sp-order-benefits { font-size: 14px; color: rgb(188,209,216); margin: 22px 0; }
.sp-order-course { padding: 18px 0; border-top-width: 1px; border-top-color: rgb(65,79,83); }
.sp-order-course > .u-label { font-size: 15px; margin-bottom: 5px; }
.sp-order-course > .sp-kicker { font-size: 9px; }
.sp-welcome-stage { align-items: center; padding-top: 54px; padding-bottom: 28px; }
.sp-welcome-seal { width: 142px; height: 142px; border-width: 1px; border-color: rgb(164,151,107); border-radius: 74px; align-items: center; justify-content: center; background-color: rgba(221,181,76,0.09); margin-bottom: 25px; }
.sp-welcome-bulb { width: 52px; height: 82px; }
.sp-welcome-check { position: absolute; right: 0; bottom: 3px; width: 35px; height: 35px; border-radius: 20px; background-color: rgb(161,219,199); color: rgb(13,43,37); text-align:center; font-size: 20px; }
.sp-welcome-stage > .sp-hero-title { font-size: 62px; text-align:center; }
.sp-welcome-description { color: rgb(180,208,216); font-size: 18px; max-width: 570px; text-align:center; margin: 10px 0 25px 0; }
.sp-welcome-receipt { align-items: center; padding: 20px 28px; background-color: rgb(22,39,52); border-width: 1px; border-color: rgb(62,83,93); border-radius: 14px; margin-bottom: 24px; }
.sp-welcome-receipt > .u-label { text-align:center; }
.sp-welcome-receipt > .sp-small { margin-top: 6px; }
.sp-welcome-stage > .sp-text-button { align-self: center; margin-top: 14px; }
.sp-welcome-stage > .sp-primary { max-width: 100%; }
.sp-compact .sp-stage { padding-left: 26px; padding-right: 26px; }
.sp-compact .sp-hero-title { font-size: 40px; }
.sp-compact .sp-pass-art { width: 210px; margin-left: 15px; }
.sp-compact .sp-plan-card { padding: 19px 17px; }
.sp-compact .sp-plan-title { font-size: 22px; }
.sp-compact .sp-plan-price { font-size: 38px; }
.sp-compact .sp-order-card { width: 35%; padding: 22px; margin-left: 18px; }
.sp-compact .sp-form-card { padding: 24px; }
.sp-compact .sp-steps { display: none; }
.sp-phone .sp-header { padding: 9px 16px; }
.sp-phone .sp-steps { display: none; }
.sp-phone .sp-wordmark { font-size: 19px; }
.sp-phone .sp-brand-bulb { width: 24px; height: 35px; margin-right: 9px; }
.sp-phone .sp-close { margin-left: 10px; }
.sp-phone .sp-stage { padding: 24px 18px 8px 18px; }
.sp-phone .sp-hero-title { font-size: 35px; }
.sp-phone .sp-hero-description { font-size: 16px; }
.sp-phone .sp-pass-art { display: none; }
.sp-phone .sp-hero { margin-bottom: 26px; }
.sp-phone .sp-plans-heading { flex-direction: column; align-items: flex-start; }
.sp-phone .sp-plans-heading .sp-small { margin-top: 5px; font-size: 12px; }
.sp-phone .sp-plan-cards { flex-direction: column; margin: 0; }
.sp-phone .sp-plan-card { display: none; flex-basis: auto; margin: 0 0 14px 0; padding: 20px; }
.sp-phone .sp-plan-card.is-selected { display: flex; }
.sp-phone .sp-plan-tagline { min-height: 0; }
.sp-phone .sp-plan-title { font-size: 27px; }
.sp-phone .sp-plan-price { font-size: 43px; }
.sp-phone .sp-plan-value { min-height: 0; }
.sp-phone .sp-plan-features { margin-top: 12px; margin-bottom: 16px; }
.sp-phone .sp-selection-dock { padding: 12px 16px; flex-direction: column; align-items: stretch; }
.sp-phone .sp-dock-copy { flex-direction: row; align-items: center; justify-content: space-between; margin: 0 0 9px 0; }
.sp-phone .sp-dock-name { font-size: 15px; margin: 0 10px 0 0; }
.sp-phone .sp-dock-copy .sp-small { font-size: 11px; }
.sp-phone .sp-selection-dock > .sp-primary { min-height: 47px; font-size: 16px; }
.sp-phone .sp-included-items { flex-direction: column; }
.sp-phone .sp-included-items .u-label { margin-bottom: 10px; }
.sp-phone .sp-checkout-columns { flex-direction: column-reverse; }
.sp-phone .sp-order-card { width: 100%; margin: 0 0 20px 0; padding: 20px; }
.sp-phone .sp-order-name { margin-top: 8px; font-size: 26px; }
.sp-phone .sp-order-card > .sp-kicker { display: none; }
.sp-phone .sp-order-rule { display: none; }
.sp-phone .sp-order-total { margin-top: 14px; }
.sp-phone .sp-order-saving { font-size: 11px; margin-top: 8px; }
.sp-phone .sp-order-benefits { display: none; }
.sp-phone .sp-order-course { display: none; }
.sp-phone .sp-form-card { width: 100%; flex-basis: auto; padding: 20px 16px; }
.sp-phone .sp-field > .unity-text-field__input { font-size: 16px; padding: 10px; }
.sp-phone .sp-field > .unity-base-popup-field__input { font-size: 16px; padding: 10px 8px; }
.sp-phone .sp-field-row { margin-left: -4px; margin-right: -4px; }
.sp-phone .sp-field-row > .sp-field { margin-left: 4px; margin-right: 4px; }
.sp-phone .sp-expiry-row { flex-wrap: wrap; }
.sp-phone .sp-expiry-row > .sp-field { flex-basis: 40%; }
.sp-phone .sp-address-row { flex-direction: column; }
.sp-phone .sp-address-row > .sp-field { flex-basis: auto; }
.sp-phone .sp-welcome-stage { padding-top: 34px; }
.sp-phone .sp-welcome-stage > .sp-hero-title { font-size: 43px; }
.sp-phone .sp-welcome-description { font-size: 16px; }
.sp-reduced button, .sp-reduced .sp-plan-card { transition-duration: 0s; translate:0 0; }
.sp-quick-choices { display: none; flex-direction: row; margin: 0 -4px 14px -4px; }
.sp-phone .sp-quick-choices { display: flex; }
.sp-root .sp-quick-plan { flex-grow: 1; flex-basis: 0; min-width: 0; padding: 10px 4px; margin: 0 4px; border-radius: 12px; align-items: center; }
.sp-quick-name { font-size: 12px; color: rgb(170,196,210); margin-bottom: 4px; }
.sp-quick-price { font-size: 22px; color: rgb(247,233,200); }
.sp-root .sp-quick-plan.is-selected { background-color: rgb(48,52,49); border-color: rgb(239,211,152); }