#PageBilling {
    .billing-renewals {
        &-checkout-modal {
            .ant-space-item {
                .ant-radio-group {
                    .ant-radio-checked {
                        .ant-radio-inner::after {
                            background: white !important;
                        }
                    }
                }
            }
        }
        .switch {
            .ant-switch-handle {
                &::before {
                    background-color: $mainPrimary !important;
                }
                top: 2px !important;
            }
            border: 2px solid #000;
            &.ant-switch-checked {
                border: 2px solid #000 !important;
                background-color: transparent;
            }

            @include atMax(425) {
                .ant-switch-handle {
                    width: 17px;
                    height: 17px;
                }

                .ant-switch-checked .ant-switch-handle {
                    left: calc(100% - 18px) !important;
                }
            }
        }

        .switchswitch {
            @include atMax(425) {
                .ant-switch-checked .ant-switch-handle {
                    left: calc(100% - 18px) !important;
                }
            }
        }

        @media (max-width: 425px) {
            .billing-card-product {
                width: 100% !important;
                margin-bottom: 20px;
            }
        }
    }
    .plan-btn-wrapper {
        display: flex !important;
        gap: 10px;
        @media (max-width: 425px) {
            flex-direction: column;
        }
    }

    .switch-text {
        &.active {
            color: $mainPrimary;
            font-weight: bold;
        }
    }

    .billing-card-product {
        background-color: #f1f1f3;
        border: 1px solid #d6d8d9;
        border-radius: 0px !important;
        height: 100%;

        &.card-feature {
            // .ant-card-body {
            //     padding-top: 196px;
            // }
        }

        &.active {
            .ant-card-body {
                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: $mainPrimary;
                    opacity: 0.1;
                }
            }
            border: 1px solid #d6d8d9;
        }
        .ant-card-body {
            padding: 20px;
        }

        .add-user {
            height: 40px;
            border: 1px solid $mainPrimary;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            svg {
                color: $mainPrimary;
            }
            span {
                font-size: 14px;
                font-weight: bold;
                color: $mainPrimary;
            }

            &.disabled {
                background-color: #f1f1f3;
                color: #d6d8d9;
                border: 1px solid #d6d8d9;
                svg {
                    color: #d6d8d9;
                }
                span {
                    color: #d6d8d9;
                }
            }
        }

        .feature-item {
            max-height: 25px;
            height: 25px;
            line-height: 1;
        }

        .inclusion-icon {
            color: $mainPrimary;

            height: 21px;
            width: 30px;
        }

        .typo {
            &-title {
                font-size: 16px;
                font-weight: bold;
                color: $mainPrimary;
            }

            &-discount {
                font-size: 12px;
                color: $mainPrimary;
            }

            &-price {
                font-size: 16px;

                span {
                    font-weight: bold;
                }
            }
            &-inclusion {
                &-subtext {
                    font-size: 13px !important;
                }
            }
        }

        .rectangle {
            padding: 3px;
            border: 1px solid #d6d8d9;
            width: 100%;
            text-align: center;
            background-color: white;
        }
    }

    .billing-credit-card {
        border: 1px solid grey;
        height: 150px;
        width: 100%;
        background-color: #eeeeee;
        border-radius: 10px;
        padding: 12px !important;

        &-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            &-icon {
                color: $mainPrimary;
            }

            &:hover {
                background-color: #e6e7e9 !important;
                cursor: pointer;
            }
        }

        .card {
            &-header {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                &-logo {
                    height: 25px;
                }

                &-btn {
                    padding: 0px !important;
                    width: 0px;

                    &-icon {
                        color: $mainPrimary;
                    }
                }
            }

            &-body {
                display: flex;
                justify-content: space-between;
                font-size: 20px;
                height: 50px;
                align-items: center;

                .hidden-number {
                    display: flex;
                    align-content: center;
                }
            }

            &-footer {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
            }
        }
    }

    .custom-table {
        border: 1px solid #e6e7e9 !important;

        .ant-table-thead {
            .ant-table-cell:nth-child(1),
            .ant-table-cell:nth-child(2) {
                background-color: #f5f5f5;
            }
        }

        .ant-table-row {
            border: none !important;

            .ant-table-cell {
                border-bottom: none !important;
            }
        }
    }

    .custom-card {
        border: 1px solid #e6e7e9 !important;
        .ant-card-head {
            padding: 0px !important;
            background-color: #f9f9f9 !important;
            &-title {
                padding: 0px !important;
            }
        }
        &-title {
            display: flex;
            justify-content: space-between;
            align-items: center;

            &-first {
                padding: 20px;
                width: 40%;
                background-color: #f5f5f5;
                font-size: 20px;
                font-weight: bold;
                color: black;
            }
        }

        .ant-card-body {
            padding-top: 0px !important;
            .float-left {
                display: flex;
                justify-content: flex-start;
            }
            .float-right {
                display: flex;
                justify-content: flex-end;
            }
        }
    }

    .billing-chkbox {
        text-align: center;
        span {
            padding: 0px !important;
        }
    }

    .link-text {
        color: $mainPrimary;
    }

    .custom-range-picker {
        border: none !important;
        &-icon {
            color: #808080;
        }
        .ant-picker-range {
            border: none !important;
        }
        .ant-picker-focused {
            border: none !important;
            box-shadow: none !important;
        }
    }

    .ant-select-arrow {
        color: $mainPrimary;
    }

    .card-billing-storage {
        border: 1px solid #e6e7e9 !important;
        border-radius: 5px !important;

        .ant-card-head {
            background: #f5f5f5 !important;
            border-bottom: 0px !important;
            border-top-left-radius: 5px !important;
            border-top-right-radius: 5px !important;
            padding: 0px 20px !important;
            min-height: auto !important;

            .ant-card-head-wrapper {
                .ant-card-head-title {
                    font-weight: 300;
                    padding: 10px 0px !important;
                    font-size: 14px !important;
                }
            }
        }

        .ant-card-body {
            padding: 20px !important;

            .total,
            .used {
                font-weight: 600;
                font-size: 16px;
            }
        }
    }

    .plan-card-wrapper {
        .billing-card-product .ant-card-body {
            padding-left: 15px;
            padding-right: 15px;
        }

        min-width: 157px !important;
    }

    .feature-card-wrapper {
        max-width: 458px !important;
    }

    .feature {
        &-mobile-view {
            display: none !important;
        }
        &-desktop-view {
            display: flex !important;
        }
    }

    @media (max-width: 768px) {
        .ant-layout:not(.ant-layout-has-collapse) {
            .feature-card-wrapper {
                display: none !important;
            }

            .feature {
                &-mobile-view {
                    display: block !important;
                    .inclusion-icon {
                        height: 12px !important;
                        width: 12px !important;
                    }

                    .feature-item {
                        max-height: unset !important;
                        height: unset !important;
                        line-height: 2 !important;
                    }
                }
                &-desktop-view {
                    display: none !important;
                }
            }
        }
    }

    @media (max-width: 1023px) and (min-width: 320px) {
        .ant-layout-has-collapse {
            .feature-card-wrapper {
                display: none !important;
            }

            .plan-card-wrapper {
                margin-bottom: 20px;
            }

            .feature {
                &-mobile-view {
                    display: block !important;
                    .inclusion-icon {
                        height: 12px !important;
                        width: 12px !important;
                    }

                    .feature-item {
                        max-height: unset;
                        height: unset;
                        line-height: 2;

                        // .ant-space-item {
                        // }
                    }
                }
                &-desktop-view {
                    display: none !important;
                }
            }

            .ant-col-xl-3 {
                display: block;
                flex: 0 0 31.5% !important;
                max-width: 31.5% !important;
            }

            @media (max-width: 768px) {
                .ant-col-md-12 {
                    display: block;
                    flex: 0 0 50% !important;
                    max-width: 50% !important;
                }
            }

            @media (max-width: 425px) {
                .ant-col-xs-24 {
                    display: block;
                    flex: 0 0 100% !important;
                    max-width: 100% !important;
                }
            }
        }
    }

    @media (max-width: 1264px) and (min-width: 320px) {
        .ant-layout-no-collapse {
            .feature-card-wrapper {
                display: none !important;
            }

            .plan-card-wrapper {
                margin-bottom: 20px;
            }

            .feature {
                &-mobile-view {
                    display: block !important;
                    .inclusion-icon {
                        height: 12px !important;
                        width: 12px !important;
                    }

                    .feature-item {
                        max-height: unset;
                        height: unset;
                        line-height: 2;

                        // .ant-space-item {
                        // }
                    }
                }
                &-desktop-view {
                    display: none !important;
                }
            }

            .ant-col-xl-3 {
                display: block;
                flex: 0 0 31.5% !important;
                max-width: 31.5% !important;
            }

            .ant-col-md-12 {
                display: block;
                flex: 0 0 50% !important;
                max-width: 50% !important;
            }
        }
    }
}

