.console_subscriptions_modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background: #000c;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

    .console_subscriptions_modal-backdrop * {
        box-sizing: border-box;
        font-family: Arial,Helvetica,sans-serif
    }

@media (max-width: 768px) {
    .console_subscriptions_modal-backdrop {
        position: absolute
    }
}

.console_subscriptions_modal-content {
    position: absolute;
    z-index: 10;
    display: flex;
    flex-direction: column;
    background-color: #f1f1f1;
    border-radius: 10px;
    width: auto;
    height: auto;
    max-height: 75vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 4px 8px #0000001a;
    border: 1px solid black
}

@media (max-width: 768px) {
    .console_subscriptions_modal-content {
        width: 100%;
        max-height: 100vh
    }
}

.console_subscriptions_modal-header {
    background-color: #f1f1f1;
    padding: 2rem 2%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0px
}

    .console_subscriptions_modal-header.colored {
        background-color: #447995
    }

    .console_subscriptions_modal-header h1 {
        display: flex;
        width: 100%;
        justify-content: center;
        font-weight: 700;
        font-size: 2.5rem;
        color: #000;
        margin: 0;
        padding: 1rem;
        text-align: center
    }

    .console_subscriptions_modal-header.colored h1 {
        color: #fff
    }

.console_subscriptions_modal-button {
    position: absolute;
    top: -1%;
    right: 1%;
    border: none;
    background-color: transparent;
    font-size: 4rem;
    cursor: pointer;
    padding: 0;
    z-index: 200
}

    .console_subscriptions_modal-button.white {
        color: #fff
    }

    .console_subscriptions_modal-button.black {
        color: #000
    }

.console_subscriptions_modal-content h2 {
    font-weight: 100;
    font-size: 2rem;
    white-space: nowrap
}

.console_subscriptions_modal-content h3 {
    font-weight: 100;
    font-size: 1.75rem
}

.console_subscriptions_modal-content p {
    font-weight: 100;
    font-size: 1.5rem;
    margin-top: 0;
    width: clamp(30rem,40vw,60rem)
}

@media (max-width: 768px) {
    .console_subscriptions_modal-content p {
        width: auto
    }
}

.console_subscriptions_modal-body {
    padding: 3rem 8rem;
    width: 100%;
    overflow: auto
}

@media (max-width: 768px) {
    .console_subscriptions_modal-body {
        padding: 3rem 2rem
    }
}

.console_subscriptions_modal-body.colored_header {
    padding-top: 0rem
}

.console_subscriptions_button_menu_toolbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 20px;
    border: none;
    background-color: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color .2s ease-in-out,border-bottom .2s ease-in-out;
    font-size: clamp(1rem,1vw,3rem)
}

.console_subscriptions_button_menu_toolbar_icon_text {
    display: flex;
    align-items: center;
    gap: 6px
}

    .console_subscriptions_button_menu_toolbar_icon_text img {
        width: clamp(1rem,4vw,2rem);
        height: clamp(1rem,4vw,2rem)
    }

.console_subscriptions_button_menu_toolbar_hr {
    width: 100%;
    height: 2px;
    background-color: #fff;
    border: 0px;
    margin-top: 5px;
    margin-bottom: 5px
}

.console_subscriptions_loading_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto
}

.console_subscriptions_loading_spinner {
    border: 8px solid rgba(0,0,0,.1);
    border-left-color: #447995;
    border-radius: 50%;
    width: 75px;
    height: 75px;
    animation: spin 1s linear infinite
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.console_subscriptions_menu_toolbar {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    align-items: center;
    background-color: #447995;
    overflow-x: scroll;
    overflow-y: hidden;
    border-radius: 0 0 10px 10px;
    height: 10%
}

.console_subscriptions_button_menu_bubble {
    display: flex;
    width: clamp(3rem,12vw,5rem);
    height: clamp(3rem,12vw,5rem);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 20px;
    border: none;
    background-color: #447995;
    color: #fff;
    cursor: pointer;
    transition: background-color .2s ease-in-out,border-bottom .2s ease-in-out;
    border-radius: 50%
}

    .console_subscriptions_button_menu_bubble img {
        width: clamp(1.5rem,5vw,2rem);
        height: clamp(1.5rem,5vw,2rem)
    }

.console_subscriptions_menu_bubble_container {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 1000
}

.console_subscriptions_menu_bubble_expanded_container {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.console_subscriptions_tab_manager {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 75rem;
    width: clamp(300px,95vw,115rem);
    border: 1px solid black;
    border-radius: 10px
}

    .console_subscriptions_tab_manager * {
        box-sizing: border-box;
        font-family: Arial,Helvetica,sans-serif
    }

@media (max-width: 768px) {
    .console_subscriptions_tab_manager {
        border: 0px
    }
}

.console_subscriptions_tabs_container {
    display: flex;
    justify-content: flex-end;
    height: 90%;
    width: 100%;
    transition: all .2s ease-in-out;
    overflow: auto
}

@media (max-width: 768px) {
    .console_subscriptions_tabs_container {
        height: 100%
    }
}

.console_subscriptions_tabs_container.open {
    margin-left: 240px;
    width: calc(100% - 240px)
}

.console_subscriptions_toggle_switch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Arial,sans-serif;
    gap: 10px
}

.console_subscriptions_toggle_text.left {
    order: -1
}

.console_subscriptions_toggle_text.right {
    order: 1
}

.console_subscriptions_toggle_wrapper {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px
}

.console_subscriptions_toggle_input {
    opacity: 0;
    width: 0;
    height: 0
}

.console_subscriptions_toggle_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    transition: background-color .3s,transform .3s;
    box-shadow: 0 4px 8px #0000001a
}

    .console_subscriptions_toggle_slider.single_label {
        background-color: #d9d9d9
    }

    .console_subscriptions_toggle_slider.double_label {
        background-color: #447995
    }

    .console_subscriptions_toggle_slider:before {
        content: "";
        position: absolute;
        height: 24px;
        width: 24px;
        background-color: #fff;
        border-radius: 50%;
        left: 3px;
        top: 3px;
        transition: transform .3s ease-in-out;
        box-shadow: 0 2px 4px #0000001a
    }

.console_subscriptions_toggle_input:checked + .toggle_slider {
    background-color: #4caf50
}

    .console_subscriptions_toggle_input:checked + .toggle_slider:before {
        transform: translate(30px)
    }

