body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
        'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

html,
body {
    background: #FFFFFF;
    font-style: normal;
    line-height: 1.4;
    font-size: 10px;
    color: #434343;
    font-family: Roboto, 'Work Sans';
}

:root {
    font-size: 10px;
}

* {
    margin: 0;
    padding: 0;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

/* Fix the global search icons offset */
.fa,
.fab,
.fad,
.fal,
.far,
.fas {
    line-height: 24px !important;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    margin: 0;
}

#root {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    font-size: 1.4rem;
}

#app-root-container {
    display: flex;
    flex-direction: column;
}

#app-main {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 6rem);
    flex: 1;
    overflow: hidden;
    padding: 1.5rem;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#app-main-header {
    display: flex;
}

#app-main-content {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 2.5rem;
}

#app-page-header {
    display: flex;
    padding: 1rem 0 3rem;
    align-items: center;
    gap: 1rem;
}

#app-mobile-back {
    display: flex;
    padding: 1rem 1.5rem 0;
    gap: 0.5rem;
    align-items: center;
    color: #87878A;
    width: 10rem;
}

.table-search-header {
    display: flex;
    padding-bottom: 2.5rem;
    justify-content: flex-start;
}

.table-app-header {
    display: flex;
    padding-bottom: 2.5rem;
    justify-content: flex-end;
}

.table-search-input {
    max-width: 30rem;
}

::-webkit-scrollbar {
    width: 0.75rem;
}

::-webkit-scrollbar-track {
    width: 0.75rem;
    background: transparent;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background: #b8b8b8;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

::-webkit-scrollbar-thumb:active {
    background: #787878;
}

.rc-virtual-list-scrollbar {
    width: 0.75rem !important;
}.cursor-pointer {
    cursor: pointer;
}

body .ant-btn-link.ant-btn-icon-only {
    color: #4e4e4f;
    font-size: 2rem;
    height: 3.2rem;
    padding: 4px 15px;
    width: 5.6rem;
}

.app-table.ant-table-wrapper .ant-table-thead > tr > th {
    background-color: #F5F5F5;
    font-size: 1.4rem;
    color: #4E4E4F;
    box-shadow: -13px 0px 0px -12px rgba(0, 0, 0, 0.06);
}

.app-table.ant-table-wrapper .ant-table-tbody > tr > td {
    color: #4E4E4F;
    font-size: 1.4rem;
    border: none;
}

.app-table.ant-table-wrapper tr.ant-table-expanded-row > td {
    padding: 0 8px 8px 8px;
    background: white;
}

.app-table.ant-table-wrapper .ant-table-tbody > tr.ant-table-row:hover > td,
.app-table.ant-table-wrapper .ant-table-tbody > tr > td.ant-table-cell-row-hover {
    background-color: #FFFFFF;
}

.app-table.ant-table-wrapper .ant-table-tbody > tr.ant-table-row:nth-child(even of .app-table-row),
.app-table.ant-table-wrapper
    .ant-table-tbody
    > tr.ant-table-row:nth-child(even of .app-table-row)
    + tr.ant-table-expanded-row
    > td,
.app-table.ant-table-wrapper
    .ant-table-tbody
    > tr.ant-table-row:nth-child(even of .app-table-row):hover,
.app-table.ant-table-wrapper
    .ant-table-tbody
    > tr.ant-table-row:nth-child(even of .app-table-row):hover
    > td {
    background-color: #FAFAFA;
}

.table-striped-rows tr:nth-child(2n) td {
    background-color: #fbfbfb;
}
.table-striped-rows thead {
    background-color: #f1f1f1;
}

.app-table.ant-table-wrapper .ant-table-tbody > tr.ant-table-row.clickable-row:hover > td,
.app-table.ant-table-wrapper .ant-table-tbody > tr.clickable-row > td.ant-table-cell-row-hover {
    background-color: #FAFAFA;
}

.app-table.ant-table-wrapper .ant-table-tbody > tr > td.list-actions > div {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    flex-wrap: wrap;

    color: #87878A;
}

.app-table.ant-table-wrapper .ant-table-tbody > tr > td.list-actions button {
    padding: 0;
}

.app-table.ant-table-wrapper .ant-table-tbody > tr > td.list-actions button.actions-btn {
    width: 2rem;
    margin: 0 1.8rem;
}

.app-table.ant-table-wrapper .ant-table-tbody > tr > td.list-actions svg {
    cursor: pointer;
}

.list-actions-dropdown .ant-dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
}

.list-actions-dropdown .ant-dropdown-menu .ant-dropdown-menu-item {
    padding: 0;
}

.list-actions-dropdown .ant-dropdown-menu .ant-dropdown-menu-item .table-action {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.5rem 1rem;
    gap: 1rem;
    color: #4E4E4F;
    text-decoration: none;
    transition: color 0s;
}

.list-actions-dropdown .ant-dropdown-menu .ant-dropdown-menu-item .table-action:hover {
    color: #FFFFFF;
    background: #7FBC03;
}

.list-actions-dropdown .ant-dropdown-menu .ant-dropdown-menu-item .table-action svg {
    font-size: 1.8rem;
}

.ant-pagination .ant-pagination-prev .ant-pagination-item-link,
.ant-pagination .ant-pagination-next .ant-pagination-item-link,
.ant-pagination .ant-pagination-item {
    border: 1px solid #d9d9d9;
    border-radius: 2px;
}

.ant-pagination .ant-pagination-item-active {
    border-radius: 2px;
    font-weight: 500;
    border: 1px solid #91c73d;
}

.ant-pagination .ant-pagination-item:hover,
.ant-pagination .ant-pagination-next:hover .ant-pagination-item-link,
.ant-pagination .ant-pagination-prev:hover .ant-pagination-item-link {
    border-color: #91c73d;
    transition: all 0.3s;
}