.billing-renewals {
    &-checkout-modal {
        .ant-space-item {
            .ant-radio-group {
                .ant-radio-checked {
                    .ant-radio-inner::after {
                        background: white !important;
                    }
                }
            }
        }

        .custom-card {
            border: 1px solid #e6e7e9 !important;
            .ant-card-head {
                padding: 0px !important;
                background-color: #f9f9f9 !important;
                &-title {
                    padding: 0px !important;
                }
            }
            &-title {
                display: flex;
                justify-content: space-between;
                align-items: center;

                &-first {
                    padding: 20px;
                    width: 40%;
                    background-color: #f5f5f5;
                    font-size: 20px;
                    font-weight: bold;
                    color: black;
                }
            }

            .ant-card-body {
                padding-top: 0px !important;
                .float-left {
                    display: flex;
                    justify-content: flex-start;
                }
                .float-right {
                    display: flex;
                    justify-content: flex-end;
                }
            }
        }
    }
}

.card-custom-mobile {
    .custom-card-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;

        .custom-card-title-second {
            .ant-space {
                display: inline-flex;
                flex-wrap: wrap;
            }

            @include atMax(592) {
                width: 100%;
                padding-left: 20px;
                padding-bottom: 20px;
            }
        }

        .select-dropdown-custom {
            padding: 5px;

            @include atMax(378) {
                padding: 0px;
                width: calc(100% - 24px) !important;
            }
        }

        @include atMax(378) {
            .custom-card-title-second {
                .ant-space-item {
                    width: 100%;
                }
            }
        }
    }
}