.console_subscriptions_toggle_input:checked + .single_label {
    background-color: #4caf50
}

    .console_subscriptions_toggle_input:checked + .single_label:before {
        transform: translate(30px)
    }

.console_subscriptions_toggle_input:checked + .double_label {
    background-color: #4caf50
}

    .console_subscriptions_toggle_input:checked + .double_label:before {
        transform: translate(30px)
    }

.console_subscriptions_toggle_input[disabled] {
    opacity: .5;
    pointer-events: none
}

.console_subscriptions_toggle_wrapper > .console_subscriptions_toggle_input[disabled] + .console_subscriptions_toggle_slider {
    background-color: #ccc
}

.console_subscriptions_toggle_wrapper > .console_subscriptions_toggle_input:checked[disabled] + .console_subscriptions_toggle_slider {
    background-color: #999
}

.console_subscriptions_toggle_text {
    font-size: clamp(1rem,4vw,1.5rem);
    font-weight: 100;
    transition: color .3s ease
}

    .console_subscriptions_toggle_text.inactive {
        color: gray
    }

.modal_disable_auto_renew_confirmation_content {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.modal_disable_auto_renew_confirmation_button_container {
    display: flex;
    gap: 6rem;
    width: 100%;
    justify-content: center
}

@media (max-width: 768px) {
    .modal_disable_auto_renew_confirmation_button_container {
        gap: 1rem
    }
}

.modal_disable_auto_renew_confirmation_button {
    width: 35%;
    border: none;
    color: #000;
    text-align: center;
    text-decoration: none;
    font-size: clamp(1rem,4vw,1.5rem);
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 4px 6px #0000001a;
    font-family: sans-serif;
    padding: 10px 0;
    white-space: nowrap
}

@media (max-width: 768px) {
    .modal_disable_auto_renew_confirmation_button {
        width: 100%
    }
}

.modal_disable_auto_renew_confirmation_button.green {
    background-color: #87d483
}

.modal_disable_auto_renew_confirmation_button.red {
    background-color: #d2514c
}

.modal_cancel_subscription_confirmation_content {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.modal_cancel_subscription_confirmation_button_container {
    display: flex;
    gap: 6rem;
    width: 100%;
    justify-content: center
}

@media (max-width: 768px) {
    .modal_cancel_subscription_confirmation_button_container {
        gap: 1rem
    }
}

.modal_cancel_subscription_confirmation_button {
    width: 35%;
    border: none;
    color: #000;
    text-align: center;
    text-decoration: none;
    font-size: clamp(1rem,4vw,1.5rem);
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 4px 6px #0000001a;
    font-family: sans-serif;
    padding: 10px 0;
    white-space: nowrap
}

@media (max-width: 768px) {
    .modal_cancel_subscription_confirmation_button {
        width: 100%
    }
}

.modal_cancel_subscription_confirmation_button.green {
    background-color: #87d483
}

.modal_cancel_subscription_confirmation_button.red {
    background-color: #d2514c
}

.modal_cancel_subscription_complete_content {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.page_home_container {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden
}

    .page_home_container img {
        width: clamp(1rem,10vw,4rem);
        height: clamp(1rem,10vw,4rem);
        cursor: pointer
    }

.page_home_manager_container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    justify-content: center
}

    .page_home_manager_container h1 {
        font-size: clamp(1rem,6vw,3rem);
        font-weight: 100;
        margin-top: 10px;
        margin-bottom: 10px
    }

    .page_home_manager_container h3 {
        font-weight: 100;
        font-size: 1.5rem;
        font-size: clamp(1.5rem,2vw,2rem);
        margin-top: 0
    }

.page_home_title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%
}

    .page_home_title img {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 100
    }

.page_home_content_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 90%;
    justify-content: center;
    align-items: center
}

.page_home_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(30%,1fr));
    width: 80%;
    height: 100%;
    -webkit-user-select: none;
    user-select: none;
    justify-items: center;
    align-items: center;
    gap: 40px 80px;
    overflow: auto
}

    .page_home_grid.menu_open {
        gap: 40px 40px;
        width: 90%
    }

@media (max-width: 1080px) {
    .page_home_grid {
        grid-template-columns: 1fr;
        width: 100%;
        height: 80%
    }
}

.page_home_grid * {
    -webkit-user-select: none;
    user-select: none
}

.page_home_pie_chart_card {
    display: flex;
    flex-direction: column;
    background-color: #687c8d;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 6px #0000001a;
    padding: 1.75rem;
    height: clamp(10rem,50vw,25rem);
    width: 100%
}

.page_home_pie_chart_title {
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
    color: #fff
}

.page_home_pie_chart_content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%
}

.page_home_pie_chart_description {
    font-size: clamp(1rem,1.25vw,1.25rem);
    margin-top: 5px;
    color: #fff;
    width: 35%
}

.page_home_pie_chart_column {
    display: flex;
    flex-direction: column;
    width: 65%;
    height: 90%
}

.page_home_pie_chart_chart {
    background-color: #fff;
    display: flex;
    justify-content: center;
    border-radius: 10px;
    flex-basis: 100%;
    align-items: center
}

.page_home_pie_chart text {
    font-size: clamp(.5rem,1vw,.8rem)
}

.page_home_side_menu {
    width: 35%;
    overflow: hidden;
    background-color: #e9f2f6;
    border-top-left-radius: 10px;
    z-index: 500
}

@media (max-width: 768px) {
    .page_home_side_menu {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px
    }
}

.page_home_side_menu_container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem
}

.page_home_side_menu_icon {
    display: flex;
    width: 100%;
    justify-content: flex-end
}

.page_home_side_menu_content {
    display: flex;
    width: 100%;
    height: 90%;
    flex-direction: column;
    gap: 6rem;
    padding-bottom: 24px;
    justify-content: space-between
}

    .page_home_side_menu_content h1 {
        font-size: clamp(1rem,2.5vw,2.5rem);
        font-weight: 100;
        margin-top: 10px;
        margin-bottom: 10px
    }

.page_home_side_menu_main_content {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 6rem
}

    .page_home_side_menu_main_content hr {
        border: none;
        height: 2px;
        width: 100%;
        background-color: #447995;
        margin-top: 0;
        margin-bottom: 15px;
        flex-shrink: 0
    }

    .page_home_side_menu_main_content p {
        font-size: clamp(1rem,1.25vw,1.25rem)
    }