.ant-pagination .ant-pagination-item:hover a,
.ant-pagination .ant-pagination-next:hover .ant-pagination-item-link,
.ant-pagination .ant-pagination-prev:hover .ant-pagination-item-link {
    color: #91c73d;
    background-color: #fff;
}

.ant-pagination .ant-pagination-prev.ant-pagination-disabled:hover .ant-pagination-item-link,
.ant-pagination .ant-pagination-next.ant-pagination-disabled:hover .ant-pagination-item-link {
    color: #d9d9d9;
}

.ant-modal-confirm-confirm .ant-modal-confirm-body > .anticon {
    color: #7fbc03;
}

.form-validation-message {
    text-align: center;
}

.form-validation-message .ant-form-item-control-input {
    display: none;
}

.user-management-actions-dropdown .ant-dropdown-menu {
    border-radius: 2px;
}

.user-management-actions-dropdown .ant-dropdown-menu .ant-dropdown-menu-item .table-action:hover,
.user-management-actions-dropdown .ant-dropdown-menu .ant-dropdown-menu-item .table-action:focus {
    background: #f5f5f5 !important;
    color: inherit !important;
    border-radius: 4px;
}

@media only screen and (max-width: 1224px) {
    .app-table.ant-table-wrapper .ant-table-thead,
    .app-table colgroup {
        display: none;
    }

    .app-table.ant-table-wrapper .ant-table-tbody > tr {
        display: flex;
        flex-direction: column;
    }

    .app-table.ant-table-wrapper .ant-table-tbody > tr > td {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0.5rem;
        border-bottom: none;
    }

    .app-table.ant-table-wrapper .ant-table-tbody > tr > td > div:not(.ant-empty) {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .app-table.ant-table-wrapper .ant-table-tbody > tr > td.list-actions > div {
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
        justify-content: center;
        width: 100%;
    }

    .app-table.ant-table-wrapper .ant-table-tbody > tr > td:first-child {
        padding-top: 1rem;
    }

    .app-table.ant-table-wrapper .ant-table-tbody > tr > td:last-child {
        padding-bottom: 1rem;
    }

    .app-table.ant-table-wrapper .ant-table-pagination {
        justify-content: center;
    }

    .app-table.ant-table-wrapper .ant-table-pagination .ant-pagination-total-text {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
}

.ant-btn {
    background-color: #1A4A93;
}

.ant-btn:hover {
    background-color: #0C367D;
}

.ant-btn-primary {
    background-color: #1A4A93;
}

/* Spin component overrides */
.ant-spin {
    color: #1A4A93;
}

.ant-spin .ant-spin-dot-item {
    background-color: #1A4A93;
}

.anticon.anticon-loading,
.anticon.anticon-loading-3-quarters,
.anticon.anticon-loading-outlined {
    color: #1A4A93;
}

.ant-btn-primary:hover {
    background-color: #0C367D;
}

.ant-btn-color-default {
    color: #1a4a93;
}

.ant-btn-variant-outlined {
    background-color: #ffffff;
}

.ant-btn-variant-solid {
    background: #1A4A93;
}

.ant-btn-variant-solid:not(:disabled):not(.ant-btn-disabled):hover {
    background: #0C367D;
}

.ant-btn-default:not(:disabled):hover {
    border: 1px solid #4e4e4f;
    color: #4e4e4f;
}

.ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):hover,
.ant-btn-variant-dashed:not(:disabled):not(.ant-btn-disabled):hover {
    color: #0c367d;
    border-color: #0c367d;
    background: #f0f5ff;
}

.ant-btn-primary:not(:disabled):hover,
.ant-btn-primary:not(:disabled):not(.ant-btn-disabled):hover {
    background-color: #0C367D;
}

.ant-btn-primary.ant-btn-dangerous:not(:disabled):hover {
    background-color: #df1d23;
}

.ant-message-custom-content {
    font-family: Roboto, 'Work Sans';
}#error-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
}

#error-wrapper .ant-result {
    margin-top: 5%;
}#account-footer {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding-bottom: 15%;
}

#account-footer #logo-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 9rem 10%;
}

#account-footer #logo-wrapper .logo {
    max-height: 70px;
    position: relative;
}

#account-footer #logo-wrapper .pob-text {
    font-size: 1.2rem;
}
#change-password-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    padding-top: 15%;
}

.change-password-form {
    display: flex;
    flex-direction: column;
    max-width: 45rem;
    width: 75vw;
}

.change-password-header-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.change-password-form-return-login-item .ant-form-item-control {
    align-items: center;
}

.change-password-form-button {
    width: 100%;
}

#dental-intel-logo-wrapper {
    display: flex;
    justify-content: center;
    padding-bottom: 5rem;
}

#dental-intel-logo-wrapper .dental-intel-logo {
    max-height: 70px;
    position: relative;
}#new-user-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    padding-top: 15%;
}

.new-user-form {
    display: flex;
    flex-direction: column;
    max-width: 45rem;
    width: 75vw;
}

.new-user-header-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.new-user-form-return-login-item .ant-form-item-control {
    align-items: center;
}

.new-user-name-form-item .ant-form-item-control-input-content {
    display: flex;
    column-gap: 1rem;
}

.new-user-form-button-item {
    display: flex;
    justify-content: center;
}

#dental-intel-logo-wrapper {
    display: flex;
    justify-content: center;
    padding-bottom: 5rem;
}

#dental-intel-logo-wrapper .dental-intel-logo {
    max-height: 70px;
    position: relative;
}

#dental-intel-pob-text {
    text-align: center;
}
#terms-and-conditions-accept-wrapper {
    align-items: center;
    height: 99%;
}

.terms-and-conditions-accept-content {
    width: 425px;
    min-height: 200px;
    border: 1px solid #E6E9ED;
    top: 50%;
    left: 50%;
    padding: 1em;
    /* height: auto; */
    margin-top: 50%;
    line-height: 175%;
}

.terms-and-conditions-accept-content a,
.terms-and-conditions-accept-content a:visited {
    text-decoration: none;
    color: #0000EE;
}