.custom-table-filter-ph {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.wrap-modal-billing-users {
    .ant-modal {
        width: 40% !important;

        @include atMax(1371) {
            width: 55% !important;
        }
        @include atMax(1200) {
            width: 60% !important;
        }

        @include atMax(992) {
            width: 70% !important;
        }

        @include atMax(768) {
            width: 80% !important;
        }

        @include atMax(576) {
            width: 100% !important;
        }

        .ant-modal-content {
            .ant-modal-body {
                .table-users {
                    .ant-table {
                        .ant-table-container {
                            .ant-table-body {
                                .ant-table-tbody {
                                    .ant-table-row {
                                        .ant-table-cell {
                                            .ant-flex {
                                                .ant-input {
                                                    text-align: center;
                                                    width: 15%;
                                                    background-color: transparent;
                                                    border: 0px;

                                                    &:focus {
                                                        box-shadow: none;
                                                        border: 0px;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .ant-card {
                    .ant-card-head {
                        padding: 0px !important;

                        .ant-card-head-wrapper {
                            .ant-card-head-title {
                                padding: 5px 0px;

                                .ant-flex {
                                    .ant-flex {
                                        font-size: 26px !important;
                                        font-weight: 600;
                                    }

                                    .ant-flex {
                                        .ant-flex {
                                            font-size: 16px !important;
                                            font-weight: 400;
                                        }
                                    }
                                }

                                .card-selected-wrapper {
                                    width: 60%;

                                    .card-selected {
                                        border: 1px solid #ccc;
                                        background: #fff;
                                        padding: 3px 0px 3px 5px;
                                        width: 100%;
                                        border-radius: 5px;

                                        .ant-select {
                                            width: 100%;

                                            .ant-select-selector {
                                                border: 0px;
                                                background: transparent;
                                                box-shadow: none;

                                                &:focus {
                                                    box-shadow: none;
                                                    border: 0px;
                                                }
                                            }
                                        }
                                    }
                                }

                                .custom-card-title-first {
                                    font-size: 20px !important;
                                    font-weight: 600;
                                    padding: 10px !important;

                                    @include atMax(1472) {
                                        width: 35%;
                                    }

                                    @include atMax(1441) {
                                        width: 30%;
                                    }
                                    @include atMax(1286) {
                                        width: auto;
                                    }
                                    @include atMax(768) {
                                        padding: 20px 15px;
                                    }
                                    @include atMax(598) {
                                        padding: 20px 10px;
                                        font-size: 18px;
                                    }

                                    @include atMax(410) {
                                        font-size: 16px;
                                    }
                                    @include atMax(410) {
                                        font-size: 16px;
                                    }
                                }

                                .custom-card-title-second {
                                    @include atMax(1472) {
                                        padding-left: 10px;
                                    }
                                    @include atMax(1472) {
                                        width: auto;
                                    }
                                    @include atMax(592) {
                                        padding: 0px !important;
                                    }

                                    .ant-space {
                                        .ant-space-item {
                                            .ant-typography {
                                                @include atMax(592) {
                                                    font-size: 14px;
                                                }
                                                @include atMax(378) {
                                                    font-size: 12px !important;
                                                }
                                            }

                                            .select-dropdown-custom {
                                                @include atMax(1247) {
                                                    width: 200px !important;
                                                }
                                                @include atMax(798) {
                                                    width: 180px !important;
                                                }
                                                @include atMax(655) {
                                                    width: 160px !important;
                                                }
                                                @include atMax(627) {
                                                    width: 150px !important;
                                                }
                                                @include atMax(592) {
                                                    width: 150px !important;
                                                }
                                            }
                                        }
                                    }

                                    .select-dropdown-custom {
                                        .float-wrapper {
                                            background: #fff;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .ant-card-body {
                        padding-left: 10px !important;
                        padding-right: 10px !important;

                        .ant-flex {
                            .value {
                                margin-right: 50px;
                            }
                        }
                    }

                    &.coupon-card {
                        .ant-card-body {
                            padding: 10px !important;

                            .promo-wrapper {
                                @include atMax(575) {
                                    flex-direction: column;
                                }

                                .promo-input-wrapper {
                                    width: 50%;

                                    @include atMax(767) {
                                        width: 70%;
                                    }

                                    @include atMax(575) {
                                        width: 100%;
                                    }

                                    .ant-input {
                                        width: 100%;
                                    }
                                }

                                .ant-typography {
                                    margin-right: 100px;

                                    @include atMax(767) {
                                        margin-right: 50px;
                                    }

                                    @include atMax(575) {
                                        margin-right: 0px;
                                    }
                                }
                            }
                        }
                    }
                }

                .btn_submit {
                    width: 80%;

                    @include atMax(575) {
                        width: 100%;
                    }
                    .ant-btn {
                        color: $mainPrimaryText;
                        background-color: $mainPrimary;
                        border-color: $mainPrimary;
                        border-radius: 5px;

                        &:hover {
                            color: $mainPrimaryTextActive;
                            background-color: $mainPrimaryActive;
                            border-color: $mainPrimary;
                        }

                        &:focus {
                            color: $mainPrimaryTextActive;
                            background-color: $mainPrimaryActive;
                            border-color: $mainPrimary;
                        }

                        &.outlined {
                            color: $mainPrimaryTextActive;
                            background-color: $mainPrimaryActive;
                            border-color: $mainPrimary;

                            &:hover {
                                color: $mainPrimaryTextActive;
                                background-color: rgba($mainPrimary, 0.2);
                                border-color: $mainPrimary;
                            }

                            &:focus {
                                color: $mainPrimaryTextActive;
                                background-color: rgba($mainPrimary, 0.2);
                                border-color: $mainPrimary;
                            }
                        }

                        &.invert {
                            color: $mainPrimaryTextActive;
                            background-color: transparent;
                            border-color: $mainPrimary;

                            &:hover {
                                color: $mainPrimaryText;
                                background-color: $mainPrimary;
                                border-color: $mainPrimary;
                            }

                            &:focus {
                                color: $mainPrimaryText;
                                background-color: $mainPrimary;
                                border-color: $mainPrimary;
                            }
                        }

                        &.active {
                            color: $mainPrimaryText;
                            background-color: $mainPrimary;
                            border-color: $mainPrimary;

                            &:hover {
                                color: $mainPrimaryText;
                                background-color: $mainPrimary;
                                border-color: $mainPrimary;
                            }

                            &:focus {
                                color: $mainPrimaryText;
                                background-color: $mainPrimary;
                                border-color: $mainPrimary;
                            }
                        }

                        &.custom-outlined {
                            color: $mainPrimaryTextActive;
                            background-color: $mainPrimaryActive;
                            border-color: $mainPrimary;

                            &:hover {
                                color: $mainPrimaryTextActive;
                                background-color: rgba($mainPrimary, 0.2);
                                border-color: $mainPrimary;
                            }

                            &:focus {
                                color: $mainPrimaryTextActive;
                                background-color: white;
                                border-color: $mainPrimary;
                            }
                        }

                        width: 20%;

                        @include atMax(575) {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}

.wrap-modal-billing-renewals-checkout {
    .ant-modal {
        width: 40% !important;

        @include atMax(1371) {
            width: 55% !important;
        }
        @include atMax(1200) {
            width: 60% !important;
        }

        @include atMax(992) {
            width: 70% !important;
        }

        @include atMax(768) {
            width: 80% !important;
        }

        @include atMax(576) {
            width: 100% !important;
        }

        .ant-modal-content {
            .ant-modal-body {
                .tbl-storage-payment {
                    .ant-table {
                        .ant-table-container {
                            .ant-table-body {
                                .ant-table-tbody {
                                    .ant-table-row {
                                        .ant-table-cell {
                                            .ant-flex {
                                                .ant-input {
                                                    text-align: center;
                                                    width: 15%;
                                                    background-color: transparent;
                                                    border: 0px;

                                                    &:focus {
                                                        box-shadow: none;
                                                        border: 0px;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .ant-card {
                    .ant-card-head {
                        @include atMax(592) {
                            min-height: auto !important;
                        }

                        .ant-card-head-wrapper {
                            .ant-card-head-title {
                                .custom-card-title {
                                    .custom-card-title-first {
                                        @include atMax(1472) {
                                            width: 35%;
                                        }

                                        @include atMax(1441) {
                                            width: 30%;
                                        }
                                        @include atMax(1286) {
                                            width: auto;
                                        }
                                        @include atMax(768) {
                                            padding: 20px 15px;
                                        }
                                        @include atMax(598) {
                                            padding: 20px 10px;
                                            font-size: 18px;
                                        }

                                        @include atMax(410) {
                                            font-size: 16px;
                                        }
                                        @include atMax(410) {
                                            font-size: 16px;
                                        }
                                    }

                                    .custom-card-title-second {
                                        @include atMax(1472) {
                                            padding-left: 10px;
                                        }
                                        @include atMax(1472) {
                                            width: auto;
                                        }
                                        @include atMax(592) {
                                            padding: 0px !important;
                                        }

                                        .ant-space {
                                            .ant-space-item {
                                                .ant-typography {
                                                    @include atMax(592) {
                                                        font-size: 14px;
                                                    }
                                                    @include atMax(378) {
                                                        font-size: 12px !important;
                                                    }
                                                }

                                                .select-dropdown-custom {
                                                    @include atMax(1247) {
                                                        width: 200px !important;
                                                    }
                                                    @include atMax(798) {
                                                        width: 180px !important;
                                                    }
                                                    @include atMax(655) {
                                                        width: 160px !important;
                                                    }
                                                    @include atMax(627) {
                                                        width: 150px !important;
                                                    }
                                                    @include atMax(592) {
                                                        width: 150px !important;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

#PageBilling
    .billing-renewals-checkout-modal
    .ant-space-item
    .ant-radio-group
    .ant-radio-checked
    .ant-radio-inner::after {
    background: white !important;
}

.billing-renewals-checkout-modal
    .ant-space-item
    .ant-radio-group
    .ant-radio-checked
    .ant-radio-inner::after {
    background: white !important;
}
.billing-renewals-checkout-modal .custom-card {
    border: 1px solid #e6e7e9 !important;
}
.billing-renewals-checkout-modal .custom-card .ant-card-head {
    padding: 0px !important;
    background-color: #f9f9f9 !important;
}
.billing-renewals-checkout-modal .custom-card .ant-card-head-title {
    padding: 0px !important;
}
// .billing-renewals-checkout-modal .custom-card-title {
//     display: flex;
//     justify-content: space-between;
//     align-items: center;
// }
// .billing-renewals-checkout-modal .custom-card-title-first {
//     padding: 20px;
//     width: 40%;
//     background-color: #f5f5f5;
//     font-size: 20px;
//     font-weight: bold;
//     color: black;
// }
.billing-renewals-checkout-modal .custom-card .ant-card-body {
    padding-top: 0px !important;
}
.billing-renewals-checkout-modal .custom-card .ant-card-body .float-left {
    display: flex;
    justify-content: flex-start;
}
.billing-renewals-checkout-modal .custom-card .ant-card-body .float-right {
    display: flex;
    justify-content: flex-end;
}