.page_home_side_menu_button_container {
    display: flex;
    width: 100%;
    justify-content: center
}

.page_home_side_menu_content_cancel_button {
    width: 65%;
    background-color: #d2514c;
    border: none;
    color: #000;
    text-align: center;
    text-decoration: none;
    font-size: clamp(1rem,4vw,1.5rem);
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 4px 6px #0000001a;
    font-family: sans-serif;
    padding: 10px 0
}

    .page_home_side_menu_content_cancel_button:disabled {
        background-color: #ccc;
        color: #888;
        cursor: not-allowed;
        box-shadow: none;
        opacity: .7
    }

.page_change_plan_checkout_review_purchase_button.hide {
    visibility: hidden;
    pointer-events: none
}

.page_home_side_menu_checkbox_input_container {
    display: flex;
    flex-direction: column;
    width: 100%
}

    .page_home_side_menu_checkbox_input_container label {
        font-size: 2rem
    }

    .page_home_side_menu_checkbox_input_container input {
        width: 75%;
        height: 2rem
    }

.page_home_trial_plan {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.console_subscriptions_box {
    border-radius: 10px;
    padding: 18px;
    border: 1px solid grey;
    height: 100%;
    width: 100%
}

.console_subscriptions_checkbox_label {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center
}

    .console_subscriptions_checkbox_label label {
        font-size: clamp(.75rem,3vw,1.3rem);
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-left: 0;
        margin-bottom: 0
    }

        .console_subscriptions_checkbox_label label input[type=checkbox] {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            height: clamp(.75rem,4vw,1.5rem);
            width: clamp(.75rem,4vw,1.5rem);
            border-radius: 0;
            border: 2px solid #ccc;
            background-color: transparent;
            transition: background-color .2s,border-color .2s;
            margin-right: 12px;
            cursor: pointer;
            flex-shrink: 0;
            position: relative
        }

            .console_subscriptions_checkbox_label label input[type=checkbox]:checked {
                border-color: gray;
                background-color: #fff;
                box-shadow: inset 0 0 5px #000000bf
            }

                .console_subscriptions_checkbox_label label input[type=checkbox]:checked:before {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    width: 8px;
                    height: 12px;
                    border-right: 3px solid black;
                    border-bottom: 3px solid black;
                    transform: translate(-50%,-60%) rotate(45deg)
                }

            .console_subscriptions_checkbox_label label input[type=checkbox]:focus {
                outline: 2px solid #ccc
            }

.console_subscriptions_input {
    border-radius: 5px;
    height: 2rem;
    width: 100%;
    border: none;
    box-shadow: 0 0;
    padding: 0 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #000
}

    .console_subscriptions_input.error {
        outline: 1px solid red
    }

.console_subscriptions_dropdown_container {
    border-radius: 5px;
    height: 2rem;
    width: 100%;
    border: none;
    box-shadow: 0 0;
    padding: 0;
    border: 1px solid #ddd;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

    .console_subscriptions_dropdown_container.error {
        outline: 1px solid red
    }

.console_subscriptions_billing_form_container {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 6px
}

.console_subscriptions_billing_form_group {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 24px
}

.console_subscriptions_billing_form_group_label_input {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1px
}

    .console_subscriptions_billing_form_group_label_input div {
        min-width: clamp(90px,11vw,130px);
        min-height: clamp(18px,2.2vw,26px)
    }

.console_subscriptions_billing_form_group label {
    font-size: clamp(1rem,2vw,1.5rem);
    margin-left: 0;
    margin-bottom: 0;
    white-space: nowrap
}

.page_wallet_container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    cursor: default;
    padding: 1.5rem;
    justify-content: center
}

    .page_wallet_container h1 {
        font-size: 3rem;
        font-weight: 100;
        margin-top: 10px;
        margin-bottom: 10px
    }

    .page_wallet_container h3 {
        margin-top: 0;
        font-size: 1.5rem
    }

.page_wallet_content_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 90%;
    justify-content: center;
    align-items: center
}

.page_wallet_console_container {
    display: flex;
    width: 80%;
    border: 1px solid grey;
    border-radius: 10px;
    max-height: 80%
}

    .page_wallet_console_container.disabled {
        pointer-events: none;
        opacity: .8;
        cursor: default;
        background-color: initial
    }

.page_wallet_console_list_container {
    display: flex;
    width: 35%;
    flex-direction: column;
    overflow: auto;
    border-right: 1px solid black;
    gap: 1rem;
    padding: 1rem
}

.page_wallet_console_list_placeholder_container {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    background-color: #f1f1f1;
    height: 10rem;
    outline: 0px;
    border: 1px solid #ddd;
    padding: 0 2.5%;
    cursor: pointer;
    box-shadow: 2px 2px 5px #0003
}

    .page_wallet_console_list_placeholder_container span {
        font-size: clamp(1rem,3vw,1.25rem);
        text-align: center
    }

.page_wallet_console_list_saved_payment_container {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    background-color: #f1f1f1;
    height: 10rem;
    outline: 0px;
    border: 1px solid #ddd;
    padding: 0 2.5%;
    cursor: pointer;
    box-shadow: 2px 2px 5px #0003
}

    .page_wallet_console_list_saved_payment_container img {
        width: 5.5rem;
        height: 5.5rem
    }

    .page_wallet_console_list_saved_payment_container:hover {
        border: .35rem solid #447995
    }

    .page_wallet_console_list_saved_payment_container.disabled {
        pointer-events: none;
        opacity: .6;
        cursor: default;
        background-color: initial
    }

    .page_wallet_console_list_saved_payment_container.selected {
        border: .35rem solid #447995
    }

.page_wallet_console_list_saved_payment_default_badge {
    position: absolute;
    display: flex;
    top: -10px;
    left: 10px;
    background-color: #4a758a;
    color: #fff;
    font-size: 1rem;
    padding: 4px 10px;
    border-radius: 10px;
    box-shadow: 0 2px 4px #0003
}

.page_wallet_console_list_saved_payment_default_warning {
    position: absolute;
    display: flex;
    top: -5px;
    right: -5px;
    color: #fff;
    font-size: 1rem;
    padding: 4px 10px;
    border-radius: 10px
}

