@tier-color: var(--tier-color, #000);

.subscriptionContainer {
    width: 480px;
    min-width: 480px;
    font-style: normal;

    .subscriptionTotalCardContainer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 0px 0px;
        gap: 24px;
        width: 432px;
        height: 43px;
        border-top: 1px solid #E0E2E7;
        border-radius: 6px;

        .subscriptionTotalContainer {
            h1 {
                font-style: normal;
                font-weight: 700;
                font-size: 22px;
                line-height: 27px;
                color: #1F1F28;
                margin: 0;
            }

            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            padding: 0px;
            gap: 24px;
            width: 100%;
        }
    }
}

.subscriptionCardContainer {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px 18px;
    gap: 16px;
    background: #FFFFFF;
    border: 1px solid #E0E2E7;
    border-bottom: 5px solid @tier-color;
    border-radius: 6px;
    color: @tier-color;

    .subscriptionTitle {
        font-weight: 800;
        font-size: 22px;
        line-height: 27px;
        text-transform: capitalize;
    }

    .subscriptionDesc {
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        color: #000;
    }

    .subscriptionPrice {
        font-weight: 700;
        font-size: 36px;
        line-height: 44px;
        text-transform: capitalize;
        display: flex;

        .sup {
            font-size: 16px;
            line-height: 19px;
        }
    }

    .subscriptionFreq {
        font-weight: 700;
        font-size: 12px;
        line-height: 15px;
        text-transform: uppercase;
        color: rgba(120, 122, 136, 0.5);
    }

    .subscriptionDetailItem {
        font-weight: 400;
        font-size: 11px;
        line-height: 16px;
        text-align: center;
        color: #1F1F28;

        &.highlight {
            font-weight: 700;
        }
    }
    .btn {
        border: none;
        background-color: @tier-color;
        font-size: 0.875rem;
        font-weight: 700;
        color: #fff;
        &:hover {
            box-shadow: 0px 4px 16px @tier-color;
        }
        &.outline {
            border: 1px solid @tier-color;
            background: none;
            color: @tier-color;
        }
    }
}
.pricing-table-row-container {
    overflow-y: scroll;
    height: 450px;
}