.terms-and-conditions-checkbox {
    margin: 15px 0 0 0;
}

.terms-and-conditions-accept--loading {
    width: 380px;
    min-height: 200px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.terms-and-conditions-accept-controls {
    display: flex;
    justify-content: flex-end;
}

.terms-and-conditions-button {
    border-radius: 0.25em;
    margin-left: 1em;
    font-weight: bold;
}

.terms-and-conditions-footer {
    font-size: 0.5rem;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}
.user-modal .ant-modal-content {
    margin: 0px;
    padding: 0px;
}

.user-modal .ant-modal-header {
    padding: 15px 16px 5px 16px;
}

.user-modal .ant-modal-footer {
    padding: 20px 0px;
    margin: unset;
}

.user-modal .ant-divider {
    margin: unset;
}

.user-modal-frame-name-fields {
    display: flex;
}

.user-modal-field-left {
    width: 100%;
    padding: 0px 8px 0px 0px;
}

.user-modal-field-right {
    width: 100%;
    padding: 0px 0px 0px 8px;
}

.user-modal-form {
    margin: 15px 16px 5px 16px;
}

.user-modal-form .ant-form-item {
    margin-bottom: 20px;
}

.user-modal-form-notification-text {
    margin: 30px;
    display: flex;
    justify-content: center;
}

.user-modal-form-notification-email {
    font-weight: bold;
    margin-left: 5px;
}

.user-modal-delete {
    margin: 25px 20px 25px 20px;
    display: flex;
    justify-content: center;
}

.user-modal {
    min-width: 700px;
}

.user-modal-form {
    padding: 0 1.5em;
}

.user-modal-frame-name-fields {
    display: flex;
    gap: 1em;
}

.user-modal-field-left {
    flex: 1;
}

.user-modal-field-right {
    flex: 1;
}

.user-modal-divider {
    margin: 0;
}

.user-role-option {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
}

.user-role-option:hover {
    border-color: #1890ff;
}

.user-role-content {
    margin-left: 8px;
}

.user-role-title {
    font-weight: 500;
    margin-bottom: 4px;
}

.user-role-description {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

.role-selection-container {
    width: 100%;
}

.role-selection-container .ant-radio-wrapper {
    width: 100%;
    margin-bottom: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #DADADA;
    border-radius: 4px;
}

.role-selection-container .ant-radio-wrapper:hover {
    border-color: #DADADA;
}

.role-selection-container .ant-radio-wrapper-checked {
    border-color: #DADADA;
    background-color: #F0F5FF;
}

/* Override Ant Design's default radio button colors */
.role-selection-container .ant-radio-checked .ant-radio-inner {
    border-color: #1A4A93;
    background-color: #1A4A93;
}

.role-selection-container .ant-radio:hover .ant-radio-inner {
    border-color: #1A4A93;
}

.role-selection-container .ant-radio-input:focus + .ant-radio-inner {
    box-shadow: 0 0 0 3px rgba(26, 74, 147, 0.1);
}

.role-title {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 4px;
}

.role-description {
    color: #666;
    font-size: 12px;
    line-height: 1.5;
}

.role-selection-header {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.role-tooltip-container {
    display: flex;
    align-items: center;
    gap: 4px;
}

.role-tooltip-container .tooltip-text {
    color: #1A4A93;
}

.role-tooltip-container .question-icon {
    color: #1A4A93;
    font-size: 16px;
}
.user-management-grid-action-edit {
    display: flex;
}

.user-management-grid-action-edit-display {
    color: #729DE4;
    cursor: pointer;
    min-width: 90px;
    white-space: nowrap;
    display: inline-block;
    text-align: left;
    margin-left: 0;
    padding-left: 0;
}
.user-management-grid-actions {
    display: flex;
}

.user-management-grid-action-ellipsis {
    margin: 0 0 0 1rem;
}.user-management-grid-action-reset {
    display: flex;
}.user-management-grid-action-delete {
    display: flex;
}

.user-management-grid-action-delete-display {
    color: #729de4;
    cursor: pointer;
}
.user-management {
    font-weight: 525;
}

.user-management-grid .ant-modal-content {
    padding: 20px 0px;
}

.user-management-grid .ant-modal-header {
    padding: 0px 24px 5px 24px;
}

.user-management-grid .ant-modal-footer {
    padding: 16px, 24px, 16px, 24px;
}

.user-management-grid.ant-table-wrapper .ant-table-thead > tr > th {
    background-color: #F5F5F5;
    font-size: 1.4rem;
    color: #4E4E4F;
    box-shadow: -13px 0px 0px -12px rgba(0, 0, 0, 0.06);
}

.user-management-grid-status {
    display: flex;
}

.user-management-grid-status-icon {
    padding-right: 0.25em;
    padding-bottom: 0.1em;
    font-size: 125%;
}
.user-management {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
}

.user-management-top {
    padding: 1% 2%;
}

.user-management-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-management-title {
    font-size: 3rem;
    font-weight: 525;
    padding: 10px 0;
}

.user-management-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-management-search-input {
    width: 400px;
    min-width: 400px;
}

.user-management-bottom {
    border-top: 1px solid #D9D9D9;
    border-radius: 2px;
    padding: 1% 2%;
    height: 100vh;
}

.user-management-grid-wrapper {
    padding: 10px 0;
}

.user-mgmt-button {
    font-weight: bold;
}
.contact-link a {
    color: #2662C8;
    text-decoration: underline;
    cursor: pointer;
}

.contact-link a:hover {
    color: #2662C8;
    text-decoration: none;
}

.contact-link a:visited {
    color: #2662C8;
}.subscription-plan-wrapper {
    padding: 0.5rem;
}

/* Set the fixed width constraints for the subscription details card */
.billing-subscription-card.ant-card {
    width: 100%;
    border: 1px solid #DADADA;
    border-radius: 4px 4px 0px 0px;
    margin-bottom: 1rem;
}

.subscription-plan-wrapper a {
    color: #2662C8;
    text-decoration: underline;
    cursor: pointer;
}

.subscription-plan-wrapper a:hover {
    color: #2662C8;
    text-decoration: none;
}

.subscription-plan-wrapper a:visited {
    color: #2662C8;
}

.subscription-plan-title {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.subscription-plan-details {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 0;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.subscription-plan-details-custom {
    padding: 1em 1em;
}

.subscription-plan-details-custom .info-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.subscription-plan-details-custom .info-message .info-icon {
    flex-shrink: 0;
    margin-top: 4px;
}

.subscription-plan-details-custom .info-message .message-text {
    margin: 0;
}

.subscription-plan-details-custom .indented-text {
    padding-left: 24px;
}

.info-icon-custom {
    margin-right: 8px;
}

.subscription-plan-name {
    font-size: 18px;
}

.subscription-plan-link-disabled {
    cursor: default;
    opacity: 0.6;
    text-decoration: underline;
}

.subscription-ending {
    padding: 1rem;
    background-color: #ffffff;
    border: 1px solid #cf1322;
    border-radius: 0.25rem;
    margin-top: 1rem;
}

.subscription-ending-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.subscription-ending-icon {
    color: #cf1322;
    font-size: 16px;
}

.subscription-ending h4 {
    color: rgba(0, 0, 0, 0.85);
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.subscription-ending p {
    color: rgba(0, 0, 0, 0.85);
    margin: 0;
    padding-left: 2rem;
}

/* Media Queries for responsive behavior */
@media screen and (min-width: 992px) {
    .billing-subscription-card.ant-card {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .billing-subscription-card.ant-card {
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .subscription-plan-details {
        flex-direction: column;
        align-items: flex-start;
    }
}
.contact-us-wrapper {
    padding: 0.5rem;
}

.contact-us-wrapper a {
    color: #2662C8;
    text-decoration: underline;
    cursor: pointer;
}

.contact-us-wrapper a:hover {
    color: #2662C8;
    text-decoration: none;
}

.contact-us-wrapper a:visited {
    color: #2662C8;
}

.contact-us-wrapper div {
    margin: 0.5rem 0;
}

.contact-info {
    margin: 0.5rem 0;
    display: block;
}

.contact-info :global(.ant-btn) {
    padding: 0;
    height: auto;
    line-height: inherit;
    border: none;
    background: none;
    box-shadow: none;
    display: inline;
}

.contact-info > * {
    display: inline;
}

@media screen and (max-width: 1024px) {
    .contact-us-wrapper .contact-info {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media screen and (max-width: 480px) {
    .contact-us-wrapper {
        text-align: center;
    }
}

.contact-links-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.contact-phone-group {
    white-space: nowrap;
    display: inline-flex;
    gap: 4px;
    align-items: center;
}.billing-subscription-layout {
    min-width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    background: #FFF;
    display: flex;
    flex-direction: column;
    padding: 2rem 2rem 0 2rem;
    overflow-y: auto;
    align-items: flex-start;
}

/* New flex container to replace Ant Design Row/Col */
.billing-subscription-container {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 1.5rem;
    max-width: 1400px;
    justify-content: flex-start;
}

/* Left column with subscription details */
.billing-subscription-left-column {
    width: 420px;
    min-width: 420px;
    max-width: 420px;
    flex: 0 0 420px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Right column with features */
.billing-subscription-right-column {
    flex: 1;
    max-width: calc(100% - 444px); /* Account for left column width (420px) + gap (24px) */
    min-width: 0;
}

.billing-subscription-card.ant-card {
    border: 1px solid #DADADA;
    border-radius: 4px 4px 0px 0px;
    width: 100%;
    margin-bottom: 0;
}

.billing-subscription-card .ant-card-head {
    background: #F5F5F5;
    border-bottom: 1px solid #DADADA;
    border-radius: 4px 4px 0px 0px;
}

/* Media Queries */
@media screen and (max-width: 1024px) {
    .billing-subscription-layout {
        padding: 1rem 1rem 0 1rem;
    }

    .billing-subscription-left-column {
        width: 380px;
        min-width: 380px;
        max-width: 380px;
        flex: 0 0 380px;
    }

    .billing-subscription-right-column {
        flex: 1;
        max-width: calc(100% - 404px);
    }
}

@media screen and (max-width: 768px) {
    .billing-subscription-layout {
        padding: 1rem;
    }

    .billing-subscription-container {
        flex-direction: column;
    }

    .billing-subscription-left-column,
    .billing-subscription-right-column {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 1 1 auto;
    }
}
.payment-information-wrapper {
    padding: 0.5rem;
}

.payment-information-wrapper a {
    text-decoration: underline;
}

.payment-information-details {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 0;
    flex-wrap: wrap;
    gap: 1rem;
}

.payment-information-wrapper b {
    white-space: nowrap;
    display: inline-block;
}

.payment-information-wrapper div {
    line-height: 1.5;
}

/* Target the specific text container */
.payment-panel-wrapper > div:last-child > div {
    display: inline;
}

/* Keep company name and phone together */
.payment-panel-wrapper > div:last-child > div b {
    display: inline;
}

/* Prevent breaks between company name and phone */
.payment-panel-wrapper > div:last-child > div b + b {
    margin-left: 0.25rem;
}

/* Remove any forced line breaks */
.payment-panel-wrapper br {
    display: none;
}

@media screen and (max-width: 480px) {
    .payment-information-details {
        flex-direction: column;
        align-items: flex-start;
    }
}.product-feature-included,
.product-feature-excluded {
    margin-left: 10px;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    padding: 8px 0;
    align-items: flex-start;
}

.product-feature-included {
    color: #333333;
}

.product-feature-excluded {
    color: #5D5D5D;
}

.product-feature-included .product-feature-icon svg {
    color: #52c41a;
}

.product-feature-icon {
    margin: 2px 8px 0 0;
    padding: 0;
    flex-shrink: 0;
}

.product-feature-description {
    flex-grow: 1;
}

.product-feature-title {
    font-weight: 700;
    margin: 0 0 4px 0;
}

.product-feature-description-text {
    margin: 0;
    color: #5D5D5D;
}
.features-overview .ant-card-head {
    background: #F5F5F5;
    border-bottom: 1px solid #DADADA;
    border-radius: 4px 4px 0px 0px;
}

.features-overview.ant-card {
    border: 1px solid #DADADA;
    border-radius: 4px 4px 0px 0px;
    width: 100%;
    margin-bottom: 1rem;
}

.features-overview a {
    color: #2662C8;
    text-decoration: underline;
    cursor: pointer;
}

.features-overview a:hover {
    color: #2662C8;
    text-decoration: none;
}

.features-overview a:visited {
    color: #2662C8;
}

.features-overview .ant-card-head-title {
    font-weight: 500;
}

.features-overview .ant-card-body {
    padding: 24px;
}

.features-overview .ant-card-body .features-overview-container {
    display: flex;
    padding: 0;
    margin-top: 0;
}

.features-overview .ant-card-body .features-overview-ol {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    width: 100%;
}

.features-overview .ant-card-body .features-overview-li {
    flex: 0 0 50%;
    padding: 8px 16px 8px 0;
}

.features-overview .ant-card-body .features-overview-container-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0 0 0;
}

.features-overview-link-disabled {
    cursor: default;
    opacity: 0.6;
    text-decoration: underline;
}

/* Responsive adjustments */
@media screen and (max-width: 1024px) {
    .features-overview .ant-card-body {
        padding: 16px;
    }

    .features-overview .ant-card-body .features-overview-li {
        flex: 0 0 100%;
        padding: 6px 8px 6px 0;
    }
}
.subscription-overview-wrapper {
    padding: 1rem;
    box-sizing: border-box;
}

.subscription-overview-plan-title {
    display: flex;
    justify-content: space-between;
}

.subscription-overview-plan-details {
    display: flex;
    justify-content: space-between;
    margin: .5rem 0;
}

.review-changes-button-wrapper {
    margin: 1rem 0 0 0;
}

.subscription-overview-wrapper .indented-text {
    padding-left: 1.5rem;
}

.review-changes-button-wrapper button {
    width: 100%;
    height: 50px;
}

.subscription-overview-addon-details {
    border: 1px solid #DADADA;
    border-radius: 4px 4px 0px 0px;
    padding: 1rem;
    margin: 1rem 0;
}

.subscription-overview-custom-plan {
    font-size: 18px;
}

.subscription-overview-update-message {
    margin: 1rem 0;
    line-height: 1.5;
}

.subscription-overview-update-message .anticon {
    margin-right: 0.5rem;
    vertical-align: middle;
}

.subscription-overview-update-message span {
    display: inline;
}

.subscription-overview-info-icon {
    margin-left: 0.5rem;
    color: #1890ff;
}

.subscription-overview-strikethrough {
    text-decoration: line-through;
    margin-right: 0.5rem;
}

.subscription-overview-waived {
    color: #52c41a;
}

.subscription-overview-waived-label {
    color: #888;
    font-weight: 400;
}.webchat-learn-more-modal {
    top: 15%;
}

.webchat-learn-more-modal .modal-image {
    margin-bottom: 3rem;
    margin-top: 3rem;
}

.webchat-learn-more-modal .modal-title {
    margin-bottom: 2rem;
}

.webchat-learn-more-modal .modal-paragraph {
    margin-bottom: 2rem;
}

.webchat-learn-more-modal .modal-price {
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.manage-subscription-header-wrapper {
    display: flex;
    align-items: center;
    padding: 0 2em;
}

.manage-subscription-header-wrapper div {
    margin: 1.5em 2em;
}

.manage-subscription-header-check-icon {
    vertical-align: top;
    margin-right: 4px;
}.manage-subscription-layout {
    min-height: 100vh;
    min-width: 100%;
    max-width: 1408px;
    margin: 0;
    background: #fff;
    overflow-x: hidden;
    padding: 0 0 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Main content container to ensure proper left alignment */
.manage-subscription-content {
    width: 100%;
    max-width: 1408px;
    margin: 0;
}

.manage-subscription-layout a {
    color: #2662C8;
    text-decoration: underline;
    cursor: pointer;
}

.manage-subscription-layout a:hover {
    color: #2662C8;
    text-decoration: none;
}

.manage-subscription-layout a:visited {
    color: #2662C8;
}

.manage-subscription-layout-header {
    border-bottom: 1px solid #DADADA;
    margin-bottom: 24px;
    width: 100%;
}

.manage-subscription-layout .ant-btn-primary:not(:disabled):hover,
.manage-subscription-layout .ant-btn-primary:not(:disabled):not(.ant-btn-disabled):hover {
    background: #2260be;
}

.manage-subscription-layout .ant-btn-primary:not(:disabled),
.manage-subscription-layout .ant-btn-primary:not(:disabled):not(.ant-btn-disabled) {
    background: #1A4A93;
}

.manage-subscription-layout .ant-switch.ant-switch-checked:hover {
    background: #2260be;
}

.manage-subscription-layout .ant-switch.ant-switch-checked {
    background: #1A4A93;
}

.manage-subscription-layout-check-icon {
    vertical-align: top;
    margin-right: 0.25rem;
}

.manage-subscription-card.ant-card {
    border: 1px solid #DADADA;
    border-radius: 4px 4px 0px 0px;
}

.manage-subscription-card .ant-card-head {
    background: #F5F5F5;
    border-bottom: 1px solid #DADADA;
    border-radius: 4px 4px 0px 0px;
}

.subscription-plan-details-check-icon {
    vertical-align: top;
    margin-right: 0.25rem;
    color: #91C73D;
}

.subscription-plan-details-close-icon {
    vertical-align: top;
    margin-right: 0.25rem;
    color: #A9A9A9;
}

.subscription-plan-details-add-icon {
    vertical-align: top;
    margin-right: 0.25rem;
    color: #333333;
}

.manage-subscription-new {
    min-height: 100vh;
    background: #fff;
    width: 100%;
    max-width: 100%;
}

/* Ensure the content fits within the 1408px container */
.subscription-main-content {
    padding-right: 0.75rem;
    width: 100%;
}

.subscription-sidebar {
    padding-left: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.subscription-sidebar .ant-col {
    width: 100%;
}

.subscription-sidebar .manage-subscription-card {
    width: 100%;
}

/* Common wrapper class for sidebar cards */
.sidebar-card-wrapper {
    width: 100%;
    box-sizing: border-box;
}

/* Specific adjustments for 1280x1024 resolution */
@media screen and (max-width: 1280px) {
    .subscription-main-content {
        width: 65%;
    }

    .subscription-sidebar {
        width: 35%;
    }

    .sidebar-card-wrapper {
        min-width: unset;
        max-width: 100%;
    }
}

/* Adjustments for 1024x768 resolution */
@media screen and (max-width: 1024px) {
    .manage-subscription-layout {
        padding: 0 1rem 1rem 1rem;
    }

    .subscription-main-content {
        flex: 0 0 65%;
        max-width: 65%;
    }

    .subscription-sidebar {
        flex: 0 0 35%;
        max-width: 35%;
        padding-left: 1rem;
    }

    .sidebar-card-wrapper {
        min-width: unset;
        max-width: 100%;
    }
}

/* Mobile adjustments - now only applying under 768px */
@media (max-width: 768px) {
    .manage-subscription-layout {
        padding: 0 16px 16px 16px;
    }

    .subscription-sidebar {
        margin-top: 24px;
        padding-left: 0;
        align-items: center;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .subscription-main-content {
        padding-right: 0;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .sidebar-card-wrapper {
        max-width: 600px;
    }
}

/* Ensure the sidebar card can go full width on small mobile */
@media (max-width: 480px) {
    .sidebar-card-wrapper,
    .subscription-overview-wrapper {
        min-width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .manage-subscription-layout {
        padding: 0 12px 12px 12px;
    }
}.plans-card {
    border-radius: 4px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    border: 1px solid #DADADA;
}

.plans-card .ant-card-head {
    background: #F5F5F5;
    border-bottom: 1px solid #DADADA;
    border-radius: 4px 4px 0px 0px;
}

.plans-card .ant-card-body {
    padding: 0;
}

.subscription-plans {
    width: 100%;
    max-width: 100%;
}

.plans-container {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    background-color: #DADADA;
    width: 100%;
    box-sizing: border-box;    
}

/* For 1-2 plans, keep original min/max constraints */
.plans-container:has(> :nth-last-child(-n+2):first-child) {
    grid-template-columns: repeat(auto-fit, minmax(228px, 275px));
    justify-content: start;
    background-color: transparent;
    gap: 16px;
}

/* For exactly 3 plans, distribute evenly */
.plans-container:has(> :nth-last-child(3):first-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* For 4+ plans, show 4 per row */
.plans-container:has(> :nth-last-child(n+4):first-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Adjust for smaller screens */
@media (max-width: 1200px) {
    /* For 4+ plans on medium screens, show 3 per row */
    .plans-container:has(> :nth-last-child(n+4):first-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    /* For 3+ plans on smaller screens, show 2 per row */
    .plans-container:has(> :nth-last-child(n+3):first-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    /* For all plans on mobile, stack them */
    .plans-container {
        grid-template-columns: 1fr !important;
    }
}

.plan-card {
    padding-bottom: 0;
    box-sizing: border-box;
    background-color: white;
    width: 100%;
} .plan-card {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0;
    border: 1px solid #e8e8e8;
    border-radius: 0;
    background-color: #f5f5f5;
    margin: 0;
    transition: all 0.3s;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.plan-card-selected {
    border-color: #1A4A93;
    border-width: 2px;
    box-shadow: 0 4px 12px rgba(145, 199, 61, 0.2);
    background-color: #FAFCFF;
}

.plan-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.plan-card .ant-btn-primary:not(:disabled):hover,
.plan-card .ant-btn-primary:not(:disabled):not(.ant-btn-disabled):hover {
    background: #2260be;
}

.plan-card .ant-btn-primary:not(:disabled),
.plan-card .ant-btn-primary:not(:disabled):not(.ant-btn-disabled) {
    background: #1A4A93;
}

.description-container {
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    height: auto;
}

.description-container .ant-typography {
    width: 100%;
}

.price-container {
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem;
    min-height: 4rem;
}

.price-text {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.price-prefix,
.price-suffix {
    white-space: nowrap;
}

.features-list .ant-list-item {
    padding: 0.5rem 0;
    border-bottom: none;
    justify-content: flex-start;
}

.feature-icon {
    margin-right: 0.75rem;
}

.feature-icon .included {
    color: #91c73d;
}

.feature-icon .excluded {
    color: #d9d9d9;
}

.select-button {
    width: 100%;
    height: 40px;
    margin: 0.5rem 0 0 0;
    padding: 0;
}

.select-button:disabled {
    background-color: #F5F5F5;
    color: rgba(0, 0, 0, 0.25);
    border: none;
}

.plan-card-upper {
    margin-bottom: 2rem;
    padding: 24px;
    background-color: white;
}

.features-container {
    padding: 16px 24px;
    background-color: inherit;
    flex-grow: 1;
}

.features-container-selected {
    background-color: inherit;
}

.plan-title-container {
    min-height: 40px;
    margin-bottom: 0.75rem;
}

.plan-title-container h4.ant-typography {
    margin: 0;
    display: -webkit-box;
    overflow: visible;
    word-wrap: break-word;
}

.features-title-container {
    min-height: 30px;
    margin-bottom: 0.75rem;
}

.features-title-container .ant-typography {
    margin: 0;
    display: -webkit-box;
    overflow: visible;
    word-wrap: break-word;
}

.features-list {
    margin-top: 0;
}
.cancel-subscription-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem;
}

.cancel-plan-button.ant-btn-dangerous {
    width: 100%;
    height: 5rem;
    font-size: 16px;
    border: 1px solid #ff4d4f;
    color: #ff4d4f;
}

.cancel-plan-button.ant-btn-dangerous:hover {
    background-color: #fff1f0 !important;
    border-color: #ff4d4f !important;
    color: #ff4d4f !important;
}.subscription-verify-layout {
    min-height: 100vh;
    min-width: 100%;
    background-color: #FFF;
    overflow-x: hidden;
}

.subscription-verify-layout a {
    color: #2662C8;
}

.subscription-verify-layout button {
    width: 100%;
    height: 3em;
}

.subscription-verify-layout .ant-btn-primary:not(:disabled):hover,
.subscription-verify-layout .ant-btn-primary:not(:disabled):not(.ant-btn-disabled):hover {
    background: #2260be;
}

.subscription-verify-layout .ant-btn:not(:disabled):hover,
.subscription-verify-layout .ant-btn:not(:disabled):not(.ant-btn-disabled):hover {
    background: #2260be;
    color: #ffffff;
    border-color: #2260be;
}

.subscription-verify-layout .ant-btn-primary:not(:disabled),
.subscription-verify-layout .ant-btn-primary:not(:disabled):not(.ant-btn-disabled) {
    background: #1A4A93;
}

.subscription-verify-layout .ant-switch.ant-switch-checked:hover {
    background: #2260be;
}

.subscription-verify-layout .ant-switch.ant-switch-checked {
    background: #1A4A93;
}

.subscription-verify-layout-body {
    padding: 2em;
}

.subscription-verify-column {
    display: flex;
    justify-content: center;
    align-items: center;
}

.subscription-verify-card.ant-card {
    width: 95%;
    border: 1px solid #DADADA;
    border-radius: 4px 4px 0px 0px;
}

@media (min-width: 768px) {
    .subscription-verify-card.ant-card {
        width: 80%;
    }
}

@media (max-width: 1200px) {
    .subscription-verify-card.ant-card {
        width: 40%;
        min-width: 480px;
    }
}

.contact-us-link {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}.subscription-confirmation-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.update-confirmation-card.ant-card {
    width: 40%;
    border: 1px solid #DADADA;
    border-radius: 0.25rem 0.25rem 0 0;
}

.subscription-confirmation-wrapper a {
    text-decoration: underline;
}

.subscription-confirmation-plan-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    font-size: 1.2rem;
    font-weight: 500;
}

.confirm-changes-button-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 2rem;
}

.update-confirmation-header-arrow-icon {
    font-size: 1.2rem;
}

.subscription-confirmation-payment-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    border: 1px solid #DADADA;
    border-radius: 0.25rem 0.25rem 0 0;
    padding: 1rem;
    margin: 1rem 0;
    width: 100%;
}

.subscription-confirmation-payment-details > * {
    width: 100%;
}

.subscription-confirmation-link {
    text-align: right;
    margin-top: 4rem;
    margin-bottom: 1rem;
}

.subscription-confirmation-card-footer {
    font-size: small;
    margin-top: 1rem;
    margin-bottom: 2rem;
    word-wrap: break-word;
}

.subscription-confirm-wrapper {
    background: white;
    border-radius: 0.25rem;
    padding: 2rem;
    width: 100%;
    margin-top: 1rem;
}

.subscription-verify-card.ant-card {
    width: 100%;
    border: 1px solid #DADADA;
    border-radius: 4px 4px 0px 0px;
}

.subscription-confirmation-go-back-link {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    text-align: left;
    z-index: 1;
}

.subscription-verify-column {
    padding-top: 4rem;
}
.downgrade-subheading p {
    margin-top: 1.25rem;
    margin-bottom: -0.25rem;
    font-size: smaller;
    color: #5D5D5D;
}

.downgrade-warning-box {
    background-color: #FFF1B8;
    width: 100%;
    margin-top: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.downgrade-warning-box h3 {
    margin: 0;
}

.downgrade-warning-box p {
    margin: 0;
}

.downgrade-warning-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.downgrade-warning-box li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.downgrade-warning-box .remove-feature-icon {
    color: #B21C1A;
}

.downgrade-warning-box .reason-input p {
    font-size: smaller;
    margin-bottom: 0.5rem;
}

.subscription-confirmation-plan-details {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: .5rem 0;
}

.subscription-confirmation-plan-details > span {
    min-width: 120px;
}
.subscription-confirmation-info-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    border: 1px solid #DADADA;
    border-radius: 0.25rem 0.25rem 0 0;
    padding: 1rem;
    margin: 1rem 0;
    background-color: #F5F9FF;
}

.subscription-confirmation-info-text {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.subscription-confirmation-info-circle {
    color: #91C73D;
    margin-right: 0.25rem;
}

.subscription-confirmation-details {
    border: 1px solid #DADADA;
    border-radius: 0.25rem 0.25rem 0 0;
    padding: 1rem;
    margin: 1rem 0;
    background-color: #F5F9FF;
    word-wrap: break-word;
}

.subscription-confirmation-plan-labels {
    color: #8c8c8c;
    font-size: smaller;
    margin: 0.5rem 0;
    display: flex;
    justify-content: space-between;
}

.subscription-confirmation-plan-labels:first-child {
    margin-top: 0;
}

.subscription-confirmation-plan-details {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.subscription-confirmation-plan-details > span {
    min-width: 120px;
}

.subscription-confirmation-info-icon {
    color: #1890ff;
    margin-left: 0.25rem;
}

.subscription-confirmation-strikethrough {
    text-decoration: line-through;
    margin-right: 0.5rem;
}

.subscription-confirmation-waived {
    color: #52c41a;
}

.subscription-confirmation-waived-label {
    color: #888;
    font-weight: 400;
}

.subscription-confirmation-amount {
    display: inline-block;
    min-width: 120px;
    text-align: right;
}
.subscription-change-container {
    padding: 2em 1.5em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.subscription-change-container h2 {
    text-align: center;
    margin: 1em 0;
    word-wrap: break-word;
    max-width: 100%;
}

.subscription-change-container p {
    text-align: center;
    margin: 1em 0;
    word-wrap: break-word;
    max-width: 100%;
}

.subscription-change-content {
    margin: 1em 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.subscription-change-content button {
    width: 100%;
    max-width: 300px;
}

.subscription-change-check-icon {
    color: #91c73d;
    font-size: 56px !important;
}

@media (min-width: 768px) {
    .subscription-change-container {
        padding: 5em 3em;
    }

    .subscription-change-check-icon {
        font-size: 72px;
    }
}
/* Content Styles */
.subscription-canceled-container {
    max-width: 800px;
    margin: 0 auto;
}

.subscription-canceled-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    text-align: center;
    margin-top: 200px;
}

.cancel-icon {
    font-size: 48px;
    color: #D32F2F;
    margin-bottom: 16px;
}

.cancel-title {
    font-size: 24px;
    color: #333333;
    margin-bottom: 16px;
}

.cancel-message {
    font-size: 16px;
    text-align: center;
    color: #333333;
    margin-bottom: 24px;
    max-width: 460px;
}

/* Button Styles */
.subscription-canceled-layout .subscription-canceled-content .back-to-billing-btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    gap: 4px;
    width: 240px;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #1A4A93;
    border-radius: 4px;
    color: #1A4A93;
    transition: background-color 0.2s ease;
}

.subscription-canceled-layout .subscription-canceled-content .back-to-billing-btn:hover {
    background-color: #1A4A93;
    border: 1px solid #1A4A93;
    color: #FFFFFF;
}
/* Layout Styles */
.subscription-canceled-layout {
    min-height: 100vh;
    min-width: 100%;
    background-color: #FAFCFF;
    overflow-x: hidden;
}

.subscription-canceled-layout-body {
    padding: 2em;
}

.subscription-canceled-column {
    display: flex;
    justify-content: center;
    align-items: center;
}

.subscription-canceled-card.ant-card {
    width: 560px;
    min-height: 743px;
    border: 1px solid #DADADA;
    border-radius: 4px;
    background-color: #FFFFFF;
}

.subscription-canceled-card .ant-card-head {
    border-bottom: none;
    padding: 24px;
    min-height: auto;
}

.subscription-canceled-card .ant-card-head-title {
    color: #333333;
    padding: 0;
    white-space: normal;
}

.subscription-canceled-card .ant-card-body {
    padding: 0;
}
.cancellation-verify-layout {
    min-height: 100vh;
    min-width: 100%;
    background-color: #FAFCFF;
    overflow-x: hidden;
}

.cancellation-verify-layout-body {
    padding: 2em;
}

.cancellation-verify-column {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cancellation-verify-card.ant-card {
    width: 560px;
    min-height: auto;
    border: 1px solid #DADADA;
    border-radius: 4px;
    background-color: #FFFFFF;
}

.cancellation-verify-card .ant-card-head {
    border-bottom: none;
    padding: 2.5rem;
    min-height: auto;
}

.cancellation-verify-card .ant-card-head-title {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
    padding: 0;
    white-space: normal;
    line-height: normal;
}

.cancellation-verify-card .ant-card-body {
    padding: 0 2.5rem 2.5rem;
}
.cancel-subscription-container {
    max-width: 800px;
    margin: 0 auto;
}

.cancel-subscription-card.ant-card {
    border: 1px solid #DADADA;
    border-radius: 4px;
}

.cancel-subscription-card .ant-card-head {
    background: #F5F5F5;
    border-bottom: 1px solid #DADADA;
    padding: 1.5rem 2.5rem;
}

.subscription-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    padding: 0;
}

.subscription-type {
    font-weight: 400;
    line-height: 20px;
    color: #333333;
}

.subscription-price {
    font-weight: 400;
    line-height: 20px;
    color: #333333;
}

.warning-box {
    background-color: #FFF1B8;
    padding: 2.5rem;
    margin: 0 0 2.5rem;
    border-radius: 4px;
}

.warning-box h3 {
    margin-bottom: 1.5rem;
    font-size: 16px;
    font-weight: 500;
}

.warning-box p {
    margin-bottom: 1.5rem;
}

.confirm-input {
    margin-bottom: 2.5rem;
}

.confirm-input p {
    margin-bottom: 1rem;
}

.reason-input p {
    margin-bottom: 1rem;
}

.button-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0 0 2.5rem;
}

.button-container .ant-btn {
    width: 100%;
    height: 40px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}

.contact-us-wrapper {
    text-align: center;
    margin-bottom: 2.5rem;
}

.contact-us-wrapper div {
    margin-bottom: 1rem;
}

.disclaimer {
    color: #5D5D5D;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    padding: 0;
    margin-bottom: 1.5rem;
}

.contact-us-link {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 0;
    margin-bottom: 2.5rem;
    text-decoration: none;
}

.contact-us-link a {
    text-decoration: none;
}

.warning-box .ant-input:focus,
.warning-box .ant-input-focused,
.warning-box .ant-input:hover,
.warning-box .ant-input-textarea:focus,
.warning-box .ant-input-textarea-focused,
.warning-box .ant-input-textarea:hover {
    border-color: #2662C8;
    box-shadow: 0 0 0 2px rgba(38, 98, 200, 0.1);
}

.warning-box .ant-input-textarea-focused,
.warning-box .ant-input-focused {
    border-color: #2662C8;
    box-shadow: 0 0 0 2px rgba(38, 98, 200, 0.1);
}

.base-plan-text {
    color: #5D5D5D;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    margin-bottom: 1rem;
    padding: 0;
}

@media (max-width: 768px) {
    .warning-box {
        padding: 2rem;
    }
}