.page_wallet_console_list_saved_payment_details {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem
}

.page_wallet_console_list_saved_payment_details_name {
    display: flex;
    font-size: 1.75rem;
    width: 100%
}

.page_wallet_console_list_saved_payment_details_nums {
    display: flex;
    justify-content: space-between;
    font-size: 1.25rem
}

    .page_wallet_console_list_saved_payment_details_nums .exp {
        color: red;
        font-weight: 700
    }

.page_wallet_console_manager_container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 65%;
    align-items: center;
    padding: 1rem 5rem;
    gap: 1rem
}

@media (max-width: 1080px) {
    .page_wallet_console_manager_container {
        padding: 1rem 2.5rem
    }
}

.page_wallet_console_manager_header_container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #000
}

    .page_wallet_console_manager_header_container img {
        position: absolute;
        top: 15px;
        right: -50px;
        width: 3rem;
        height: 3rem;
        cursor: pointer;
        filter: invert(100%)
    }

.page_wallet_console_manager_billing_container {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 6px
}

.page_wallet_console_manager_billing_group {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 24px
}

.page_wallet_console_manager_billing_group_label_input {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2px
}

.page_wallet_console_manager_billing_options_container {
    display: flex;
    font-size: 1.3rem;
    justify-content: space-between;
    width: 100%
}

.page_wallet_console_manager_billing_options_edit_delete_container {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer
}

    .page_wallet_console_manager_billing_options_edit_delete_container span {
        text-decoration: underline
    }

.page_wallet_console_manager_billing_options_icon_text_container {
    display: flex;
    align-items: center;
    gap: .5rem
}

.page_wallet_console_manager_billing_options_edit_delete_container_edit_icon {
    filter: invert(100%)
}

.page_wallet_add_container {
    display: flex;
    width: 80%;
    font-size: 1.25rem;
    text-decoration: underline;
    margin: 1rem;
    cursor: pointer
}

.page_wallet_add_placeholder {
    visibility: hidden;
    pointer-events: none
}

.page_wallet_console_manager_tax_exemption_container {
    display: flex;
    width: 100%
}

.page_wallet_console_manager_tax_exemption_content {
    display: flex;
    width: 70%;
    flex-direction: column;
    gap: 1rem
}

.page_wallet_console_manager_tax_exemption_container h2 {
    margin: 0;
    white-space: nowrap;
    font-size: clamp(1rem,2vw,1.5rem);
    font-weight: 100
}

.page_wallet_console_manager_tax_exemption_container label {
    border-radius: 5px;
    height: auto;
    width: auto;
    border: none;
    box-shadow: 0 0;
    padding: 5px 10px;
    border: 1px solid #ddd;
    background-color: #447995;
    color: #fff;
    display: flex;
    align-items: center;
    white-space: nowrap;
    cursor: pointer;
    margin-left: 0;
    margin-bottom: 0
}

.page_wallet_console_manager_upload_container {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 1rem
}

    .page_wallet_console_manager_upload_container img {
        filter: invert(1);
        width: 1.3rem;
        height: 1.3rem
    }

    .page_wallet_console_manager_upload_container p {
        text-decoration: underline;
        font-size: 1.3rem;
        margin: 0;
        white-space: nowrap
    }

.page_wallet_console_manager_cancel_container {
    position: absolute;
    display: flex;
    justify-content: center;
    gap: .25rem;
    top: 20px;
    left: 20px;
    font-size: clamp(1rem,1vw,1.5rem)
}

.page_wallet_console_manager_form_container {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    height: auto;
    overflow: auto
}

    .page_wallet_console_manager_form_container label {
        color: #000
    }

    .page_wallet_console_manager_form_container input, .page_wallet_console_manager_form_container select {
        width: 100%;
        height: 3rem
    }

.page_wallet_console_manager_form_header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    font-size: 1.5rem;
    width: 100%
}

    .page_wallet_console_manager_form_header h2 {
        font-size: 1.75rem;
        font-weight: 100;
        margin: 0
    }

.page_wallet_console_manager_form_header_badge {
    background-color: #447995;
    color: #fff;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    border-radius: 50%;
    box-shadow: 0 4px 6px #0000001a
}

.page_wallet_console_manager_button {
    width: 18rem;
    background-color: #447995;
    border: none;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 2rem;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 4px 6px #0000001a;
    font-family: sans-serif;
    padding: 5px 0
}

    .page_wallet_console_manager_button.disabled {
        background-color: gray
    }

.page_wallet_mobile_container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    cursor: default;
    padding: 1.5rem;
    gap: 3rem
}

    .page_wallet_mobile_container h1 {
        font-size: clamp(1rem,6vw,3rem);
        font-weight: 100;
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center
    }

    .page_wallet_mobile_container h3 {
        margin-top: 0;
        font-size: clamp(1rem,1.5vw,1.5rem)
    }

.page_wallet_mobile_content_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    height: auto;
    max-height: 80%;
    gap: 2rem
}

.page_wallet_mobile_console_container {
    display: flex;
    width: 100%;
    border: 1px solid grey;
    border-radius: 10px;
    height: 100%
}

.page_wallet_mobile_console_list_container {
    display: flex;
    width: 100%;
    flex-direction: column;
    border-right: 1px solid grey;
    gap: 1.5rem;
    padding: 1rem
}

.page_wallet_mobile_console_list_placeholder_container {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    background-color: #f1f1f1;
    height: clamp(5rem,16vw,15rem);
    outline: 0px;
    border: 1px solid #ddd;
    cursor: pointer;
    box-shadow: 2px 2px 5px #0003;
    padding: 0
}

    .page_wallet_mobile_console_list_placeholder_container span {
        font-size: clamp(1rem,3vw,1.25rem);
        text-align: center
    }

.page_wallet_mobile_console_list_saved_payment_container {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    background-color: #f1f1f1;
    height: clamp(5rem,16vw,15rem);
    outline: 0px;
    border: 1px solid #ddd;
    cursor: pointer;
    box-shadow: 2px 2px 5px #0003;
    padding: 0
}

    .page_wallet_mobile_console_list_saved_payment_container img {
        width: clamp(2.5rem,3.5vw,5rem);
        height: clamp(2.5rem,3.5vw,5rem)
    }

    .page_wallet_mobile_console_list_saved_payment_container hr {
        border: none;
        height: 2px;
        width: 100%;
        background-color: #000;
        margin-top: 0;
        margin-bottom: 15px;
        flex-shrink: 0
    }

    .page_wallet_mobile_console_list_saved_payment_container h1 {
        font-size: clamp(1rem,6vw,1.75rem);
        text-align: left
    }

    .page_wallet_mobile_console_list_saved_payment_container span {
        font-size: 1.75rem;
        text-align: center
    }

