.ff-already-purchase-wrap .ff-purchase__completed-courses-wrap,
.ff-already-purchase-wrap:not(.show) .ff-already-purchase,
.ff-offcanvas__purchase.offcanvas {
    opacity: 0;
}
.ff-offcanvas__purchase.offcanvas.show {
    opacity: 1;
}
.ff-offcanvas__body-purchase {
    padding: 0 !important;
    --page-1-animation-duration: 1s;
    --page-2-animation-duration: 0.8s;
}
.ff-offcanvas__header-purchase,
.ff-purchase__canvas,
.ff-purchase__completed-courses-container {
    padding: 16px 48px !important;
}
.ff-offcanvas__header-purchase {
    padding: 20px 48px !important;
    border-bottom: 1px solid #f2f2f2;
}
.ff-purchase__canvas-col-left {
    min-width: 300px;
}
.ff-purchase__canvas-col-right,
.ff-purchase__completed-animated-card-col {
    min-width: 400px;
}
.ff-purchase__bill-wrap {
    padding: 24px 40px !important;
    position: relative;
    overflow-y: auto;
}
.ff-purchase__bill-anim {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in;
}
.ff-purchase__bill-anim-active.ff-purchase__bill-anim {
    max-height: 22px;
    transition: max-height 0.3s;
}
.ff-purchase__bill-anim-active {
    margin-bottom: 8px;
}
.ff-purchase__bill-anim-content {
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
}
.ff-purchase__bill-anim-active .ff-purchase__bill-anim-content {
    opacity: 1;
    visibility: visible;
    transition-delay: 1.1s;
}
.ff-purchase__bill-anim-strip {
    background-color: #ffffff54;
    height: 22px;
    transition: 0.3s;
}
.ff-purchase__bill-anim-active .ff-purchase__bill-anim-strip {
    opacity: 0;
    transition-delay: 0.9s;
}
.ff-purchase__bill-anim-strip-1,
.ff-purchase__bill-anim-strip-1::before {
    height: 100%;
    transition: 0.3s cubic-bezier(0.59, 0.08, 0.32, 0.97);
    margin: 0 auto;
}
.ff-purchase__bill-anim-strip-1 {
    width: 0.4%;
    background: #d0eded;
    position: relative;
}
.ff-purchase__bill-anim-strip-1::before {
    content: "";
    position: absolute;
    width: 0%;
    left: 0;
    right: 0;
    background: #a2dbdc;
}
.ff-purchase__bill-anim-active .ff-purchase__bill-anim-strip-1 {
    transition-delay: 0.2s;
}
.ff-purchase__bill-anim-active .ff-purchase__bill-anim-strip-1::before {
    transition-delay: 0.4s;
}
.ff-purchase__bill-anim-active .ff-purchase__bill-anim-strip-1,
.ff-purchase__bill-anim-active .ff-purchase__bill-anim-strip-1::before {
    width: 100%;
}
.ff-offcanvas__close-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 4px;
    transition: 0.3s;
}
.ff-offcanvas__close-btn:hover {
    background-color: #f2f2f2;
}
.ff-stepper__wrap {
    --stpper-width: 120px;
    --stpper-icon-size: 16px;
}
.ff-stepper {
    width: var(--stpper-width);
}
.ff-stepper__icon-wrap {
    width: var(--stpper-icon-size);
    height: var(--stpper-icon-size);
    background: #fff;
    border: 2px solid #63b16f;
    border-radius: 100px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ff-stepper:first-child::after,
.ff-stepper:first-child::before,
.ff-stepper__icon {
    display: none;
}
.ff-stepper.active .ff-stepper__icon-wrap {
    background: #63b16f;
    transition: 0.3s 0.3s;
}
.ff-stepper.active .ff-stepper__icon {
    display: block;
}
.ff-stepper {
    width: 33.333%;
    position: relative;
}
.ff-stepper::after,
.ff-stepper::before {
    content: "";
    position: absolute;
    height: 1.5px;
    top: 7px;
    right: 50%;
    z-index: -1;
}
.ff-stepper::before {
    width: 100%;
    background: #cbe5cf;
}
.ff-stepper::after {
    width: 0%;
    left: -50%;
}
.active.ff-stepper::after {
    width: 100%;
    background-color: #63b16f;
    transition: 0.3s;
}
.ff-purchase__canvas .ff-card__content {
    max-height: 100px;
    transition: max-height 0.3s;
}
@media (min-width: 1199px) {
    .ff-purchase__canvas-col-left {
        min-width: 400px;
    }
    .ff-purchase__canvas-col-right {
        min-width: 500px;
    }
}
.ff-purchase__failed-icon,
.ff-purchase__success-icon {
    width: 72px;
    height: 72px;
    background: #fff;
    border-radius: 100px;
}
.ff-purchase__failed-icon svg path,
.ff-purchase__success-icon svg path {
    stroke-dashoffset: 52px;
    stroke-dasharray: 52px;
}
.ff-purchase__success-content {
    opacity: 0;
    transition: 0.3s 0.2s;
}
.ff-purchase__card-title {
    min-height: 48px;
}
.ff-purchase__canvas {
    transition: all 0.3s ease var(--page-1-animation-duration);
}
.purchase-completed {
    animation: hide-page-1 0.3s ease var(--page-1-animation-duration) forwards;
}
.purchase-completed .ff-purchase__success-content {
    opacity: 1;
}
.purchase-completed .ff-purchase__success-icon svg path {
    stroke-dashoffset: 0px;
    transition: 0.3s 0.4s;
}
.ff-purchase__bill-wrap::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background: linear-gradient(180deg, #61aaf9 0, #2d78ca 100%);
    border-radius: 12px;
    z-index: 0;
    transition: 0.3s;
}
.purchase-failed .ff-purchase__bill-wrap::before {
    opacity: 1;
}
.ff-already-purchase {
    --page-1-animation-duration: 0s;
    animation: forwards hidePageFinal;
}
.ff-already-purchase-wrap .ff-purchase__canvas {
    display: none !important;
}
.ff-already-purchase-wrap.show {
    opacity: 1;
    transition: 0.3s 0.2s;
}
.purchase-completed .ff-purchase__canvas-col-right,
.purchase-completed .ff-purchase__course-details-list {
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.3s ease calc(var(--page-1-animation-duration) - 0.4s);
}
.purchase-completed .ff-card__content,
.purchase-completed .ff-card__content > div,
.purchase-completed .ff-course__card-no-interaction .ff-card__course {
    transition: all 0.3s ease calc(var(--page-1-animation-duration) - 0.2s);
}
.purchase-completed .ff-card__content > div {
    opacity: 0;
}
.purchase-completed .ff-card__content {
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.purchase-completed .ff-card__info-content {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease calc(var(--page-1-animation-duration) - 0.4s);
}
.purchase-completed .ff-course__card-no-interaction .ff-card__course {
    box-shadow: none !important;
}
.ff-purchase__completed-courses-container {
    width: 100%;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    height: 0;
    overflow: hidden;
}
.purchase-completed + .ff-purchase__completed-courses-container {
    animation: hidePageFinal 0s ease calc(var(--page-1-animation-duration) - 0.3s) forwards;
}
.ff-purchase__completed-icon {
    width: 180px;
    height: 180px;
    background-color: rgb(216 207 248 / 32%);
    border-radius: 12px;
}
.ff-purchase__completed-icon--circle {
    border-radius: 200px;
}
.ff-purchase__completed-para {
    padding: 0 100px;
}
.ff-purchase__completed-courses {
    --card-anim-height: 100px;
    width: 100%;
}
.ff-purchase__completed-courses-icon {
    border-radius: 100px;
    width: 20px;
    height: 20px;
    background: #42844c;
}
.ff-purchase__completed-courses .ff-course__card {
    --discount-text-space: 0;
    max-height: 500px;
    aspect-ratio: 16/9;
}
.purchase-completed + .ff-purchase__completed-courses-container .ff-course__card-no-interaction .ff-card__course {
    box-shadow: none;
}
.ff-already-purchase.ff-purchase__completed-courses-container .ff-purchase__completed-courses-wrap {
    opacity: 1;
    transition: 0.3s 0.3s;
}
.ff-already-purchase.ff-purchase__completed-courses-container .ff-purchase__completed-courses .ff-course__card,
.purchase-completed + .ff-purchase__completed-courses-container .ff-purchase__completed-courses .ff-course__card {
    animation: purchaseCourse 1s cubic-bezier(0.77, -0.04, 0.12, 1) calc(var(--page-1-animation-duration) + 0.2s) forwards;
}
.ff-purchase__completed-courses-content {
    width: 100%;
    visibility: hidden;
    opacity: 0;
    padding-right: 24px;
    padding-left: calc(var(--card-anim-height) + 101px);
}
.ff-already-purchase.ff-purchase__completed-courses-container .ff-purchase__completed-courses-content,
.purchase-completed + .ff-purchase__completed-courses-container .ff-purchase__completed-courses-content {
    animation: purchaseCourseContent 0.8s cubic-bezier(0.77, -0.04, 0.12, 1) calc(var(--page-1-animation-duration) + 1.1s) forwards;
}
.ff-purchase__completed-courses-wrap {
    border-radius: 12px;
    overflow: hidden;
}
.ff-purchase__completed-courses-wrap::before {
    content: "";
    position: absolute;
    width: 10%;
    height: 100%;
    background: #d0eded;
    opacity: 0;
}
.ff-already-purchase.ff-purchase__completed-courses-container .ff-purchase__completed-courses-wrap::before,
.purchase-completed + .ff-purchase__completed-courses-container .ff-purchase__completed-courses-wrap::before {
    animation: purchaseCourseBackground 0.4s cubic-bezier(0.77, -0.04, 0.12, 1) calc(var(--page-1-animation-duration) + 0.9s) forwards;
}
.buycourseButton,
.ff-purchase__completed-anim-top {
    opacity: 0;
    visibility: hidden;
}
.ff-already-purchase.ff-purchase__completed-courses-container .ff-purchase__completed-anim-top,
.purchase-completed + .ff-purchase__completed-courses-container .ff-purchase__completed-anim-top {
    animation: purchaseCourseAnimTop 0.4s cubic-bezier(0.77, -0.04, 0.12, 1) calc(var(--page-1-animation-duration) + 1.3s) forwards;
}
.ff-purchase__completed-cta-col:first-child::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 0%;
    right: 0;
    background-color: #d5d5dd;
}
.ff-already-purchase.ff-purchase__completed-courses-container .ff-purchase__completed-cta-col:first-child::before,
.purchase-completed + .ff-purchase__completed-courses-container .ff-purchase__completed-cta-col:first-child::before {
    animation: purchaseCourseAnimLine 0.4s cubic-bezier(0.77, -0.04, 0.12, 1) calc(var(--page-1-animation-duration) + 1.4s) forwards;
}
.ff-already-purchase.ff-purchase__completed-courses-container .ff-purchase__completed-cta-col,
.purchase-completed + .ff-purchase__completed-courses-container .ff-purchase__completed-cta-col {
    animation-delay: calc(var(--page-1-animation-duration) + 1.6s);
}
.ff-already-purchase.ff-purchase__completed-courses-container .ff-purchase__completed-cta-col:nth-child(2),
.purchase-completed + .ff-purchase__completed-courses-container .ff-purchase__completed-cta-col:nth-child(2) {
    animation-delay: calc(var(--page-1-animation-duration) + 1.8s);
}
.ff-offcanvas__body-purchase::before {
    content: "";
    width: 100%;
    height: calc(100vh - 90px);
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    background: linear-gradient(180deg, #fff 21.81%, #e9e5ef 100%);
    z-index: -1;
    transition: 0.3s;
}
.ff-already-purchase-wrap.show .ff-offcanvas__body-purchase::before,
.ff-shadow.ff-offcanvas__body-purchase::before {
    opacity: 1;
    transition-delay: calc(var(--page-1-animation-duration) + 1s);
}
@keyframes purchaseCourse {
    0% {
        max-height: 500px;
    }
    100% {
        max-height: var(--card-anim-height);
    }
}
@keyframes purchaseCourseBackground {
    0% {
        width: 20%;
        opacity: 0;
    }
    100% {
        width: 100%;
        opacity: 1;
    }
}
@keyframes purchaseCourseContent {
    0% {
        visibility: hidden;
        opacity: 0;
        transform: translateX(-12px);
    }
    100% {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes purchaseCourseAnimLine {
    0% {
        height: 0%;
    }
    100% {
        height: 100%;
    }
}
@keyframes purchaseCourseAnimTop {
    0% {
        visibility: hidden;
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes hide-page-1 {
    0% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes hidePageFinal {
    0% {
        height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
    }
    100% {
        height: unset;
        overflow: unset;
        opacity: 1;
        visibility: visible;
    }
}
.ff-stepper__hide {
    animation: 0.3s forwards stepperHide;
}
.ff-stepper__hidden-state {
    opacity: 0;
    visibility: hidden;
    transform: translateX(25px);
}
.ff-stepper__hidden-state.ff-show {
    animation: 0.5s 0.3s forwards stepperShow;
}
.ff-purchase__course-avl-lang-hide {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.4s;
}
.ff-purchase__course-avl-lang-hide.ff-show {
    max-height: 0;
}
.ff-anim__left,
.ff-anim__top {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
}
.ff-anim__top.ff-show {
    animation: 0.3s forwards animTop;
}
.ff-anim__left.ff-show {
    display: block;
    animation: 0.3s forwards animLeft;
}
@keyframes stepperHide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-25px);
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes stepperShow {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translateX(25px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }
}
@keyframes animTop {
    0% {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        transform: translateY(25px);
    }
    100% {
        opacity: 1;
        visibility: visible;
        max-height: 400px;
        transform: translateY(0);
    }
}
@keyframes animLeft {
    0% {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        transform: translateX(25px);
    }
    100% {
        opacity: 1;
        visibility: visible;
        max-height: 400px;
        transform: translateX(0);
    }
}
.ff-button__coupon-wrap {
    height: 56px;
    --animation-discount-delay: 3.4s;
}
.ff-button__coupon {
    border: 0;
    background-image: url(../images/course-details-page/buy-course/buy-course-cta-stripe.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 16px 0;
    animation: 5s linear infinite stripeBackground;
    --animation-duration: 5s;
    --animation-last-delay: 3.5s;
}
.ff-button--coupon {
    height: 56px;
    border: 0;
    background-color: #16a6a7;
    padding: 16px 0;
    outline: 0;
}
.ff-button__coupon::after,
.ff-button__coupon::before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
}
.ff-button__coupon::before {
    left: -10px;
}
.ff-button__coupon::after {
    right: -10px;
}
.ff-button__coupon-gift-icon-top {
    margin-bottom: 1px;
}
.ff-button__coupon-gift-icon-bottom,
.ff-button__coupon-gift-icon-top {
    transition: 0.3s;
}
.ff-button__coupon-text {
    overflow: hidden;
    max-width: 1000px;
    transition: 0.6s 0.1s;
}
.ff-button__coupon-circle-anim,
.ff-button__coupon-circle-anim-wrap::after,
.ff-button__coupon-circle-anim-wrap::before {
    content: "";
    position: absolute;
    border-radius: 300px;
    width: 100px;
    height: 100px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.03);
    transition: 0.6s;
}
.anim-start-B .ff-spinner__discount-price::before,
.ff-toast {
    width: 100%;
}
.ff-button__coupon-circle-anim-wrap::before {
    background-color: #a2dbdc;
    z-index: 1;
}
.ff-button__coupon-circle-anim-wrap::after {
    background-color: #16a6a7;
    z-index: 2;
}
.ff-button__coupon-circle-anim {
    background-color: #73caca;
    z-index: 0;
}
.ff-button__coupon-text-discount {
    max-width: 0;
    overflow: hidden;
    transition: 0.6s;
}
.ff-button__coupon-cta-text,
.ff-toast {
    transition: 0.3s;
    opacity: 0;
    visibility: hidden;
}
.ff-button__coupon-discount-tag {
    opacity: 0;
}
.ff-button__coupon-cta-text {
    transform: scale(0.7);
}
.ff-active .ff-button__coupon {
    animation: 0.4s linear forwards stopStripeBackground;
    background-position: 60%;
}
.ff-active .ff-button__coupon-text,
.no-update.spinner-col-parent {
    max-width: 0;
}
.ff-active .ff-button__coupon-gift-icon-bottom,
.ff-active .ff-button__coupon-gift-icon-top {
    transition-delay: 1.2s;
}
.ff-active .ff-button__coupon-gift-icon-top {
    transform: translateY(-30px);
}
.ff-active .ff-button__coupon-gift-icon-bottom {
    transform: translateY(30px);
}
.ff-active .ff-button__coupon-circle-anim {
    animation-delay: 1.5s !important;
}
.ff-active .ff-button__coupon-circle-anim-wrap::before {
    animation-delay: 1.8s !important;
}
.ff-active .ff-button__coupon-circle-anim-wrap::after {
    animation-delay: 2.1s !important;
}
.ff-active .ff-button__coupon-circle-anim,
.ff-active .ff-button__coupon-circle-anim-wrap::after,
.ff-active .ff-button__coupon-circle-anim-wrap::before {
    animation: 0.6s forwards circleScale;
}
.ff-active .ff-button__coupon-discount-tag {
    animation: 2.6s 2.2s forwards discountTag;
}
.ff-active .ff-button__coupon-text-discount {
    max-width: 1000px;
    transition-delay: 2.7s;
}
.ff-active .ff-button__coupon-discount-wrap {
    animation: discountWrap 0.5s ease var(--animation-discount-delay) forwards;
}
.ff-active .ff-button__coupon-cta-text {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition-delay: var(--animation-last-delay);
}
.ff-active.ff-button__coupon-wrap .ff-button__coupon {
    animation: 0s 4s forwards couponBtn;
}
.ff-active .buycourseButton {
    animation: 0s 4s forwards originalButton;
}
@keyframes stripeBackground {
    0% {
        background-position: 0;
    }
    100% {
        background-position: 100%;
    }
}
@keyframes stopStripeBackground {
    0% {
        background-position: 60%;
    }
    100% {
        background-position: 71%;
    }
}
@keyframes circleScale {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: scale(0.3);
    }
    1% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: scale(6);
    }
}
@keyframes discountTag {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    5% {
        opacity: 1;
        transform: scale(1.6);
    }
    25% {
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes discountWrap {
    0% {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        visibility: hidden;
        transform: scale(1.3);
    }
}
@keyframes originalButton {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    100% {
        opacity: 1;
        visibility: visible;
    }
}
@keyframes couponBtn {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    100% {
        opacity: 1;
        visibility: visible;
    }
}
.ff-toast__coupon-btn {
    min-width: 328px;
}
.ff-toast {
    position: fixed;
    z-index: 121;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.24) 100%);
}
.ff-toast.sticky {
    opacity: 1;
    visibility: visible;
}
.ff-toast__wrap {
    background: #fff;
    box-shadow: 0 -8px 24px 0 #00000029;
    padding: 16px;
    border-radius: 0;
}
.ff-toast__thumbnail {
    height: 80px;
    aspect-ratio: 16/9;
    border-radius: 4px;
}
.ff-spinner__wrapper {
    --animation--duration-delay: 0.8s;
}
.ff-spinner-container {
    height: 28px;
    overflow: hidden;
}
.ff-spinner__number {
    transform: scale(0.65);
    transform-origin: bottom left;
    transition: all calc(var(--animation--duration-delay) / 2) cubic-bezier(0.76, 0.26, 0, 1) 0s;
    font-size: 28px;
    line-height: 28px;
}
.anim-start .ff-spinner__number {
    transform: scale(1);
}
.anim-start-B .ff-spinner__number {
    font-weight: 600;
    transition-delay: 0.2s;
}
.spinner-col {
    transition: all var(--animation--duration-delay) cubic-bezier(0.76, 0.26, 0, 1);
}
.spinner-col-parent {
    max-width: 100px;
    overflow: hidden;
    transition: max-width calc(var(--animation--duration-delay) / 2) cubic-bezier(0.76, 0.26, 0, 1) var(--animation--duration-delay);
}
.no-update.spinner-col-parent .spinner-col {
    transform: translateY(100%) !important;
}
.ff-spinner__discount-price {
    font-size: 18px;
    line-height: 26px;
}
.ff-spinner__discount-percentage,
.ff-spinner__discount-price {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateX(5px);
    transition: all calc(var(--animation--duration-delay) / 1.2) cubic-bezier(0.76, 0.26, 0, 1) calc(var(--animation--duration-delay) + 0.4s);
}
.ff-spinner__discount-price::before {
    content: "";
    position: absolute;
    width: 0%;
    height: 1px;
    background-color: #949494 !important;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: all calc(var(--animation--duration-delay) / 2) cubic-bezier(0.76, 0.26, 0, 1) calc(var(--animation--duration-delay) - 0.6s);
}
.anim-start-B .ff-spinner__discount-percentage,
.anim-start-B .ff-spinner__discount-price {
    max-width: 400px;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.ff-toast__spinner-wrap .ff-course__cost-original,
.sticky .ff-toast__spinner-wrap .ff-course__cost-original {
    max-width: 0%;
    overflow: hidden;
}
.ff-toast__spinner-wrap .ff-course__cost-discount {
    overflow: hidden;
}
.ff-toast__spinner-wrap .ff-spinner__number {
    transform-origin: center left;
}
.anim-start-B.ff-toast__spinner-wrap .ff-course__cost-original {
    max-width: 100%;
}
.anim-start-B.ff-toast__spinner-wrap .ff-course__cost-discount {
    transition-delay: calc(var(--animation--duration-delay) + 0.8s);
}
@media (max-width: 767px) {
    .anim-start-B .ff-course__cost.ff-spinner__number.ff-color--light-gray.d-flex.align-items-center {
        font-size: 16px;
        transition-delay: calc(var(--animation--duration-delay) - 0.2s);
    }
    .ff-toast__spinner-wrap .ff-spinner__number {
        font-size: 20px;
        line-height: 22px;
    }
    .ff-toast__spinner-wrap .ff-spinner-container {
        height: 22px;
    }
    .ff-toast__thumbnail {
        height: 60px;
    }
    .ff-toast__spinner-wrap .ff-course__cost-discount,
    .ff-toast__spinner-wrap .ff-course__cost-original {
        font-size: 12px;
    }
}
.ff-spinner__anim {
    animation: 0.8s linear infinite spinnerAnim;
}
@keyframes spinnerAnim {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
.ff-course__img-for-whom {
    min-height: 223px;
}
.ff-course__img-explore {
    min-height: 262px;
}
@media (min-width: 768px) {
    .ff-toast__wrap {
        border-radius: 8px;
        padding: 12px 16px;
    }
    .ff-toast__spinner-container {
        width: 160px;
        flex-shrink: 0;
    }
    .ff-toast__spinner-wrap .ff-spinner__number {
        transform-origin: center right;
    }
    .ff-toast__spinner-wrap .ff-course__cost-discount {
        max-height: 0;
    }
    .anim-start-B.ff-toast__spinner-wrap .ff-course__cost-discount {
        max-height: 100px;
    }
    .ff-course__img-for-whom {
        min-height: 350px;
    }
    .ff-course__img-explore {
        min-height: 411px;
    }
}
.spinner-char {
    text-align: center;
}
.offcanvas-subscr
{
    background-color: #2E2E54!important;
    color: #fff!important;
}
.ff-purchase__left-page
{
    background: linear-gradient(0.47deg, #363664 -35.46%, #252543 59.58%, #1C1C32 89.5%);
    border-radius: 10px;
    color: #fff!important;
    min-width: 44%;
}
.ff-purchase__right-page
{
    background: #E9E5EF!important;
    border-radius: 10px;
    color: #3E3E3E;
}
.ff-subscription-title
{
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
}
.ff-subscription-radio-box
{
    width: 20px; 
    height: 20px; 
    vertical-align:middle
}

.ff-subscription-section-border
{
    border-bottom: 1px solid #FFFFFF;
    opacity: 0.2;
}
.ff-buy-now-button
{
    padding: 11px 24px 11px 24px;
    border-radius: 8px;
    opacity: 0px;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color:#16A6A7;
    border:none;
    background: #fff;
}
.ff-continue-now-button
{
    padding: 11px 24px 11px 24px;
    border-radius: 8px;
    opacity: 0px;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    background:#16A6A7;
    border:none;
    color:#fff;
}
.ff-right-buy-title
{
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
}
.ff-sub-course-image
{
    max-width: 250px;
    border-radius: 16px;
}

.ff-sub-course-title
{
    font-size: 16px;
    font-weight: 600!important;
    line-height: 24px;
    color:#2E2E54;
}
.ff-course-lang-chips
{
    font-size: 16px;
    font-weight: 600;
}

.ff-new-course-actual-price
{
    font-size: 24px;
    font-weight: 600;
}
.ff-new-course-price
{
    font-size: 12px;
    font-weight: 500;
    color: #3E3E3E;
    text-decoration: line-through;
    text-decoration-color: #7E7E7E;
}
.ff-new-course-discount
{
    font-size: 12px;
    font-weight: 500;
    color: #F49E4C;
}
.ff-or-text
{
    align-content: center;
}
.ff-payments-section
{
    margin-left:150px;
}

.appled-coupon-code
{
    font-size: 12px;
    font-weight: 700;
    padding:0;
    margin:0;
    line-height:1;
}
.appled-coupon-code-text
{
    font-size: 10px;
    font-weight: 500;
    color: #3E3E3E;
    padding:0;
    margin:0;
    line-height:2;
}
.ff-coupon-code-div
{
    border: 1px solid #828298;
    padding: 8px 16px 8px 16px;
    border-radius: 8px;
}
.ff-close-coupon
{
    align-content: center;
}
.apply-coupon-code
{
    font-size: 12px;
    font-weight: 600;
}
.apply-coupon-code-block
{
    align-content: center;
}
.ff-user-data-height-adjust
{
    height:180%!important;
}
.coupon-selection-section
{
    padding: 0px 0px 58px 0px;
    border-radius: 24px ;
    box-shadow: 0px 4px 24px 0px #3E3E3E21;
    min-height: 78vh;
}
.cs-head
{
    border-bottom: 1px solid #E6E8F0
}
.coupon-container {
    position: relative;
    display: inline-block;
}

#coupon-input {
    padding-right: 50px; /* Adjust padding to accommodate the Apply text */
    border: 1px solid #D5D5DD;
    padding: 11px 16px 11px 16px;
    border-radius: 8px;
    outline: none; 
}
.coupon-error
{
    font-size: 12px;
    font-weight: 500;
    color: #D24B3D;
}

#coupon-input:focus {
    border: 2px solid #D5D5DD;
}
#coupon-input.active {
    border: 1px solid #16A6A7;
}
#coupon-input.error {
    border: 1px solid #D24B3D;
}
.apply-text {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #696969;
    cursor: pointer;
    font-weight: bold;
}
.apply-text.active {
    color: #16A6A7;
}
.c-left-main-section
{   
    border-radius: 16px 0px 0px 16px;
    background: #C3AAED;
}
.c-left-main-section span
{
    position: relative;
    transform: rotate(-90deg); /* Rotate the banner to make it vertical */
    top:40px;
    font-size: 16px;
    font-weight: 800;
    color: #2E2E54;
}
.c-right-coupon-name
{
    font-size: 14px;
    font-weight: 600;
}
.c-right-coupon-desc
{
    font-size: 10px;
    font-weight: 500;
    border-bottom: 1px solid #F2F2F2
}
.coupon-list-container
{
    box-shadow: 0px 4px 12px 0px #00000033;
    border-radius: 16px ;
}
.c-valid-text
{
    font-size: 10px;
    font-weight: 500;
    color: #949494;
}
.c-apply-text
{
    font-size: 12px;
    font-weight: 600;   
    color: #128586;
}
.ff-select-coupon-code
{
    font-size: 14px;
    font-weight: 500;
}
.no-coupon-select-text
{
    font-size: 18px;
    font-weight: 600;
    color: #3E3E3E;
}
.type-coupon-text
{
    font-size: 14px;
    font-weight: 400;
    color: #3E3E3E;
}
.custom-coupon-modal
{
    background-color: rgba(0, 0, 0, 0.5); /* Scrim background */
    align-content: center;
}
.custom-coupon-modal-body
{
    background: white; /* Scrim background */
    border-radius: 12px;
}
.modal-header-overwrite {
   flex-direction: row-reverse!important;
   justify-content: start!important;
}
.modal-close-overwrite
{
    margin: unset!important;
}
.modal-body-overwrite
{
    padding:unset!important;
    margin:unset!important;
}

@media (max-width: 767px) {
    .ff-sub-course-image
    {
        max-width: 100px;
        border-radius: 8px;
    }
    .ff-right-buy-title
    {
        font-size: 16px;
    }
    .ff-sub-course-title
    {
        font-size: 12px;
        color:#3E3E3E;
    }
    .ff-sub-course-title-sub
    {
        font-weight: 400;
    }
    .ff-purchase__bill-wrap
    {
        height: unset!important;
    }
    .no-coupon-select-text
    {
        font-size: 16px;
    }
    .type-coupon-text{
       font-size: 12px; 
    }
    .ff-purchase__bill-wrap-overwrite {
        padding:0px!important;
        overflow-x:hidden!important;
    }
    
}