.page_wallet_mobile_console_list_saved_payment_default_badge {
    position: absolute;
    display: flex;
    top: -10px;
    left: 10px;
    background-color: #4a758a;
    color: #fff;
    font-size: 1rem;
    padding: 4px 10px;
    border-radius: 10px;
    box-shadow: 0 2px 4px #0003
}

.page_wallet_mobile_console_list_saved_payment_default_warning {
    position: absolute;
    display: flex;
    top: -5px;
    right: -5px;
    color: #fff;
    font-size: clamp(.8rem,1vw,1.2rem);
    padding: 4px 10px;
    border-radius: 10px
}

.page_wallet_mobile_console_list_saved_payment_container:hover {
    border: .35rem solid #447995
}

.page_wallet_mobile_console_list_saved_payment_container.disabled {
    pointer-events: none;
    opacity: .6;
    cursor: default;
    background-color: initial
}

.page_wallet_mobile_console_list_saved_payment_container.selected {
    border: .35rem solid #447995;
    height: auto
}

.page_wallet_mobile_console_list_saved_payment_details {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem;
    gap: .25rem
}

.page_wallet_mobile_console_list_saved_payment_details_name {
    display: flex;
    font-size: clamp(1rem,6vw,1.75rem);
    width: 100%
}

.page_wallet_mobile_console_list_saved_payment_details_nums {
    display: flex;
    justify-content: space-between;
    font-size: clamp(1rem,3vw,1.25rem)
}

    .page_wallet_mobile_console_list_saved_payment_details_nums .exp {
        color: red;
        font-weight: 700
    }

.page_wallet_mobile_console_manager_container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2rem;
    align-items: center;
    padding: 1rem;
    overflow: auto
}

.page_wallet_mobile_console_manager_header_container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center
}

    .page_wallet_mobile_console_manager_header_container img {
        position: absolute;
        top: -5px;
        right: -75px;
        width: 3rem;
        height: 3rem;
        cursor: pointer;
        filter: invert(100%)
    }

.page_wallet_mobile_console_manager_billing_container {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 6px
}

.page_wallet_mobile_console_manager_billing_group {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 24px
}

.page_wallet_mobile_console_manager_billing_group_label_input {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2px
}

.page_wallet_mobile_console_manager_billing_options_container {
    display: flex;
    font-size: clamp(.75rem,3vw,1.3rem);
    justify-content: space-between;
    width: 100%
}

.page_wallet_mobile_console_manager_billing_options_edit_delete_container {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer
}

    .page_wallet_mobile_console_manager_billing_options_edit_delete_container span {
        text-decoration: underline
    }

.page_wallet_mobile_console_manager_billing_options_icon_text_container {
    display: flex;
    align-items: center;
    gap: .5rem
}

.page_wallet_mobile_console_manager_billing_options_edit_delete_container_edit_icon {
    filter: invert(100%)
}

.page_wallet_mobile_add_container {
    display: flex;
    width: 100%;
    font-size: clamp(1rem,3vw,1.25rem);
    text-decoration: underline;
    margin: 1rem
}

.page_wallet_mobile_add_placeholder {
    visibility: hidden;
    pointer-events: none
}

.page_wallet_mobile_console_manager_tax_exemption_container {
    display: flex;
    width: 100%
}

.page_wallet_mobile_console_manager_tax_exemption_content {
    display: flex;
    width: 70%;
    flex-direction: column;
    gap: 1rem
}

.page_wallet_mobile_console_manager_tax_exemption_container h2 {
    margin: 0;
    white-space: nowrap;
    font-size: clamp(.75rem,3vw,1.3rem);
    font-weight: 100
}

.page_wallet_mobile_console_manager_tax_exemption_container label {
    border-radius: 5px;
    height: auto;
    width: auto;
    border: none;
    box-shadow: 0 0;
    padding: 5px 10px;
    border: 1px solid #ddd;
    background-color: #447995;
    color: #fff;
    display: flex;
    align-items: center;
    white-space: nowrap;
    cursor: pointer;
    margin-left: 0;
    margin-bottom: 0
}

.page_wallet_mobile_console_manager_upload_container {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 1rem
}

    .page_wallet_mobile_console_manager_upload_container img {
        filter: invert(1);
        width: 1.3rem;
        height: 1.3rem
    }

    .page_wallet_mobile_console_manager_upload_container p {
        text-decoration: underline;
        font-size: 1.3rem;
        margin: 0;
        white-space: nowrap
    }

.page_wallet_mobile_console_manager_cancel_container {
    position: absolute;
    display: flex;
    justify-content: center;
    gap: .25rem;
    top: 20px;
    left: 20px;
    font-size: 1rem
}

.page_wallet_mobile_console_manager_form_container {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    height: auto
}

    .page_wallet_mobile_console_manager_form_container input, .page_wallet_mobile_console_manager_form_container select {
        width: 100%;
        height: 3rem
    }

.page_wallet_mobile_console_manager_form_header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    font-size: 1.5rem;
    width: 100%
}

.page_wallet_mobile_console_manager_header_container h1 {
    font-size: clamp(1.5rem,4.5vw,2.5rem);
    font-weight: 100;
    margin: 0
}

.page_wallet_mobile_console_manager_form_header h2 {
    font-size: clamp(1rem,4vw,2rem);
    font-weight: 100;
    margin: 0
}

.page_wallet_mobile_console_manager_form_header_badge {
    background-color: #447995;
    color: #fff;
    width: clamp(1.5rem,8vw,3rem);
    height: clamp(1.5rem,8vw,3rem);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    border-radius: 50%;
    box-shadow: 0 4px 6px #0000001a
}

.page_wallet_mobile_console_manager_button {
    width: 18rem;
    background-color: #447995;
    border: none;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 2rem;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 4px 6px #0000001a;
    font-family: sans-serif;
    padding: 5px 0
}

    .page_wallet_mobile_console_manager_button.disabled {
        background-color: gray
    }

.console_subscriptions_table_component_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center
}

.console_subscriptions_table_export_and_data_container {
    display: flex;
    justify-content: center;
    width: 80%;
    height: 80%;
    position: relative
}

@media (max-width: 768px) {
    .console_subscriptions_table_export_and_data_container {
        width: 100%
    }
}

.console_subscriptions_table_export_container {
    position: absolute;
    top: -8%;
    right: -.25%
}

    .console_subscriptions_table_export_container img {
        width: clamp(3.5rem,2vw,3.5rem);
        height: clamp(3.5rem,2vw,3.5rem)
    }

.console_subscriptions_table_data_container {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #f9f9f9;
    border: 1px solid black;
    border-radius: 10px
}

    .console_subscriptions_table_data_container table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border: none
    }

    .console_subscriptions_table_data_container thead {
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: #d9e5ef
    }

        .console_subscriptions_table_data_container thead th {
            padding: 10px;
            text-align: left;
            font-weight: 700;
            height: 40px;
            border-right: 1px solid black;
            border-bottom: 1px solid black
        }

            .console_subscriptions_table_data_container thead th:first-child, .console_subscriptions_table_data_container tbody td:first-child {
                left: 0;
                background-color: inherit
            }

@media (max-width: 768px) {
    .console_subscriptions_table_data_container thead th:first-child, .console_subscriptions_table_data_container tbody td:first-child {
        position: sticky
    }
}

.console_subscriptions_table_data_container thead th.selected {
    background-color: #447995;
    color: #fff
}

.console_subscriptions_table_data_container .table_header_label_icon_container {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 5px
}

    .console_subscriptions_table_data_container .table_header_label_icon_container img {
        cursor: pointer
    }

        .console_subscriptions_table_data_container .table_header_label_icon_container img.sort_key {
            filter: invert(100%)
        }

.console_subscriptions_table_data_container thead tr:first-child th:first-child {
    border-top-left-radius: 5px
}

.console_subscriptions_table_data_container thead tr:first-child th:last-child {
    border-top-right-radius: 5px
}

.console_subscriptions_table_data_container tbody td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
    height: 80px;
    cursor: pointer;
    text-align: center
}

.console_subscriptions_table_data_container tbody tr {
    background-color: #f9f9f9
}

    .console_subscriptions_table_data_container tbody tr.odd_index {
        background-color: #fff
    }

.console_subscriptions_table_data_container .table_cell_content_container {
    display: flex;
    font-size: clamp(.75rem,4vw,1.5rem);
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

    .console_subscriptions_table_data_container .table_cell_content_container.sort_key {
        justify-content: center
    }

    .console_subscriptions_table_data_container .table_cell_content_container .link {
        color: #447995;
        text-decoration: underline;
        cursor: pointer
    }

.console_subscriptions_table_nav_container {
    display: flex;
    align-items: center;
    margin: 10px;
    gap: 10px
}

.console_subscriptions_table_nav_text {
    display: flex;
    justify-content: flex-end;
    text-decoration: underline;
    cursor: pointer;
    transition: color .2s ease-in-out;
    width: 6rem;
    font-size: clamp(1rem,3vw,1.25rem)
}

    .console_subscriptions_table_nav_text.next {
        justify-content: flex-start
    }

    .console_subscriptions_table_nav_text:hover {
        color: #447995
    }

.console_subscriptions_table_nav_page_num_box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid black;
    text-align: center;
    font-size: clamp(1rem,3vw,1.25rem)
}

.console_subscriptions_table_nav_placeholder {
    visibility: hidden;
    width: 6rem
}

.console_subscriptions_table_nav_container input[type=number] {
    -moz-appearance: textfield
}

    .console_subscriptions_table_nav_container input[type=number]::-webkit-inner-spin-button, .console_subscriptions_table_nav_container input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0
    }

.page_payment_history_container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    cursor: default;
    padding: 1.5rem;
    justify-content: center
}

    .page_payment_history_container h1 {
        font-size: clamp(1.5rem,8vw,3rem);
        font-weight: 100;
        margin-top: 10px;
        margin-bottom: 10px
    }

.page_payment_history_content_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 90%;
    justify-content: center;
    align-items: center
}

.page_payment_history_no_payment_history {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.modal_change_plan_eligibility_confirmation_content {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

    .modal_change_plan_eligibility_confirmation_content p {
        text-align: center
    }

.modal_change_plan_eligibility_confirmation_button_container {
    display: flex;
    gap: 6rem;
    width: 100%;
    justify-content: center
}

@media (max-width: 768px) {
    .modal_change_plan_eligibility_confirmation_button_container {
        gap: 1rem
    }
}

.modal_change_plan_eligibility_confirmation_button {
    width: 35%;
    border: none;
    color: #000;
    text-align: center;
    text-decoration: none;
    font-size: clamp(1rem,4vw,1.5rem);
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 4px 6px #0000001a;
    font-family: sans-serif;
    padding: 10px 0;
    white-space: nowrap
}

@media (max-width: 768px) {
    .modal_change_plan_eligibility_confirmationn_button {
        width: 100%
    }
}

.modal_change_plan_eligibility_confirmation_button.green {
    background-color: #87d483
}

.modal_change_plan_eligibility_confirmation_button.red {
    background-color: #d2514c
}

.page_change_plan_container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
}

    .page_change_plan_container h1 {
        font-size: 3rem;
        font-weight: 100;
        margin-top: 10px;
        margin-bottom: 10px
    }

.page_change_plan_billing_toggle {
    font-weight: 100;
    font-size: 1.5rem;
    margin-top: 0
}

.page_change_plan_carousel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 24px;
    overflow-x: auto;
    padding-bottom: 20px
}

    .page_change_plan_carousel.few_plans {
        justify-content: center
    }

.page_change_plan_carousel_no_plans {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.page_change_plan_card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 30%;
    height: 95%;
    background-color: #f1f1f1;
    flex-shrink: 0;
    border: 0px;
    overflow: visible
}

@media (max-width: 768px) {
    .page_change_plan_card {
        width: 66%;
        height: 95%
    }
}

.page_change_plan_card:first-child {
    margin-left: 24px
}

.page_change_plan_card:last-child {
    margin-right: 24px
}

.page_change_plan_card.current {
    background-color: #687c8d;
    color: #fff
}

    .page_change_plan_card.selected, .page_change_plan_card.current.selected {
        border: 1px solid black
    }

.page_change_plan_card_badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
    background-color: #d9e5ef;
    color: #000;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 1.5rem;
    white-space: nowrap;
    box-shadow: 0 4px 6px #0000001a
}

.page_change_plan_card_title {
    display: flex;
    width: 100%;
    font-size: 2.5rem;
    height: 3rem;
    white-space: nowrap;
    margin-top: 10px
}

.page_change_plan_card_desc {
    overflow: auto;
    display: flex;
    height: 11rem;
    font-size: clamp(1rem,1.2vw + 1rem,1.5rem);
    align-items: center
}

    .page_change_plan_card_desc.overflowed {
        align-items: flex-start
    }

.page_change_plan_card hr {
    border: none;
    height: 2px;
    width: 100%;
    background-color: #000;
    margin-top: 5px;
    margin-bottom: 5px;
    flex-shrink: 0
}

.page_change_plan_card.current hr {
    border: none;
    height: 2px;
    width: 100%;
    background-color: #fff;
    margin-top: 5px;
    margin-bottom: 5px;
    flex-shrink: 0
}

.page_change_plan_card_rate_button_container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 6rem
}

.page_change_plan_card_rate {
    font-size: 2rem
}

.page_change_plan_card_button {
    width: 100%;
    background-color: #447995;
    border: none;
    font-weight: 700;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 20px;
    box-shadow: 0 4px 6px #0000001a;
    font-family: sans-serif
}

.page_change_plan_card_details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: auto;
    height: 50%
}

.page_change_plan_card_button.current {
    pointer-events: none;
    background-color: #d9e5ef;
    color: #000
}

.page_change_plan_card li {
    font-size: 1.25rem
}

    .page_change_plan_card li::marker {
        color: #447995;
        font-size: 1.75rem
    }

.page_change_plan_card.current li::marker {
    color: #d9e5ef
}

.modal_terms_of_use_content {
    display: flex
}

.modal_change_plan_confirmation_content {
    display: flex;
    flex-direction: column
}

.modal_change_plan_confirmation_row {
    display: flex;
    justify-content: space-between;
    width: 100%
}

@media (max-width: 768px) {
    .modal_change_plan_confirmation_row {
        flex-direction: column;
        align-items: center
    }
}

.modal_change_plan_confirmation_row p {
    width: auto;
    white-space: nowrap
}

.modal_change_plan_confirmation_clickable {
    text-decoration: underline;
    cursor: pointer
}

.modal_change_plan_quote_processing_content {
    display: flex;
    flex-direction: column
}

.modal_change_plan_quote_processing_row {
    display: flex;
    justify-content: space-between;
    width: 100%
}

@media (max-width: 768px) {
    .modal_change_plan_quote_processing_row {
        flex-direction: column;
        align-items: center
    }
}

.modal_change_plan_quote_processing_row p {
    width: auto;
    white-space: nowrap
}

.modal_change_plan_quote_processing_clickable {
    text-decoration: underline;
    cursor: pointer
}

.page_change_plan_checkout_container {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    padding: 1.5rem
}

@media (max-width: 768px) {
    .page_change_plan_checkout_container {
        grid-template-columns: 1fr
    }
}

.page_change_plan_checkout_container hr {
    border: none;
    height: 2px;
    width: 100%;
    background-color: #000;
    margin-top: 30px;
    margin-bottom: 15px;
    flex-shrink: 0
}

.page_change_plan_checkout_container img {
    width: clamp(1rem,8vw,4rem);
    height: clamp(1rem,8vw,4rem)
}

.page_change_plan_checkout_container h1 {
    font-size: clamp(1rem,5vw,2.5rem);
    font-weight: 100;
    margin-top: 10px;
    margin-bottom: 10px
}

.page_change_plan_checkout_container h2 {
    font-size: clamp(1rem,4vw,1.75rem);
    font-weight: 100;
    margin-top: 10px;
    margin-bottom: 10px
}

.page_change_plan_checkout_container label {
    display: flex
}

.page_change_plan_checkout_info_container {
    width: 75%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0% 10% 2.5% 5%
}

@media (max-width: 768px) {
    .page_change_plan_checkout_info_container {
        width: 100%;
        padding: 0
    }
}

.page_change_plan_checkout_info_content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px
}

.page_change_plan_checkout_info_header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 24px
}

.page_change_plan_checkout_info_box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    background-color: #f6f9fc;
    flex-grow: 1;
    outline: 0px;
    gap: 12px
}

@media (max-width: 768px) {
    .page_change_plan_checkout_info_box {
        height: auto
    }
}

.page_change_plan_checkout_info_box_content_container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    height: 100%;
    gap: 1rem
}

.page_change_plan_checkout_info_box_dial_button_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
    padding: 1rem 3rem;
    border-radius: 5px
}

    .page_change_plan_checkout_info_box_dial_button_container.active {
        background-color: #f1f1f1;
        border: 1px solid grey
    }

    .page_change_plan_checkout_info_box_dial_button_container span.notActive {
        display: none
    }

.page_change_plan_checkout_info_box_dial_button_row_container {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 1rem
}

    .page_change_plan_checkout_info_box_dial_button_row_container input {
        display: flex;
        width: 1.5rem;
        height: 1.5rem
    }

    .page_change_plan_checkout_info_box_dial_button_row_container label {
        font-size: clamp(1rem,4vw,1.5rem);
        margin-left: 0;
        margin-bottom: 0
    }

.page_change_plan_checkout_info_box_header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    font-weight: 700;
    font-size: 1.5rem
}

.page_change_plan_checkout_info_box_badge {
    background-color: #447995;
    color: #fff;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    border-radius: 50%;
    box-shadow: 0 4px 6px #0000001a
}

.page_change_plan_checkout_info_box_no_payment_saved {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center
}

.page_change_plan_checkout_info_box_card_saved_payment_dropdown {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 16rem;
    border-radius: 10px;
    box-shadow: 0 4px 4px #0003
}

.page_change_plan_checkout_info_box_card_saved_payment_option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    height: 5.5rem;
    outline: 0px;
    border: 1px solid #ddd;
    padding: 0 5%
}

    .page_change_plan_checkout_info_box_card_saved_payment_option:hover {
        border: 3px solid grey;
        box-shadow: 0 4px 6px #0000001a
    }

.page_change_plan_checkout_info_box_card_saved_payment_details {
    display: flex;
    width: 70%;
    flex-direction: column;
    gap: .5rem
}

.page_change_plan_checkout_info_box_card_saved_payment_details_name {
    display: flex;
    font-size: clamp(1.25rem,4vw,1rem);
    width: 100%
}

.page_change_plan_checkout_info_box_card_saved_payment_details_name_underline {
    text-decoration: underline
}

.page_change_plan_checkout_info_box_card_saved_payment_details_nums {
    display: flex;
    justify-content: space-between;
    font-size: clamp(1.25rem,2vw,1rem);
    margin-right: 25%;
    white-space: nowrap;
    gap: 1rem
}

.page_change_plan_checkout_info_box_card_details_dropdown_arrow {
    transform: rotate(0);
    transition: transform .3s ease
}

    .page_change_plan_checkout_info_box_card_details_dropdown_arrow.open {
        transform: rotate(180deg)
    }

.page_change_plan_checkout_review_container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2% 5% 3%
}

.page_change_plan_checkout_review_header {
    width: 100%;
    display: flex
}

.page_change_plan_checkout_review_content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

@media (max-width: 768px) {
    .page_change_plan_checkout_review_content {
        justify-content: center;
        gap: 5rem
    }
}

.page_change_plan_checkout_review_preconfirmation_section {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.page_change_plan_checkout_review_box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    background: linear-gradient(to top,#dce8eb,#fff);
    overflow: auto;
    gap: 6px
}

    .page_change_plan_checkout_review_box hr {
        border: none;
        height: 2px;
        width: 100%;
        background-color: #000;
        margin-top: 30px;
        margin-bottom: 15px;
        flex-shrink: 0
    }

    .page_change_plan_checkout_review_box ul {
        list-style: none;
        padding-left: 5%
    }

    .page_change_plan_checkout_review_box li {
        font-size: clamp(1rem,3vw,1.5rem)
    }

.page_change_plan_checkout_review_box_row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start
}

    .page_change_plan_checkout_review_box_row span {
        font-size: clamp(1rem,4vw,1.75rem)
    }

.page_change_plan_checkout_review_box_payment_summary {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.page_change_plan_checkout_review_label_tos {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center
}

    .page_change_plan_checkout_review_label_tos label {
        font-size: clamp(1rem,4vw,1.3rem);
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-left: 0;
        margin-bottom: 0
    }

        .page_change_plan_checkout_review_label_tos label input[type=checkbox] {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            height: 20px;
            width: 20px;
            border-radius: 0;
            border: 2px solid #ccc;
            background-color: transparent;
            transition: background-color .2s,border-color .2s;
            margin-right: 12px;
            cursor: pointer;
            flex-shrink: 0;
            position: relative
        }

            .page_change_plan_checkout_review_label_tos label input[type=checkbox]:checked {
                border-color: gray;
                background-color: #fff;
                box-shadow: inset 0 0 5px #000000bf
            }

                .page_change_plan_checkout_review_label_tos label input[type=checkbox]:checked:before {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    width: 8px;
                    height: 12px;
                    border-right: 3px solid black;
                    border-bottom: 3px solid black;
                    transform: translate(-50%,-60%) rotate(45deg)
                }

            .page_change_plan_checkout_review_label_tos label input[type=checkbox]:focus {
                outline: 2px solid #ccc
            }

            .page_change_plan_checkout_review_label_tos label input[type=checkbox].error-focus:focus {
                outline: 2px solid red
            }

.page_change_plan_checkout_review_label_tos_underline {
    text-decoration: underline;
    cursor: pointer;
    color: #447995
}

.page_change_plan_checkout_review_confirmation_section {
    display: flex;
    flex-direction: column;
    height: 16.5%;
    gap: 1rem
}

    .page_change_plan_checkout_review_confirmation_section span {
        font-size: clamp(1rem,6vw,2rem);
        font-weight: 700
    }

.page_change_plan_checkout_review_purchase_button {
    width: 100%;
    background-color: #87d483;
    border: none;
    color: #000;
    text-align: center;
    text-decoration: none;
    font-size: clamp(1rem,6vw,2rem);
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 4px 6px #0000001a;
    font-family: sans-serif;
    padding: 5px 0
}

    .page_change_plan_checkout_review_purchase_button.disabled {
        background-color: gray
    }

.page_change_plan_checkout_info_box_header .page_checkout_wallet_add_container {
    margin-right: .5rem;
    margin-left: auto;
    cursor: pointer;
    font-weight: 700;
    text-decoration: underline
}

.page_api_tokens_container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    cursor: default;
    padding: 1.5rem;
    justify-content: center
}

.page_api_tokens_header {
    display: flex;
    flex-direction: row;
    width: 80%
}

    .page_api_tokens_header h1 {
        font-size: clamp(1.5rem,8vw,3rem);
        font-weight: 100;
        margin-top: 10px;
        margin-bottom: 10px;
        flex-grow: 1;
        text-align: center
    }

    .page_api_tokens_header button {
        background-color: #447995;
        border: none;
        font-weight: 700;
        color: #fff;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 10px;
        box-shadow: 0 4px 6px #0000001a;
        font-family: sans-serif
    }

.page_api_tokens_content_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 90%;
    justify-content: center;
    align-items: center
}

.page_api_tokens_no_api_tokens {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.modal_api_tokens_generate_container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    row-gap: .5rem;
    min-width: 400px
}

.modal_api_tokens_generate_type {
    padding-bottom: .5rem
}

.modal_api_tokens_generate_space_between {
    display: flex;
    justify-content: space-between
}

.modal_api_tokens_generate_space_evenly {
    display: flex;
    justify-content: space-evenly
}

.modal_api_tokens_generate_container button {
    border: none;
    font-weight: 700;
    background-color: #fff;
    color: #2f4f4f;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 4px 6px #0000001a;
    font-family: sans-serif
}

.modal_api_tokens_generate_container .generate_button {
    background-color: #447995;
    color: #fff
}

.modal_api_tokens_radio_label input {
    margin-right: 1rem
}