@import url(https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap);
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Plus Jakarta Sans
}

img {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

body {
    overflow-x: hidden
}

body::-webkit-scrollbar {
    width: 6px
}

body::-webkit-scrollbar-track {
    background: transparent
}

body::-webkit-scrollbar-thumb {
    background-color: #afafaf;
    border-radius: 20px
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px
}

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar-thumb {
    background-color: #afafaf;
    border-radius: 20px
}

/* ============================================
   ESTILOS PARA LOGIN - SEM DATA-V ATTRIBUTES
   ============================================ */

/* Background Auth */
.bg-auth {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-color: #010000;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 50px 0;
}

.bg-auth--with-banner.bg-auth {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent !important;
    box-sizing: border-box;
}

/* Remove espaços quando banner está ativo */
.bg-auth--with-banner,
.bg-auth--with-banner * {
    box-sizing: border-box;
}

.bg-auth--with-banner .auth-banner,
.bg-auth--with-banner .bg-modal {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.bg-auth--with-banner > * {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Garantir que não há espaços - aplica a todos os containers quando banner está ativo */
.bg-auth--with-banner {
    position: relative;
}

.bg-auth--with-banner::before,
.bg-auth--with-banner::after {
    display: none;
}

/* Garantir que não haja scrollbar ou espaços extras */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body .min-h-screen:has(.bg-auth--with-banner),
body .flex.flex-col:has(.bg-auth--with-banner) {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
}

.bg-auth figure {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-auth figure img {
    width: 120px;
    max-width: 98%;
}

/* Background Modal */
.bg-auth .bg-modal {
    width: 95%;
    max-width: 650px;
    padding: 40px;
    background-color: #161616;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bg-auth .bg-modal h2 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    font-family: Plus Jakarta Sans;
    font-style: normal;
}

.bg-auth .bg-modal p {
    color: #b0b0b0;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    text-align: center;
    font-family: Plus Jakarta Sans;
    font-style: normal;
}

.bg-auth--with-banner {
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    overflow: hidden !important;
    position: relative;
    box-sizing: border-box;
    display: flex !important;
}

.bg-auth.bg-auth--with-banner.bg-auth--banner-left {
    flex-direction: row !important;
}

.bg-auth.bg-auth--with-banner.bg-auth--banner-right {
    flex-direction: row-reverse !important;
}

/* Garantir que funcione mesmo com outras classes */
section.bg-auth.bg-auth--with-banner.bg-auth--banner-left {
    flex-direction: row !important;
}

section.bg-auth.bg-auth--with-banner.bg-auth--banner-right {
    flex-direction: row-reverse !important;
}

.bg-auth--with-banner .auth-banner {
    width: 50vw !important;
    min-width: 50vw !important;
    max-width: 50vw !important;
    flex: 0 0 50vw !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #ffffff !important;
    min-height: 100vh !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block !important;
    overflow: hidden !important;
    position: relative;
    box-sizing: border-box;
}

.bg-modal--full-height {
    width: 50vw !important;
    min-width: 50vw !important;
    max-width: 50vw !important;
    flex: 0 0 50vw !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    border-radius: 0 !important;
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
    padding-right: 70px;
    margin: 0 !important;
    border: none !important;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #21b3dd transparent;
}

.bg-modal--full-height::-webkit-scrollbar {
    width: 6px;
}

.bg-modal--full-height::-webkit-scrollbar-track {
    background: transparent;
}

.bg-modal--full-height::-webkit-scrollbar-thumb {
    background-color: rgba(33, 179, 221, 0.7);
    border-radius: 999px;
}

.bg-auth--with-banner .bg-modal {
    border-radius: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.auth-form-wrapper {
    width: 100%;
}

.bg-modal--full-height .auth-form-wrapper {
    max-width: 480px;
    margin: 0 auto;
}

.auth-form-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.auth-form-logo img {
    width: 140px;
    max-width: 80%;
}

/* Auth Tabs */
.bg-auth .bg-modal .auth-tabs {
    width: 100%;
    border-radius: 250px;
    padding: 12px;
    background: #1f1f1e;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.bg-auth .bg-modal .auth-tabs .tab {
    width: 100%;
    padding: 15px 10px;
    border-radius: 250px;
    background: #161616;
    cursor: pointer;
    transition: .2s;
}

.bg-auth .bg-modal .auth-tabs .tab p {
    color: #b0b0b0;
    font-family: Plus Jakarta Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    margin: 0;
}

.bg-auth .bg-modal .auth-tabs .tab:hover {
    background: #21b3dd;
}

.bg-auth .bg-modal .auth-tabs .tab:hover p {
    color: #f9f9f9;
}

.bg-auth .bg-modal .auth-tabs .tab.active {
    background: #21b3dd;
}

.bg-auth .bg-modal .auth-tabs .tab.active p {
    color: #f9f9f9;
    font-family: Plus Jakarta Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

/* Form */
.bg-auth .bg-modal .form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

/* Input Groups */
.bg-auth .bg-input {
    width: 100%;
}

.bg-auth .bg-label {
    margin-bottom: 8px;
}

.bg-auth .bg-label .label,
.bg-auth .bg-label .default-label {
    color: #ffffff;
    font-weight: 550;
    margin-left: 0;
    font-family: Plus Jakarta Sans;
    font-size: 14px;
    font-style: normal;
    line-height: normal;
}

.bg-auth .input-group {
    width: 100%;
    position: relative;
}

.bg-auth .input-group .input,
.bg-auth .input-group .default-input {
    width: 100%;
    border: none;
    height: 46px;
    padding: 12px 24px;
    border-radius: 8px;
    border: 1px solid #3A3A3A;
    background: #1f1f1e;
    color: #ffffff;
    font-family: Plus Jakarta Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.bg-auth .input-group .input::placeholder,
.bg-auth .input-group .default-input::placeholder {
    color: #86898b;
    opacity: 1;
}

.bg-auth .input-group .input:focus,
.bg-auth .input-group .default-input:focus {
    outline: 0;
    border: 1px solid #21b3dd;
}

.bg-auth .show-text {
    position: absolute;
    right: 20px;
    top: 13px;
    cursor: pointer;
}

.bg-auth .show-text .icon {
    width: 20px;
    height: 20px;
    color: #b0b0b0;
    cursor: pointer;
}

.bg-auth .show-text .icon:hover {
    color: #ffffff;
}

.bg-auth .error-text {
    color: #f64e60;
    font-family: Plus Jakarta Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 5px;
    margin-left: 15px;
}

/* Actions */
.bg-auth .actions {
    width: 100%;
}

.bg-auth .bg-large-button {
    width: 100%;
}

.bg-auth .bg-large-button button {
    display: flex;
    width: 100%;
    height: 56px;
    padding: 12px 23px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 250px;
    transition: .1s;
    font-family: Plus Jakarta Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border: none;
}

.bg-auth .primary button {
    background: #21b3dd;
    border: 3px solid #21b3dd;
    color: #f9f9f9;
    cursor: pointer;
    transition: .1s;
}

.bg-auth .primary:hover button {
    border: 3px solid #21b3dd;
    background: #21b3dd;
    transition: .1s;
}

/* Link Esqueceu Senha */
.bg-auth .bg-modal .form a {
    color: #21b3dd;
    text-decoration: none;
    font-family: Plus Jakarta Sans;
    font-size: 14px;
    font-weight: 500;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    transition: .2s;
}

.bg-auth .bg-modal .form a:hover {
    color: #21b3dd;
    text-decoration: underline;
}

/* Select */
.bg-auth .input-group select.default-input,
.bg-auth .input-group select.input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b0b0b0' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    padding-right: 50px;
    color: #ffffff;
}

.bg-auth .input-group select.default-input option,
.bg-auth .input-group select.input option {
    background: #1f1f1e;
    color: #ffffff;
}

/* Account Type Selector - Radio Cards */
.bg-auth .account-type-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 0.5rem;
}

.bg-auth .account-type-option {
    position: relative;
    cursor: pointer;
}

.bg-auth .account-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bg-auth .account-type-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 2px solid #2a2a2a;
    background: #1f1f1e;
    transition: all 0.3s ease;
    position: relative;
    min-height: auto;
}

.bg-auth .account-type-option:hover .account-type-card {
    border-color: #21b3dd;
    background: #2a1a15;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(106, 0, 0, 0.2);
}

.bg-auth .account-type-option input[type="radio"]:checked + .account-type-card {
    border-color: #21b3dd;
    background: linear-gradient(135deg, #2a1a15 0%, #1f0f0a 100%);
    box-shadow: 0 2px 10px rgba(106, 0, 0, 0.3);
}

.bg-auth .account-type-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(106, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    color: #21b3dd;
}

.bg-auth .account-type-icon svg {
    width: 18px;
    height: 18px;
}

.bg-auth .account-type-option input[type="radio"]:checked + .account-type-card .account-type-icon {
    background: rgba(106, 0, 0, 0.2);
    color: #21b3dd;
    transform: scale(1.05);
}

.bg-auth .account-type-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.bg-auth .account-type-title {
    color: #ffffff;
    font-family: Plus Jakarta Sans;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.bg-auth .account-type-desc {
    color: #b0b0b0;
    font-family: Plus Jakarta Sans;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
}

.bg-auth .account-type-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #4a4a4a;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    color: transparent;
}

.bg-auth .account-type-check svg {
    width: 12px;
    height: 12px;
}

.bg-auth .account-type-option input[type="radio"]:checked + .account-type-card .account-type-check {
    border-color: #21b3dd;
    background: #21b3dd;
    color: #ffffff;
    transform: scale(1.1);
}

/* Checkbox e Radio antigos (mantidos para compatibilidade) */
.bg-auth .bg-input .radio-group {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.bg-auth .bg-input .radio-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: #ffffff;
}

.bg-auth .bg-input .radio-group label span {
    color: #ffffff;
    font-family: Plus Jakarta Sans;
    font-size: 14px;
}

.bg-auth .bg-input .checkbox-group,
.bg-auth .checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bg-auth .bg-input .checkbox-group label,
.bg-auth .checkbox-group label {
    color: #ffffff !important;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
}

.bg-auth .bg-label .default-label {
    display: block;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
}

.bg-auth .bg-input .checkbox-group label a,
.bg-auth .checkbox-group label a {
    color: #21b3dd !important;
    text-decoration: none;
    transition: .2s;
    display: inline;
    vertical-align: baseline;
    line-height: 1.5;
    font-size: inherit;
}

.bg-auth .bg-input .checkbox-group label a:hover,
.bg-auth .checkbox-group label a:hover {
    color: #21b3dd !important;
    text-decoration: underline;
}

.bg-auth .bg-input input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #21b3dd;
}

.bg-auth .checkbox-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #21b3dd;
    border: 1px solid #3A3A3A;
    border-radius: 4px;
    background-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.bg-auth .checkbox-group input[type="checkbox"]:checked {
    border-color: #21b3dd;
    background-color: #21b3dd;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M11.5 3.5L5.5 9.5L2.5 6.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

/* Radio buttons padrão (mantido para outros usos) */
.bg-auth .radio-group input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #21b3dd;
}

.bg-auth .bg-input label {
    cursor: pointer;
    color: #ffffff;
}

/* Alert Success */
.alert-success {
    background-color: #d1ffe1;
    border: 1px solid #2fcd66;
    color: #297a3e;
    padding: 12px 20px;
    border-radius: 12px;
    font-family: Plus Jakarta Sans;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
}

/* Hidden Fields */
.hidden-fields {
    display: none !important;
}

/* PJ Fields - visible by default */
#pj-fields {
    display: block;
}

/* Register Content */
#register-content {
    display: none;
}

#login-content {
    display: block;
}

/* Responsive */
@media screen and (max-width: 1024px) {
    .bg-auth--with-banner {
        flex-direction: column;
        padding: 0;
    }

    .bg-auth--with-banner .auth-banner {
        width: 100%;
        height: 40vh;
        min-height: 300px;
    }

    .bg-modal--full-height {
        width: 100%;
        height: auto;
        min-height: 60vh;
        border-radius: 0 !important;
        padding: 40px 24px;
    }
}

@media screen and (max-width: 530px) {
    .bg-auth .bg-modal {
        padding: 40px 20px;
    }
    
    .bg-auth .account-type-selector {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .bg-auth .account-type-card {
        padding: 10px 12px;
    }
    
    .bg-auth .account-type-icon {
        width: 32px;
        height: 32px;
    }
}

.bg-input[data-v-37b10915] {
    width: 100%
}

.input-group[data-v-37b10915] {
    width: 100%;
    position: relative
}

.show-text[data-v-37b10915] {
    position: absolute;
    right: 20px;
    top: 13px
}

.show-text .icon[data-v-37b10915] {
    width: 20px;
    color: #737791;
    cursor: pointer
}

.bg-label[data-v-37b10915] {
    margin-bottom: 8px
}

.label {
    &[data-v-37b10915] {
        color: #2a2e33;
        font-weight: 550;
        margin-left: 15px
    }

    &[data-v-37b10915],span[data-v-37b10915] {
        font-family: Plus Jakarta Sans;
        font-size: 14px;
        font-style: normal;
        line-height: normal
    }

    span[data-v-37b10915] {
        color: #86898b;
        font-weight: 450
    }
}

.default-label[data-v-37b10915] {
    color: #2a2e33
}

.gray-label[data-v-37b10915] {
    color: #585858
}

.input[data-v-37b10915] {
    width: 100%;
    border: none;
    height: 46px;
    padding: 12px 24px;
    border-radius: 250px;
    border: 1px solid #d9d9d9;
    background: #fff;
    color: #2a2e33;
    font-family: Plus Jakarta Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.input[data-v-37b10915]:focus {
    outline: 0
}

.default-input[data-v-37b10915]:focus {
    border: 1px solid #21b3dd
}

.inputError[data-v-37b10915] {
    border: 1px solid #f64e60
}

.error-message[data-v-37b10915] {
    color: #f64e60;
    font-family: Plus Jakarta Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 5px;
    margin-left: 15px
}

.error-phrase[data-v-37b10915] {
    color: var(--Color-Danger,#f64e60);
    font-feature-settings: "salt" on,"liga" off;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    margin-top: 5px
}

.bg-large-button {
    &[data-v-5158fe0f] {
        width: 100%
    }

    button[data-v-5158fe0f] {
        display: flex;
        width: 100%;
        height: 56px;
        padding: 12px 23px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        border-radius: 250px;
        transition: .1s;
        font-family: Plus Jakarta Sans;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }
}

.primary {
    button[data-v-5158fe0f] {
        background: var(--Color-Primary,#21b3dd);
        border: 3px solid var(--Color-Primary,#21b3dd);
        color: var(--base-white,#fff);
        cursor: pointer;
        transition: .1s;
        color: #f9f9f9
    }

    &:hover {
        button[data-v-5158fe0f] {
            border: 3px solid #819fff;
            background: #21b3dd;
            transition: .1s
        }
    }
}

.secondary {
    button[data-v-5158fe0f] {
        background: transparent;
        border: 1px solid #d9d9d9;
        color: #2a2e33;
        cursor: pointer;
        transition: .1s
    }

    &:hover {
        button[data-v-5158fe0f] {
            background: #d9d9d9;
            transition: .1s
        }
    }
}

.disabled {
    button[data-v-5158fe0f] {
        background: #86898b!important;
        border: 1px solid #86898b!important;
        color: var(--base-white,#fff);
        cursor: default;
        transition: .1s;
        color: #f9f9f9
    }
}

.bg-loader[data-v-e65d677c] {
    width: 100%;
    height: 100%;
    background-color: #edeff4db;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20
}

.bg-loader[data-v-e65d677c],.loader[data-v-e65d677c] {
    display: flex;
    align-items: center;
    justify-content: center
}

.loader[data-v-e65d677c] {
    position: relative;
    width: 80px;
    height: 80px
}

.icon[data-v-e65d677c] {
    width: 30px;
    height: 30px;
    fill: #21b3dd;
    position: absolute;
    z-index: 2
}

.spinner[data-v-e65d677c] {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotate-e65d677c 1s linear infinite
}

.spinner svg[data-v-e65d677c] {
    width: 100%;
    height: 100%
}

.background[data-v-e65d677c] {
    stroke: #d9d9d9;
    stroke-width: 5;
    fill: none
}

.progress[data-v-e65d677c] {
    stroke: #21b3dd;
    stroke-width: 5;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 250 30;
    stroke-dashoffset: 7.5;
    transform: rotate(-90deg);
    transform-origin: 50% 50%
}

@keyframes rotate-e65d677c {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.bg-auth {
    &[data-v-59ea3eae] {
        width: 100%;
        height: 100%;
        min-height: 100vh;
        background-color: #edeff4;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding: 50px 0
    }

    figure {
        img[data-v-59ea3eae] {
            width: 120px;
            max-width: 98%
        }
    }

    .bg-modal {
        &[data-v-59ea3eae] {
            width: 95%;
            max-width: 650px;
            padding: 40px;
            background-color: #161616;
            border-radius: 24px;
            display: flex;
            flex-direction: column;
            gap: 14px
        }

        h2[data-v-59ea3eae] {
            color: #2a2e33;
            font-size: 24px;
            font-weight: 600;
            line-height: normal
        }

        h2[data-v-59ea3eae],p[data-v-59ea3eae] {
            text-align: center;
            font-family: Plus Jakarta Sans;
            font-style: normal
        }

        p[data-v-59ea3eae] {
            color: #86898b;
            font-size: 14px;
            font-weight: 400;
            line-height: 150%
        }

        .auth-tabs {
            &[data-v-59ea3eae] {
                width: 100%;
                border-radius: 250px;
                padding: 12px;
                background: #edeff4;
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 12px
            }

            .tab {
                &[data-v-59ea3eae] {
                    width: 100%;
                    padding: 15px 10px;
                    border-radius: 250px;
                    background: #fff;
                    cursor: pointer;
                    transition: .2s
                }

                p[data-v-59ea3eae] {
                    color: #86898b;
                    font-family: Plus Jakarta Sans;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: normal
                }

                &:hover {
                    &[data-v-59ea3eae] {
                        background: #21b3dd
                    }

                    p[data-v-59ea3eae] {
                        color: #f9f9f9
                    }
                }
            }

            .active {
                &[data-v-59ea3eae] {
                    background: #21b3dd
                }

                p[data-v-59ea3eae] {
                    color: #f9f9f9;
                    font-family: Plus Jakarta Sans;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: normal
                }
            }
        }

        .form {
            &[data-v-59ea3eae] {
                display: flex;
                flex-direction: column;
                gap: 20px;
                margin-top: 20px
            }

            .password-requireds-list {
                &[data-v-59ea3eae] {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 10px
                }

                h2[data-v-59ea3eae] {
                    color: #86898b;
                    font-family: Plus Jakarta Sans;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: normal
                }

                .password-required {
                    &[data-v-59ea3eae] {
                        width: 100%;
                        gap: 10px
                    }

                    &[data-v-59ea3eae],.req[data-v-59ea3eae] {
                        display: flex;
                        align-items: center
                    }

                    p[data-v-59ea3eae] {
                        color: #86898b;
                        font-family: Plus Jakarta Sans;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: normal
                    }
                }
            }
        }

        .actions[data-v-59ea3eae] {
            width: 100%
        }
    }
}

@media screen and (max-width: 530px) {
    .bg-auth {
        .bg-modal[data-v-59ea3eae] {
            padding:40px 20px
        }
    }
}

.bg-select[data-v-0af0f6a9],.contents[data-v-0af0f6a9] {
    width: 100%;
    position: relative
}

.contents[data-v-0af0f6a9] {
    border-radius: 250px;
    border: none;
    border: 1px solid #d9d9d9;
    background: #fff;
    display: flex;
    padding: 12px 24px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    color: #2a2e33;
    cursor: pointer;
    height: 46px;
    font-family: Plus Jakarta Sans;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.contents .left-data[data-v-0af0f6a9] {
    display: flex;
    align-items: center;
    gap: 5px
}

.contents .bg-icon[data-v-0af0f6a9] {
    display: flex;
    align-items: center;
    justify-content: center
}

.contents .bg-icon .icon[data-v-0af0f6a9] {
    width: 16px;
    color: #757575
}

.bg-label[data-v-0af0f6a9] {
    margin-bottom: 5px
}

.label[data-v-0af0f6a9] {
    color: #2a2e33;
    font-family: Plus Jakarta Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 550;
    line-height: normal;
    margin-left: 15px
}

.default-label[data-v-0af0f6a9] {
    color: #2a2e33
}

.gray-label[data-v-0af0f6a9] {
    color: #585858
}

.select-options[data-v-0af0f6a9] {
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    padding: 0 10px 10px 10px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 14px;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 10;
    border-radius: 24px;
    border: 1px solid #eee;
    background: #fff;
    box-shadow: 0 0 12.4px 0 rgba(54,25,90,.1)
}

.active-border[data-v-0af0f6a9] {
    border: 1px solid #21b3dd
}

.select-options .options-list[data-v-0af0f6a9],.select-options[data-v-0af0f6a9] {
    width: 100%;
    margin-top: 10px
}

.select-options .options-list .options-list-option[data-v-0af0f6a9] {
    width: 100%;
    cursor: pointer;
    display: flex;
    padding: 12px 12px 12px 24px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    margin-top: 5px
}

.select-options .options-list .activeOption[data-v-0af0f6a9],.select-options .options-list .options-list-option[data-v-0af0f6a9]:hover {
    background-color: #d1dcff;
    border-radius: 250px
}

.select-options .options-list .options-list-option p[data-v-0af0f6a9] {
    color: #172248;
    leading-trim: both;
    text-edge: cap;
    font-family: Plus Jakarta Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 550;
    line-height: normal
}

.checkbox[data-v-152e4028] {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px
}

.checkbox .icon[data-v-152e4028] {
    width: 10px;
    color: #edeff4
}

.deactive[data-v-152e4028] {
    background-color: transparent;
    border: 1px solid #d9d9d9
}

.active[data-v-152e4028] {
    background-color: #21b3dd;
    border: 1px solid #21b3dd
}

.bg {
    &[data-v-43488d6e] {
        width: 100%
    }

    .header-boarding {
        &[data-v-43488d6e] {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 25px 35px;
            border-bottom: 1px solid #eee;
            background: #fff
        }

        .disconnect-account {
            &[data-v-43488d6e] {
                padding: 12px 18px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 250px;
                max-width: 100%;
                border-radius: 250px;
                border: 1px solid #d9d9d9;
                background: #fff;
                cursor: pointer;
                transition: .2s
            }

            p[data-v-43488d6e] {
                color: #2a2e33;
                leading-trim: both;
                text-edge: cap;
                font-family: Plus Jakarta Sans;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: normal
            }

            figure[data-v-43488d6e] {
                display: flex;
                align-items: center;
                justify-content: center
            }

            &[data-v-43488d6e]: hover {
                background-color:#f8f8f8;
                transition: .2s
            }

            @media screen and (max-width: 500px) {
                &[data-v-43488d6e] {
                    width:auto;
                    padding: 12px
                }

                p[data-v-43488d6e] {
                    display: none
                }
            }
        }
    }

    .bg-onboarding {
        &[data-v-43488d6e] {
            width: 100%;
            display: flex;
            align-items: flex-start;
            background-color: #edeff4;
            overflow-x: hidden
        }

        .onboarding-steps {
            &[data-v-43488d6e] {
                width: 315px;
                min-width: 315px;
                display: flex;
                flex-direction: column;
                padding: 20px 35px;
                border-right: 1px solid #eee;
                background-color: #fff
            }

            header {
                &[data-v-43488d6e] {
                    margin-top: 30px;
                    display: flex;
                    align-items: flex-start;
                    flex-direction: column;
                    gap: 20px
                }

                h2[data-v-43488d6e] {
                    color: #2a2e33;
                    font-family: Plus Jakarta Sans;
                    font-size: 20px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 140%
                }

                .time-to-start {
                    &[data-v-43488d6e] {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        gap: 5px
                    }

                    figure[data-v-43488d6e] {
                        display: flex;
                        align-items: center;
                        justify-content: center
                    }

                    p[data-v-43488d6e] {
                        color: #21b3dd;
                        font-family: Plus Jakarta Sans;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: 140%
                    }
                }
            }

            .bg-steps {
                &[data-v-43488d6e] {
                    width: 100%;
                    margin-top: 50px
                }

                h3[data-v-43488d6e] {
                    color: #86898b;
                    leading-trim: both;
                    text-edge: cap;
                    font-family: Plus Jakarta Sans;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: normal;
                    letter-spacing: 1.44px
                }

                .steps {
                    &[data-v-43488d6e] {
                        margin-top: 25px;
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 8px;
                        -webkit-user-select: none;
                        -moz-user-select: none;
                        user-select: none
                    }

                    .divider[data-v-43488d6e] {
                        width: 3px;
                        height: 50px;
                        background-color: #f5f5f5;
                        border-radius: 5px;
                        margin-left: 20px
                    }

                    .activeDivider[data-v-43488d6e] {
                        background: #21b3dd
                    }

                    .step {
                        &[data-v-43488d6e] {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            gap: 12px
                        }

                        p[data-v-43488d6e] {
                            color: #2a2e33;
                            leading-trim: both;
                            text-edge: cap;
                            font-family: Plus Jakarta Sans;
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: normal;
                            width: 86px
                        }

                        figure[data-v-43488d6e] {
                            border-radius: 250px;
                            background: #f5f5f5;
                            height: 42px;
                            width: 42px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding: 12px
                        }

                        .activeStep[data-v-43488d6e] {
                            cursor: pointer;
                            background: #d1dcff
                        }

                        .activeText[data-v-43488d6e] {
                            color: #21b3dd;
                            cursor: pointer
                        }
                    }
                }

                .onboarding-progress {
                    &[data-v-43488d6e] {
                        width: 100%;
                        margin-top: 50px;
                        border-radius: 12px;
                        background: #f2e8ff;
                        padding: 24px;
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 10px
                    }

                    h2[data-v-43488d6e] {
                        color: #2a2e33;
                        font-family: Plus Jakarta Sans;
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 700;
                        line-height: 140%
                    }

                    .progress-desc {
                        &[data-v-43488d6e] {
                            display: flex;
                            align-items: center;
                            gap: 5px
                        }

                        figure[data-v-43488d6e] {
                            display: flex;
                            align-items: center;
                            justify-content: center
                        }

                        p[data-v-43488d6e] {
                            color: #524564;
                            font-family: Plus Jakarta Sans;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 140%
                        }
                    }

                    .bg-progress-bar {
                        &[data-v-43488d6e] {
                            width: 100%;
                            display: flex;
                            flex-direction: column;
                            gap: 5px
                        }

                        .progress-infos {
                            &[data-v-43488d6e] {
                                width: 100%;
                                display: flex;
                                align-items: center;
                                justify-content: space-between
                            }

                            p[data-v-43488d6e] {
                                color: #998caa;
                                font-family: Plus Jakarta Sans;
                                font-size: 12px;
                                font-style: normal;
                                font-weight: 600;
                                line-height: 140%
                            }
                        }

                        .progress-bar {
                            &[data-v-43488d6e] {
                                width: 100%;
                                height: 4px;
                                border-radius: 12px;
                                background: #e2d3f6
                            }

                            .bar[data-v-43488d6e] {
                                border-radius: 12px;
                                background: #852df6;
                                height: 4px
                            }
                        }
                    }
                }
            }
        }

        .bg-form-boarding {
            &[data-v-43488d6e] {
                width: 100%;
                height: 100%;
                padding: 50px 35px;
                max-width: 1200px;
                margin: 0 auto
            }

            header {
                &[data-v-43488d6e] {
                    width: 100%;
                    display: flex;
                    align-items: flex-start;
                    flex-direction: column;
                    gap: 10px
                }

                h2[data-v-43488d6e] {
                    color: #2a2e33;
                    font-size: 32px;
                    font-weight: 600;
                    line-height: normal
                }

                h2[data-v-43488d6e],p[data-v-43488d6e] {
                    font-family: Plus Jakarta Sans;
                    font-style: normal
                }

                p[data-v-43488d6e] {
                    color: #86898b;
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 150%
                }
            }

            .bg-form {
                &[data-v-43488d6e] {
                    width: 100%;
                    display: flex;
                    align-items: flex-start;
                    justify-content: space-between;
                    gap: 150px;
                    margin-top: 50px
                }

                .form {
                    &[data-v-43488d6e] {
                        width: 100%;
                        display: flex;
                        align-items: flex-start;
                        flex-direction: column;
                        gap: 16px
                    }

                    .warning {
                        &[data-v-43488d6e] {
                            display: flex;
                            align-items: center;
                            padding: 15px;
                            gap: 15px;
                            border-radius: 12px;
                            background: #e6e3dc
                        }

                        .icon {
                            &[data-v-43488d6e] {
                                width: 24px;
                                height: 24px;
                                background: #ff9d3a;
                                border: 1px solid rgba(255,232,209,.45);
                                border-radius: 100%;
                                display: flex;
                                align-items: center;
                                justify-content: center
                            }

                            p[data-v-43488d6e] {
                                color: #000;
                                font-family: Plus Jakarta Sans;
                                font-size: 10px;
                                font-style: normal;
                                font-weight: 600;
                                line-height: normal
                            }
                        }

                        p[data-v-43488d6e] {
                            color: #4d4d0a;
                            font-family: Plus Jakarta Sans;
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 500;
                            line-height: 150%;
                            max-width: 300px
                        }
                    }

                    .checkbox {
                        &[data-v-43488d6e] {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            gap: 10px
                        }

                        p[data-v-43488d6e] {
                            color: #2a2e33;
                            leading-trim: both;
                            text-edge: cap;
                            font-family: Plus Jakarta Sans;
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 550;
                            line-height: normal;
                            -webkit-user-select: none;
                            -moz-user-select: none;
                            user-select: none;
                            cursor: pointer
                        }
                    }

                    .line[data-v-43488d6e] {
                        gap: 30px;
                        @media screen and (max-width: 720px) {
                            flex-direction:column
                        }
                    }

                    .line[data-v-43488d6e],.small-line[data-v-43488d6e] {
                        width: 100%;
                        display: flex;
                        flex-direction: row;
                        align-items: flex-start
                    }

                    .small-line[data-v-43488d6e] {
                        gap: 10px;
                        @media screen and (max-width: 720px) {
                            flex-direction:column
                        }
                    }

                    .actions {
                        &[data-v-43488d6e] {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            margin-top: 20px
                        }

                        .action-button[data-v-43488d6e] {
                            width: 250px;
                            max-width: 100%
                        }
                    }
                }

                figure[data-v-43488d6e] {
                    margin-right: -80px
                }
            }
        }

        .finished-boarding {
            header[data-v-43488d6e] {
                display: none
            }

            .bg-form {
                .form {
                    &[data-v-43488d6e] {
                        margin-top: 80px;
                        gap: 20px
                    }

                    .titles {
                        &[data-v-43488d6e] {
                            display: flex;
                            align-items: flex-start;
                            flex-direction: column;
                            gap: 40px
                        }

                        h2[data-v-43488d6e] {
                            color: #2a2e33;
                            font-family: Plus Jakarta Sans;
                            font-size: 32px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: normal
                        }
                    }

                    p[data-v-43488d6e] {
                        color: #86898b;
                        font-family: Plus Jakarta Sans;
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 450;
                        line-height: 150%
                    }
                }
            }
        }

        @media screen and (max-width: 890px) {
            &[data-v-43488d6e] {
                flex-direction:column
            }

            .onboarding-steps {
                &[data-v-43488d6e] {
                    width: 100%
                }

                .bg-steps {
                    .steps[data-v-43488d6e] {
                        display: none
                    }

                    .onboarding-progress[data-v-43488d6e] {
                        margin-top: 20px;
                        margin-bottom: 40px
                    }
                }
            }

            .bg-form-boarding {
                .bg-form {
                    figure[data-v-43488d6e] {
                        display: none
                    }
                }
            }

            .finished-boarding {
                .bg-form {
                    .form[data-v-43488d6e] {
                        margin-top: 0
                    }
                }
            }
        }

        @media screen and (max-width: 590px) {
            .bg-form-boarding {
                .bg-form {
                    .form {
                        .actions {
                            &[data-v-43488d6e] {
                                flex-direction:column;
                                width: 100%;
                                gap: 20px
                            }

                            .action-button[data-v-43488d6e] {
                                width: 100%
                            }
                        }
                    }
                }
            }
        }
    }
}

header {
    &[data-v-0717e65f] {
        width: 100%;
        height: 78px;
        border-bottom: 1px solid #eee;
        background: #fff;
        padding: 30px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative
    }

    .modal-close-bg[data-v-0717e65f] {
        width: 100%;
        height: 100vh;
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        background-color: #edeff4db
    }

    .left-items[data-v-0717e65f],.rigth-items {
        &[data-v-0717e65f] {
            display: flex;
            align-items: center;
            flex-direction: row;
            gap: 10px
        }

        .company_data {
            .header-data[data-v-0717e65f] {
                display: flex;
                align-items: center;
                gap: 10px;
                position: relative;
                cursor: pointer
            }

            figure {
                &[data-v-0717e65f] {
                    display: flex;
                    align-items: center;
                    justify-content: center
                }

                img[data-v-0717e65f] {
                    width: 36px;
                    height: 36px;
                    border-radius: 18px;
                    -o-object-fit: cover;
                    object-fit: cover
                }
            }

            .infos {
                &[data-v-0717e65f] {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 2px;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    user-select: none
                }

                h2[data-v-0717e65f] {
                    color: #11151b;
                    font-weight: 600
                }

                h2[data-v-0717e65f],h3[data-v-0717e65f] {
                    font-family: Plus Jakarta Sans;
                    font-size: 12px;
                    font-style: normal;
                    line-height: normal
                }

                h3[data-v-0717e65f] {
                    color: #86898b;
                    font-weight: 550;
                    max-width: 20ch;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis
                }
            }

            .accounts-select-modal {
                &[data-v-0717e65f] {
                    position: absolute;
                    min-width: 320px;
                    z-index: 19;
                    top: 50px;
                    right: 0;
                    width: auto;
                    border-radius: 24px;
                    border: 1px solid #eee;
                    background: #fff;
                    box-shadow: 0 0 12.4px 0 rgba(54,25,90,.1)
                }

                .header {
                    &[data-v-0717e65f] {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        gap: 15px;
                        border-bottom: 1px solid #eee;
                        padding: 20px 24px
                    }

                    figure {
                        img[data-v-0717e65f] {
                            width: 50px;
                            height: 50px;
                            border-radius: 100%
                        }
                    }

                    .data {
                        &[data-v-0717e65f] {
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            gap: 2px
                        }

                        h2[data-v-0717e65f] {
                            color: #2a2e33;
                            font-size: 16px;
                            font-weight: 600;
                            max-width: 20ch;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis
                        }

                        h2[data-v-0717e65f],p[data-v-0717e65f] {
                            font-family: Plus Jakarta Sans;
                            font-style: normal;
                            line-height: normal
                        }

                        p[data-v-0717e65f] {
                            color: #86898b;
                            font-size: 12px;
                            font-weight: 550
                        }
                    }
                }

                .bg-accounts {
                    &[data-v-0717e65f] {
                        display: flex;
                        flex-direction: column;
                        gap: 10px
                    }

                    h2[data-v-0717e65f] {
                        color: #2a2e33;
                        font-family: Plus Jakarta Sans;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 550;
                        line-height: normal;
                        padding: 20px 24px 0 24px
                    }

                    .accounts {
                        &[data-v-0717e65f] {
                            display: flex;
                            flex-direction: column
                        }

                        .account {
                            &[data-v-0717e65f] {
                                width: 100%;
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                cursor: pointer;
                                transition: .2s;
                                padding: 10px 24px
                            }

                            .left-item {
                                &[data-v-0717e65f] {
                                    display: flex;
                                    align-items: center;
                                    gap: 10px
                                }

                                .data {
                                    h3[data-v-0717e65f] {
                                        color: #2a2e33
                                    }

                                    h3[data-v-0717e65f],p[data-v-0717e65f] {
                                        font-family: Plus Jakarta Sans;
                                        font-size: 12px;
                                        font-style: normal;
                                        font-weight: 600;
                                        line-height: normal
                                    }

                                    p[data-v-0717e65f] {
                                        color: #86898b
                                    }
                                }
                            }

                            &[data-v-0717e65f]: hover {
                                background-color:#f0f0f0;
                                transition: .2s
                            }
                        }

                        .add-account-button {
                            &[data-v-0717e65f] {
                                width: 100%;
                                padding: 20px 30px;
                                display: flex;
                                align-items: center;
                                gap: 10px
                            }

                            p[data-v-0717e65f] {
                                color: #11151b;
                                leading-trim: both;
                                text-edge: cap;
                                font-family: Plus Jakarta Sans;
                                font-size: 16px;
                                font-style: normal;
                                font-weight: 550;
                                line-height: normal
                            }

                            &[data-v-0717e65f]: hover {
                                background-color:#f0f0f0;
                                transition: .2s;
                                cursor: pointer
                            }
                        }
                    }
                }
            }
        }
    }
}

.bg-navbar {
    &[data-v-afc3036e] {
        width: 315px;
        height: 100%;
        min-height: 100vh;
        overflow: auto
    }

    header[data-v-afc3036e] {
        height: 78px;
        background-color: #fff;
        border-bottom: 1px solid #eee;
        padding: 0 20px;
        display: flex;
        align-items: center
    }

    nav {
        &[data-v-afc3036e] {
            width: 100%;
            height: 100vh;
            overflow-y: hidden;
            overflow-x: hidden;
            border-right: 1px solid #eee;
            padding: 30px;
            display: flex;
            flex-direction: column;
            gap: 30px;
            background-color: #fff;
            padding-bottom: 100px
        }

        &[data-v-afc3036e]: hover {
            overflow-y:auto
        }

        &[data-v-afc3036e]: :-webkit-scrollbar {
            width:4px
        }

        &[data-v-afc3036e]: :-webkit-scrollbar-thumb {
            background-color:#c1c1c1;
            border-radius: 10px
        }

        &[data-v-afc3036e]: :-webkit-scrollbar-track {
            background:#fff
        }

        .nav-section {
            &[data-v-afc3036e] {
                display: flex;
                flex-direction: column;
                gap: 25px
            }

            h2[data-v-afc3036e] {
                color: #86898b;
                leading-trim: both;
                text-edge: cap;
                font-family: Plus Jakarta Sans;
                font-size: 12px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                letter-spacing: 1.44px
            }

            .routes {
                &[data-v-afc3036e] {
                    display: flex;
                    flex-direction: column;
                    gap: 14px
                }

                .router-link {
                    &[data-v-afc3036e] {
                        text-decoration: none
                    }

                    .route {
                        &[data-v-afc3036e] {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            gap: 10px
                        }

                        .active-route[data-v-afc3036e] {
                            background-color: #d1dcff
                        }

                        figure[data-v-afc3036e] {
                            border-radius: 250px;
                            background: #f5f5f5;
                            width: 40px;
                            height: 40px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            transition: .2s
                        }

                        p[data-v-afc3036e] {
                            color: #2a2e33;
                            leading-trim: both;
                            text-edge: cap;
                            font-family: Plus Jakarta Sans;
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: normal
                        }

                        &:hover {
                            figure[data-v-afc3036e] {
                                background-color: #d1dcff;
                                transition: .2s
                            }
                        }
                    }
                }
            }
        }
    }
}

.slide-enter-active[data-v-cfe7d096],.slide-leave-active[data-v-cfe7d096] {
    transition: transform .2s ease-in-out
}

.slide-enter-from[data-v-cfe7d096],.slide-leave-to[data-v-cfe7d096] {
    transform: translateX(-100%)
}

.bg-navbar {
    &[data-v-cfe7d096] {
        width: 80px;
        max-width: 98%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        background-color: transparent
    }

    .bg-close-modal[data-v-cfe7d096] {
        width: 100%;
        height: 100%;
        min-height: 100vh;
        position: fixed;
        z-index: 10;
        background-color: #edeff4db
    }

    header {
        &[data-v-cfe7d096] {
            height: 78px;
            border-bottom: 1px solid #eee;
            padding: 0 20px;
            display: flex;
            align-items: center
        }

        figure {
            &[data-v-cfe7d096] {
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer
            }

            .icon[data-v-cfe7d096] {
                width: 24px;
                color: #2a2e33
            }
        }
    }

    nav {
        &[data-v-cfe7d096] {
            width: 100%;
            min-width: 315px;
            height: 100vh;
            overflow-y: auto;
            overflow-x: hidden;
            border-right: 1px solid #eee;
            padding: 30px;
            display: flex;
            flex-direction: column;
            gap: 30px;
            position: absolute;
            z-index: 11;
            background-color: #fff;
            top: 0;
            left: 0
        }

        .header-nav {
            &[data-v-cfe7d096] {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between
            }

            .logo[data-v-cfe7d096] {
                width: 100px
            }

            .close-bar-icon {
                &[data-v-cfe7d096] {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer
                }

                .icon[data-v-cfe7d096] {
                    width: 24px;
                    color: #2a2e33
                }
            }
        }

        .nav-section {
            &[data-v-cfe7d096] {
                display: flex;
                flex-direction: column;
                gap: 25px
            }

            h2[data-v-cfe7d096] {
                color: #86898b;
                leading-trim: both;
                text-edge: cap;
                font-family: Plus Jakarta Sans;
                font-size: 12px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                letter-spacing: 1.44px
            }

            .routes {
                &[data-v-cfe7d096] {
                    display: flex;
                    flex-direction: column;
                    gap: 14px
                }

                .router-link {
                    &[data-v-cfe7d096] {
                        text-decoration: none
                    }

                    .route {
                        &[data-v-cfe7d096] {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            gap: 10px
                        }

                        .active-route[data-v-cfe7d096] {
                            background-color: #d1dcff
                        }

                        figure[data-v-cfe7d096] {
                            border-radius: 250px;
                            background: #f5f5f5;
                            width: 40px;
                            height: 40px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            transition: .2s
                        }

                        p[data-v-cfe7d096] {
                            color: #2a2e33;
                            leading-trim: both;
                            text-edge: cap;
                            font-family: Plus Jakarta Sans;
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: normal
                        }

                        &:hover {
                            figure[data-v-cfe7d096] {
                                background-color: #d1dcff;
                                transition: .2s
                            }
                        }
                    }
                }
            }
        }
    }
}

.bg-dash {
    &[data-v-7656e67c] {
        width: 100%;
        overflow: hidden;
        height: 100vh;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        position: relative
    }

    .lateral-navbar {
        .mobile-navbar[data-v-7656e67c] {
            display: none
        }

        @media screen and (max-width: 1070px) {
            .desktop-navbar[data-v-7656e67c] {
                display:none
            }

            .mobile-navbar[data-v-7656e67c] {
                display: flex
            }
        }
    }

    main {
        &[data-v-7656e67c] {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #edeff4;
            height: 100vh;
            overflow-y: hidden;
            overflow-x: hidden
        }

        .dash-header-data {
            &[data-v-7656e67c] {
                display: flex;
                align-items: center;
                gap: 10px
            }

            h2[data-v-7656e67c] {
                color: #000;
                leading-trim: both;
                text-edge: cap;
                font-family: Plus Jakarta Sans;
                font-size: 18px;
                font-style: normal;
                font-weight: 650;
                line-height: normal
            }

            @media screen and (max-width: 550px) {
                &[data-v-7656e67c] {
                    display:none
                }
            }
        }

        .charges-breadcrumb {
            &[data-v-7656e67c] {
                display: flex;
                align-items: center;
                gap: 10px
            }

            p[data-v-7656e67c] {
                color: #86898b;
                font-family: Plus Jakarta Sans;
                font-size: 14px;
                font-style: normal;
                font-weight: 600;
                line-height: normal
            }

            .inactive[data-v-7656e67c] {
                cursor: pointer
            }

            .active {
                &[data-v-7656e67c] {
                    position: relative;
                    height: 100%
                }

                p[data-v-7656e67c] {
                    color: #2a2e33;
                    leading-trim: both;
                    text-edge: cap;
                    font-family: Plus Jakarta Sans;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: normal
                }

                .active-line[data-v-7656e67c] {
                    position: absolute;
                    bottom: -30px;
                    width: 100%;
                    height: 2px;
                    background: linear-gradient(90deg,#21b3dd,#852df6)
                }
            }

            @media screen and (max-width: 550px) {
                &[data-v-7656e67c] {
                    display:none
                }
            }
        }

        &[data-v-7656e67c]: :-webkit-scrollbar {
            width:4px
        }

        &[data-v-7656e67c]: :-webkit-scrollbar-thumb {
            background-color:#c1c1c1;
            border-radius: 10px
        }

        &[data-v-7656e67c]: :-webkit-scrollbar-track {
            background:#fff
        }

        .view {
            &[data-v-7656e67c] {
                padding: 30px 10px;
                width: 1500px;
                max-width: 100%;
                overflow-y: auto
            }

            .pending-account {
                &[data-v-7656e67c] {
                    gap: 10px;
                    border-radius: 250px;
                    border: 1px solid #eee;
                    background: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 20px;
                    overflow: hidden
                }

                .left {
                    &[data-v-7656e67c] {
                        display: flex;
                        align-items: center;
                        gap: 20px;
                        padding: 20px
                    }

                    .data {
                        &[data-v-7656e67c] {
                            display: flex;
                            flex-direction: column;
                            gap: 5px
                        }

                        h3[data-v-7656e67c] {
                            color: #2a2e33;
                            font-size: 16px;
                            font-weight: 600
                        }

                        h3[data-v-7656e67c],p[data-v-7656e67c] {
                            font-family: Plus Jakarta Sans;
                            font-style: normal;
                            line-height: normal
                        }

                        p[data-v-7656e67c] {
                            color: #86898b;
                            font-size: 14px;
                            font-weight: 550
                        }
                    }
                }

                .right[data-v-7656e67c] {
                    padding-right: 20px
                }

                @media screen and (max-width: 580px) {
                    .right[data-v-7656e67c] {
                        display:none
                    }

                    &[data-v-7656e67c] {
                        border-radius: 10px
                    }

                    .left {
                        &[data-v-7656e67c] {
                            width: 100%;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center
                        }

                        .data[data-v-7656e67c] {
                            width: 100%;
                            padding: 0;
                            text-align: center
                        }
                    }
                }
            }
        }
    }
}

.bg-large-button {
    &[data-v-3d489a16] {
        width: 100%
    }

    button[data-v-3d489a16] {
        display: flex;
        width: 100%;
        height: 46px;
        padding: 6px 23px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        border-radius: 250px;
        transition: .1s;
        font-family: Plus Jakarta Sans;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }
}

.primary {
    button[data-v-3d489a16] {
        background: var(--Color-Primary,#21b3dd);
        border: 3px solid var(--Color-Primary,#21b3dd);
        color: var(--base-white,#fff);
        cursor: pointer;
        transition: .1s;
        color: #f9f9f9
    }

    &:hover {
        button[data-v-3d489a16] {
            border: 3px solid #819fff;
            background: #21b3dd;
            transition: .1s
        }
    }
}

.secondary {
    button[data-v-3d489a16] {
        background: transparent;
        border: 1px solid #d9d9d9;
        color: #2a2e33;
        cursor: pointer;
        transition: .1s
    }

    &:hover {
        button[data-v-3d489a16] {
            background: #d9d9d9;
            transition: .1s
        }
    }
}

.disabled {
    button[data-v-3d489a16] {
        background: #86898b!important;
        border: 1px solid #86898b!important;
        color: var(--base-white,#fff);
        cursor: default;
        transition: .1s;
        color: #f9f9f9
    }
}

.bg-picker-date-component[data-v-205650ac] {
    position: relative;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.bg-select-dates[data-v-205650ac] {
    border-radius: 24px;
    border: 1px solid #eee;
    background: #fff;
    padding: 20px;
    margin-top: 10px;
    box-shadow: 0 0 12.4px 0 rgba(54,25,90,.1)
}

.current-month[data-v-205650ac] {
    font-size: 16px
}

.current-month[data-v-205650ac],.input-select[data-v-205650ac] {
    color: #2a2e33;
    font-family: Plus Jakarta Sans;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.input-select[data-v-205650ac] {
    min-width: 250px;
    border-radius: 250px;
    border: none;
    border: 1px solid #d9d9d9;
    background: #fff;
    padding: 12px 12px 12px 50px;
    align-self: stretch;
    cursor: pointer;
    position: relative;
    height: 46px;
    font-size: 12px;
    display: flex;
    align-items: center
}

.day-option {
    &[data-v-205650ac] {
        width: 40px;
        height: 40px;
        border-radius: 10px
    }

    &[data-v-205650ac]: hover {
        background-color:#21b3dd;
        color: #fff
    }
}

.active-option[data-v-205650ac] {
    background-color: #21b3dd;
    color: #fff
}

.mid-select-option[data-v-205650ac] {
    background-color: #d1dcff
}

.pagination {
    &[data-v-205650ac] {
        background-color: #21b3dd;
        color: #fff;
        border-radius: 4px;
        transition: .2s
    }

    &[data-v-205650ac]: hover {
        background-color:#063ffccd;
        transition: .2s
    }
}

.open-input[data-v-205650ac] {
    border: 1px solid #21b3dd
}

.bg-view {
    &[data-v-49e69834] {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 15px
    }

    .bg-header {
        &[data-v-49e69834] {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative
        }

        .divider[data-v-49e69834] {
            width: .5px;
            height: 45px;
            background: #d9d9d9;
            margin: 0 10px
        }

        .select-period[data-v-49e69834] {
            width: 250px
        }

        .picker-personalized-period[data-v-49e69834] {
            width: 300px;
            position: relative
        }

        @media screen and (max-width: 760px) {
            &[data-v-49e69834] {
                flex-direction:column
            }

            .new-charge-button[data-v-49e69834],.picker-personalized-period[data-v-49e69834],.select-period[data-v-49e69834] {
                width: 100%
            }

            .divider[data-v-49e69834] {
                display: none
            }
        }
    }

    .bg-billing-chart {
        &[data-v-49e69834] {
            border-radius: 12px;
            border: 1px solid #eee;
            background: #fff;
            padding: 22px;
            display: flex;
            flex-direction: column;
            gap: 20px
        }

        .graphic[data-v-49e69834] {
            min-height: 350px
        }

        header {
            &[data-v-49e69834] {
                display: flex;
                flex-direction: column;
                gap: 20px
            }

            .title-with-tooltip {
                &[data-v-49e69834] {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    position: relative
                }

                h2[data-v-49e69834] {
                    color: #000;
                    leading-trim: both;
                    text-edge: cap;
                    font-family: Plus Jakarta Sans;
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 650;
                    line-height: normal
                }

                .tooltip-container {
                    &[data-v-49e69834] {
                        position: relative;
                        display: inline-block
                    }

                    .tooltip-icon[data-v-49e69834] {
                        width: 16px;
                        height: 16px;
                        border-radius: 50%;
                        color: #2a2e33;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 8px;
                        font-weight: 700;
                        cursor: pointer;
                        transition: all .3s ease;
                        font-family: Plus Jakarta Sans;
                        border: 1px solid #2a2e33
                    }

                    .tooltip-content {
                        &[data-v-49e69834] {
                            position: absolute;
                            top: 100%;
                            left: 50%;
                            transform: translateX(-50%);
                            background: #2a2e33;
                            color: #fff;
                            padding: 12px 16px;
                            border-radius: 8px;
                            font-size: 12px;
                            font-family: Plus Jakarta Sans;
                            font-weight: 400;
                            line-height: 1.4;
                            white-space: nowrap;
                            opacity: 0;
                            visibility: hidden;
                            transition: all .3s ease;
                            z-index: 1000;
                            width: 250px;
                            white-space: normal;
                            box-shadow: 0 4px 12px #00000026
                        }

                        p[data-v-49e69834] {
                            margin: 0;
                            color: #fff
                        }
                    }

                    &:hover .tooltip-content[data-v-49e69834] {
                        opacity: 1;
                        visibility: visible;
                        top: calc(100% + 8px)
                    }
                }
            }

            .billing-data {
                &[data-v-49e69834] {
                    display: flex;
                    align-items: center;
                    gap: 10px
                }

                p[data-v-49e69834] {
                    color: #86898b;
                    font-size: 14px;
                    font-weight: 400
                }

                h3[data-v-49e69834],p[data-v-49e69834] {
                    leading-trim: both;
                    text-edge: cap;
                    font-family: Plus Jakarta Sans;
                    font-style: normal;
                    line-height: normal
                }

                h3[data-v-49e69834] {
                    color: #21b3dd;
                    font-size: 30px;
                    font-weight: 650
                }
            }
        }

        .billing-cards {
            &[data-v-49e69834] {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(5,1fr);
                gap: 10px
            }

            .card {
                &[data-v-49e69834] {
                    border-radius: 12px;
                    border: 1px solid #eee;
                    background: #fff;
                    padding: 13px 15px;
                    display: flex;
                    flex-direction: column;
                    gap: 15px
                }

                .title-with-tooltip {
                    &[data-v-49e69834] {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        position: relative
                    }

                    h2[data-v-49e69834] {
                        color: #86898b;
                        leading-trim: both;
                        text-edge: cap;
                        font-family: Plus Jakarta Sans;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: normal
                    }

                    .tooltip-container {
                        &[data-v-49e69834] {
                            position: relative;
                            display: inline-block
                        }

                        .tooltip-icon[data-v-49e69834] {
                            width: 12px;
                            height: 12px;
                            border-radius: 50%;
                            color: #2a2e33;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 6px;
                            font-weight: 700;
                            cursor: pointer;
                            transition: all .3s ease;
                            font-family: Plus Jakarta Sans;
                            border: 1px solid #4a4c4e
                        }

                        .tooltip-content {
                            &[data-v-49e69834] {
                                position: absolute;
                                top: 100%;
                                left: 50%;
                                transform: translateX(-50%);
                                background: #2a2e33;
                                color: #fff;
                                padding: 10px 14px;
                                border-radius: 8px;
                                font-size: 11px;
                                font-family: Plus Jakarta Sans;
                                font-weight: 400;
                                line-height: 1.4;
                                white-space: nowrap;
                                opacity: 0;
                                visibility: hidden;
                                transition: all .3s ease;
                                z-index: 1000;
                                width: 220px;
                                white-space: normal;
                                box-shadow: 0 4px 12px #00000026
                            }

                            p[data-v-49e69834] {
                                margin: 0;
                                color: #fff
                            }
                        }

                        &:hover .tooltip-content[data-v-49e69834] {
                            opacity: 1;
                            visibility: visible;
                            top: calc(100% + 8px)
                        }
                    }
                }

                h2[data-v-49e69834] {
                    color: #86898b;
                    leading-trim: both;
                    text-edge: cap;
                    font-family: Plus Jakarta Sans;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: normal
                }

                .data {
                    &[data-v-49e69834] {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        gap: 10px
                    }

                    p[data-v-49e69834] {
                        color: #000;
                        font-family: Plus Jakarta Sans;
                        font-size: 18px;
                        font-style: normal;
                        font-weight: 650;
                        line-height: normal
                    }
                }
            }

            @media screen and (max-width: 1070px) {
                &[data-v-49e69834] {
                    grid-template-columns:repeat(1,1fr)
                }
            }
        }
    }

    .bg-billing-data {
        &[data-v-49e69834] {
            display: grid;
            grid-template-columns: repeat(4,1fr);
            gap: 15px
        }

        .billing-data-card {
            &[data-v-49e69834] {
                width: 100%;
                border-radius: 12px;
                border: 1px solid #eee;
                background: #fff;
                position: relative
            }

            .percent-icon {
                &[data-v-49e69834] {
                    position: absolute;
                    top: 15px;
                    right: 15px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 250px;
                    border: 1px solid #d9d9d9;
                    background: #fff;
                    width: 46px;
                    height: 46px
                }

                p[data-v-49e69834] {
                    color: #2a2e33;
                    font-family: Plus Jakarta Sans;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: normal
                }
            }

            .top {
                &[data-v-49e69834] {
                    padding: 15px;
                    display: flex;
                    flex-direction: column;
                    gap: 25px
                }

                .title {
                    &[data-v-49e69834] {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        gap: 10px
                    }

                    h3[data-v-49e69834] {
                        color: #2a2e33;
                        font-family: Plus Jakarta Sans;
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: normal
                    }

                    .warning {
                        &[data-v-49e69834] {
                            width: 20px;
                            height: 20px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background-color: #ff9d3a;
                            border: 1px solid rgba(255,232,209,.45);
                            border-radius: 100%
                        }

                        p[data-v-49e69834] {
                            color: #000;
                            font-family: Plus Jakarta Sans;
                            font-size: 10px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: normal
                        }
                    }
                }

                h2[data-v-49e69834] {
                    color: #000;
                    font-family: Plus Jakarta Sans;
                    font-size: 20px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: normal;
                    margin-bottom: 5px
                }
            }

            .divider-line[data-v-49e69834] {
                width: 100%;
                height: .5px;
                background: #eee
            }

            .bottom {
                &[data-v-49e69834] {
                    padding: 15px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between
                }

                p[data-v-49e69834] {
                    color: #2a2e33;
                    font-family: Plus Jakarta Sans;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 140%
                }

                .percents[data-v-49e69834] {
                    font-weight: 700
                }
            }
        }

        @media screen and (max-width: 1070px) {
            &[data-v-49e69834] {
                grid-template-columns:repeat(1,1fr)
            }
        }
    }
}

.text[data-v-0f8bfd2f],.text[data-v-434a9ac8],.text[data-v-87efdee8] {
    color: #2a2e33;
    leading-trim: both;
    text-edge: cap;
    font-family: Plus Jakarta Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 550;
    line-height: normal;
    display: inline-block;
    max-width: 35ch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.tooltip {
    &[data-v-0698bad8] {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        padding: 5px 10px;
        border-radius: 250px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    p[data-v-0698bad8] {
        font-family: Plus Jakarta Sans;
        font-size: 10px;
        font-style: normal;
        font-weight: 550;
        line-height: normal
    }
}

.gray {
    &[data-v-0698bad8] {
        background-color: #d8d8d8;
        border: 1px solid gray
    }

    p[data-v-0698bad8] {
        color: #545454
    }
}

.orange {
    &[data-v-0698bad8] {
        border: 1px solid #ebaf80;
        background: rgba(255,157,58,.45)
    }

    p[data-v-0698bad8] {
        color: #a96d1e
    }
}

.red {
    &[data-v-0698bad8] {
        border: 1px solid #e94235;
        background: #ffbac9
    }

    p[data-v-0698bad8] {
        color: #e91442
    }
}

.green {
    &[data-v-0698bad8] {
        border: 1px solid #2fcd66;
        background: #d1ffe1
    }

    p[data-v-0698bad8] {
        color: #297a3e
    }
}

.blue {
    &[data-v-0698bad8] {
        border: 1px solid #2f81cd;
        background: #2f81cd67
    }

    p[data-v-0698bad8] {
        color: #1364af
    }
}

.copy[data-v-10a20cc3] {
    color: #2a2e33;
    font-family: Plus Jakarta Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 550;
    line-height: normal;
    cursor: pointer;
    display: inline-block;
    max-width: 35ch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.copy-link {
    &[data-v-10a20cc3] {
        color: #21b3dd;
        font-family: Plus Jakarta Sans;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: .2s
    }

    &[data-v-10a20cc3]: hover {
        color:#0e3fe0;
        transition: .2s
    }
}

.actions {
    &[data-v-0055f34c] {
        display: flex;
        flex-direction: column;
        gap: 10px
    }

    .action {
        &[data-v-0055f34c] {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer
        }

        p[data-v-0055f34c] {
            color: #2a2e33;
            font-family: Plus Jakarta Sans;
            font-size: 14px;
            font-style: normal;
            font-weight: 550;
            line-height: normal
        }
    }
}

.page-button {
    &[data-v-088d9470] {
        width: 35px;
        height: 35px;
        border-radius: 250px;
        border: 3px solid #b5c6f6;
        background: #21b3dd;
        transition: .2s
    }

    &[data-v-088d9470]: hover {
        transition:.2s
    }
}

.page-item[data-v-088d9470] {
    width: 35px;
    height: 35px;
    color: #2a2e33;
    leading-trim: both;
    text-edge: cap;
    font-family: Plus Jakarta Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.active-page[data-v-088d9470] {
    width: 35px;
    height: 35px;
    border-radius: 250px;
    background: #fff
}

.inactive-arrow[data-v-088d9470] {
    border: 3px solid #cbd5f8;
    background: #b2c3fb;
    cursor: auto
}

.bg-table-component {
    &[data-v-6eccea09] {
        display: flex;
        flex-direction: column;
        gap: 25px
    }

    .bg-table {
        &[data-v-6eccea09] {
            overflow: hidden!important;
            max-width: 77vw;
            min-width: 77vw;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none
        }

        .bg-data-table {
            &[data-v-6eccea09] {
                border: 1px solid hsla(240,7%,86%,.93);
                border-radius: 10px
            }

            .table {
                &[data-v-6eccea09] {
                    overflow-x: scroll
                }

                .header {
                    &[data-v-6eccea09] {
                        height: 64px
                    }

                    tr {
                        th[data-v-6eccea09] {
                            color: #86898b;
                            font-family: Plus Jakarta Sans;
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: normal;
                            text-align: left;
                            padding: 0 5px 0 20px
                        }
                    }
                }
            }

            .bg-zero-items {
                &[data-v-6eccea09] {
                    width: 100%;
                    background-color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    min-height: 450px
                }

                .zero-items {
                    &[data-v-6eccea09] {
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                        gap: 30px
                    }

                    .desc {
                        h2[data-v-6eccea09] {
                            color: #2a2e33;
                            font-size: 18px;
                            font-weight: 700
                        }

                        h2[data-v-6eccea09],p[data-v-6eccea09] {
                            text-align: center;
                            font-family: Plus Jakarta Sans;
                            font-style: normal;
                            line-height: 160%
                        }

                        p[data-v-6eccea09] {
                            color: #86898b;
                            font-size: 14px;
                            font-weight: 500;
                            max-width: 321px
                        }
                    }

                    .button-action[data-v-6eccea09] {
                        max-width: 321px
                    }
                }
            }
        }

        .first-table-line[data-v-6eccea09] {
            padding-left: 20px
        }

        .last-table-line[data-v-6eccea09] {
            padding-right: 25px
        }

        @media screen and (min-width: 1880px) {
            &[data-v-6eccea09] {
                max-width:calc(2vw + 1410px)!important;
                min-width: calc(2vw + 1410px)!important
            }
        }

        @media screen and (min-width: 1540px) and (max-width:1880px) {
            &[data-v-6eccea09] {
                max-width:calc(92vw - 231px)
            }
        }

        @media screen and (max-width: 1070px) {
            &[data-v-6eccea09] {
                max-width:97vw;
                min-width: 97vw
            }
        }

        @media screen and (max-width: 660px) {
            &[data-v-6eccea09] {
                max-width:94.5vw;
                min-width: 94.5vw
            }
        }
    }

    footer {
        &[data-v-6eccea09] {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            gap: 10px;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none
        }

        .total-items-mobile[data-v-6eccea09] {
            display: none
        }

        p {
            &[data-v-6eccea09] {
                color: #2a2e33;
                leading-trim: both;
                text-edge: cap;
                font-family: Plus Jakarta Sans;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: normal
            }

            span[data-v-6eccea09] {
                font-weight: 600
            }
        }

        @media screen and (max-width: 870px) {
            &[data-v-6eccea09] {
                flex-direction:column;
                align-items: center;
                gap: 30px
            }

            .total-desc {
                &[data-v-6eccea09] {
                    width: 100%;
                    padding: 0 5px;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between
                }

                .total-items-mobile[data-v-6eccea09] {
                    display: inline
                }
            }

            .total-items[data-v-6eccea09] {
                display: none
            }
        }
    }
}

.bg-modal-charge-details {
    &[data-v-28b4f982] {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 15;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .bg-close[data-v-28b4f982] {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 16;
        background: rgba(42,46,51,.83)
    }

    .bg-charge-details {
        &[data-v-28b4f982] {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-y: scroll
        }

        .charge-details {
            &[data-v-28b4f982] {
                width: 430px;
                max-width: 98%;
                border-radius: 24px;
                background: #fff;
                position: absolute;
                z-index: 17
            }

            .header-data {
                &[data-v-28b4f982] {
                    padding: 32px 30px;
                    display: flex;
                    flex-direction: column;
                    gap: 10px
                }

                h2[data-v-28b4f982] {
                    color: #2a2e33;
                    font-size: 20px;
                    font-weight: 700;
                    line-height: normal
                }

                h2[data-v-28b4f982],p[data-v-28b4f982] {
                    font-family: Plus Jakarta Sans;
                    font-style: normal
                }

                p[data-v-28b4f982] {
                    color: #86898b;
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 160%
                }
            }

            .data-double-columns {
                &[data-v-28b4f982] {
                    display: flex;
                    align-items: center;
                    gap: 50px;
                    padding: 32px 30px
                }

                .data {
                    &[data-v-28b4f982] {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 5px
                    }

                    h3[data-v-28b4f982] {
                        color: #070707;
                        font-weight: 600;
                        line-height: normal
                    }

                    h3[data-v-28b4f982],p[data-v-28b4f982] {
                        font-family: Plus Jakarta Sans;
                        font-size: 14px;
                        font-style: normal
                    }

                    p[data-v-28b4f982] {
                        color: #86898b;
                        font-weight: 500;
                        line-height: 160%;
                        max-width: 120px
                    }

                    .gray[data-v-28b4f982] {
                        color: #545454
                    }

                    .orange[data-v-28b4f982] {
                        color: #debf13
                    }

                    .red[data-v-28b4f982] {
                        color: #e91442
                    }

                    .green[data-v-28b4f982] {
                        color: #2fcd66
                    }

                    .blue[data-v-28b4f982] {
                        color: #1364af
                    }
                }
            }

            .data-border-double-columns {
                &[data-v-28b4f982] {
                    width: 100%;
                    padding: 0 30px
                }

                .datas {
                    &[data-v-28b4f982] {
                        display: flex;
                        border-radius: 8px;
                        border: 1px solid #eee
                    }

                    .data {
                        &[data-v-28b4f982] {
                            display: flex;
                            flex-direction: column;
                            gap: 5px
                        }

                        h3[data-v-28b4f982] {
                            color: #86898b;
                            font-size: 12px
                        }

                        h3[data-v-28b4f982],p[data-v-28b4f982] {
                            font-family: Plus Jakarta Sans;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 160%
                        }

                        p[data-v-28b4f982] {
                            color: #000;
                            font-size: 14px
                        }

                        &[data-v-28b4f982]: first-child,&[data-v-28b4f982]:last-child {
                            padding:15px 20px
                        }
                    }

                    .divider-columns[data-v-28b4f982] {
                        width: 1px;
                        height: 77px;
                        background: #eee;
                        margin-left: 50px
                    }
                }
            }

            .checkout-infos {
                &[data-v-28b4f982] {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 30px 32px 30px
                }

                p {
                    &[data-v-28b4f982] {
                        color: #21b3dd;
                        font-family: Plus Jakarta Sans;
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: normal;
                        cursor: pointer;
                        transition: .2s
                    }

                    &[data-v-28b4f982]: hover {
                        color:#0638dd;
                        transition: .2s
                    }
                }

                .link[data-v-28b4f982] {
                    text-decoration-line: underline;
                    text-decoration-style: solid;
                    -webkit-text-decoration-skip-ink: none;
                    text-decoration-skip-ink: none;
                    text-decoration-thickness: auto;
                    text-underline-offset: auto;
                    text-underline-position: from-font
                }

                .copy[data-v-28b4f982] {
                    display: flex;
                    align-items: center;
                    gap: 10px
                }
            }

            .divider[data-v-28b4f982] {
                width: 100%;
                height: .5px;
                background: #eee
            }

            .footer-data[data-v-28b4f982] {
                padding: 32px 30px
            }
        }

        @media screen and (max-height: 670px) {
            &[data-v-28b4f982] {
                align-items:flex-start;
                margin-top: 20px
            }
        }
    }
}

.bg-view {
    &[data-v-28b4f982] {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 40px
    }

    .banner {
        &[data-v-28b4f982] {
            width: 100%;
            height: 205px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: url(/img/bg-charges-banner-01.557c0984.png);
            background-position: 50%;
            background-size: cover;
            background-repeat: no-repeat;
            padding: 0 10px
        }

        h2[data-v-28b4f982] {
            color: #fff;
            text-align: center;
            font-family: Plus Jakarta Sans;
            font-size: 20px;
            font-style: normal;
            font-weight: 650;
            line-height: 160%
        }
    }

    .actions {
        &[data-v-28b4f982] {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: center;
            gap: 20px
        }

        .action {
            &[data-v-28b4f982] {
                width: 125px;
                align-items: center;
                justify-content: center;
                display: flex;
                flex-direction: column;
                gap: 10px;
                text-align: center;
                cursor: pointer
            }

            figure {
                &[data-v-28b4f982] {
                    width: 100%;
                    height: 80px;
                    border-radius: 24px;
                    border: 1px solid #eee;
                    background: #dfe3f1;
                    display: flex;
                    align-items: center;
                    justify-content: center
                }

                .icon[data-v-28b4f982] {
                    width: 40px;
                    height: 40px
                }
            }

            .add-charge-figure[data-v-28b4f982] {
                background-image: url(/img/bg-add-new-charge-01.7f91fae4.png);
                background-size: cover;
                background-position: 50%;
                background-repeat: no-repeat
            }

            h2[data-v-28b4f982] {
                color: #2a2e33;
                text-align: center;
                font-family: Plus Jakarta Sans;
                font-size: 14px;
                font-style: normal;
                font-weight: 550;
                line-height: normal;
                transition: .2s;
                padding: 0 20px
            }

            &:hover {
                h2[data-v-28b4f982] {
                    color: #21b3dd;
                    transition: .2s
                }
            }
        }

        @media screen and (max-width: 435px) {
            .action {
                &[data-v-28b4f982] {
                    width:33.33%
                }

                figure {
                    .icon[data-v-28b4f982] {
                        width: 30px;
                        height: 30px
                    }
                }

                h2[data-v-28b4f982] {
                    padding: 0 10px
                }
            }
        }
    }

    .bg-table {
        &[data-v-28b4f982] {
            width: 100%;
            overflow: hidden
        }

        .table {
            &[data-v-28b4f982] {
                width: auto
            }

            .header-filter-actions {
                &[data-v-28b4f982] {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    gap: 10px
                }

                .left-actions {
                    &[data-v-28b4f982] {
                        width: auto;
                        display: flex;
                        align-items: center;
                        gap: 5px
                    }

                    .filter-input {
                        &[data-v-28b4f982] {
                            width: 450px;
                            display: flex;
                            align-items: center;
                            gap: 5px
                        }

                        .minimal-button[data-v-28b4f982] {
                            width: 60px;
                            height: 45px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: 250px;
                            border: 1px solid #d9d9d9;
                            background: #fff;
                            cursor: pointer
                        }
                    }

                    .filter-dates[data-v-28b4f982] {
                        width: 300px;
                        max-width: 100%
                    }
                }

                @media screen and (max-width: 1450px) {
                    &[data-v-28b4f982] {
                        flex-direction:column;
                        width: 99%
                    }

                    .left-actions {
                        &[data-v-28b4f982] {
                            flex-direction: column;
                            width: 100%
                        }

                        .filter-dates[data-v-28b4f982],.filter-input[data-v-28b4f982] {
                            width: 100%
                        }
                    }

                    .right-actions[data-v-28b4f982] {
                        width: 100%
                    }
                }
            }
        }
    }
}

.bg-toogle[data-v-1f2b5190] {
    border: 2px solid #d1dcff;
    height: 28px
}

.button[data-v-1f2b5190] {
    background: #d1dcff
}

.bg-textarea {
    &[data-v-2959343e] {
        width: 100%
    }

    .bg-label {
        &[data-v-2959343e] {
            margin-bottom: 8px
        }

        .label {
            &[data-v-2959343e] {
                color: #2a2e33;
                font-weight: 550;
                margin-left: 15px
            }

            &[data-v-2959343e],span[data-v-2959343e] {
                font-family: Plus Jakarta Sans;
                font-size: 14px;
                font-style: normal;
                line-height: normal
            }

            span[data-v-2959343e] {
                color: #86898b;
                font-weight: 450
            }
        }

        .default-label[data-v-2959343e] {
            color: #2a2e33
        }

        .gray-label[data-v-2959343e] {
            color: #585858
        }
    }

    .textarea {
        &[data-v-2959343e] {
            width: 100%;
            border: none;
            height: 120px;
            padding: 12px 24px;
            border-radius: 24px;
            border: 1px solid #d9d9d9;
            background: #fff;
            color: #2a2e33;
            font-family: Plus Jakarta Sans;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            resize: none
        }

        &[data-v-2959343e]: focus {
            outline:0
        }
    }

    .default-textarea[data-v-2959343e]: focus {
        border:1px solid #21b3dd
    }

    .inputError[data-v-2959343e] {
        border: 1px solid #f64e60
    }

    .error-message[data-v-2959343e] {
        color: #f64e60;
        font-family: Plus Jakarta Sans;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-top: 5px;
        margin-left: 15px
    }

    .error-phrase[data-v-2959343e] {
        color: var(--Color-Danger,#f64e60);
        font-feature-settings: "salt" on,"liga" off;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        margin-top: 5px
    }
}

.bg-view {
    &[data-v-586610fa] {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px
    }

    .steps {
        &[data-v-586610fa] {
            display: flex;
            align-items: center;
            position: relative;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none
        }

        .step {
            &[data-v-586610fa] {
                flex-direction: column;
                gap: 10px;
                position: relative;
                z-index: 2
            }

            &[data-v-586610fa],p[data-v-586610fa] {
                display: flex;
                align-items: center;
                justify-content: center
            }

            p[data-v-586610fa] {
                width: 36px;
                height: 36px;
                border-radius: 18px;
                border: 1px solid rgba(200,206,227,.93);
                background: #dfe3f1;
                color: #2a2e33;
                font-size: 12px;
                font-weight: 700
            }

            h2[data-v-586610fa],p[data-v-586610fa] {
                font-family: Plus Jakarta Sans;
                font-style: normal;
                line-height: normal
            }

            h2[data-v-586610fa] {
                color: #86898b;
                text-align: center;
                leading-trim: both;
                text-edge: cap;
                font-size: 14px;
                font-weight: 500
            }
        }

        .active {
            p[data-v-586610fa] {
                background: #21b3dd;
                color: #fff
            }

            h2[data-v-586610fa] {
                color: #21b3dd
            }
        }

        .next {
            p[data-v-586610fa] {
                border-radius: 18px;
                border: 1px solid #21b3dd;
                background: #d1dcff;
                color: #21b3dd
            }
        }

        .divider[data-v-586610fa] {
            width: 130px;
            height: 1.5px;
            background: #c8cee3;
            margin-top: -30px;
            margin-left: -48px;
            margin-right: -46px;
            @media screen and (max-width: 463px) {
                margin-top:-45px
            }
        }
    }

    .bg-form-add-charge {
        &[data-v-586610fa] {
            width: 100%;
            max-width: 600px;
            border-radius: 24px;
            background: #fff;
            padding: 32px 42px
        }

        h2[data-v-586610fa] {
            color: #2a2e33;
            leading-trim: both;
            text-edge: cap;
            font-family: Plus Jakarta Sans;
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
            line-height: 160%
        }

        .form-data {
            &[data-v-586610fa] {
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin: 20px 0
            }

            span[data-v-586610fa] {
                color: #86898b;
                font-family: Plus Jakarta Sans;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
                padding-left: 15px;
                margin-bottom: 10px
            }
        }

        .payments-methods-list {
            &[data-v-586610fa] {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(2,1fr);
                gap: 20px;
                margin: 20px 0
            }

            .payment-methods {
                &[data-v-586610fa] {
                    position: relative;
                    width: 100%;
                    padding: 30px;
                    border-radius: 24px;
                    border: 1px solid #d9d9d9;
                    background: #fff;
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    cursor: pointer;
                    transition: .2s
                }

                .selected-option[data-v-586610fa] {
                    opacity: 0;
                    position: absolute;
                    right: 10px;
                    top: 10px
                }

                p[data-v-586610fa] {
                    color: #2a2e33;
                    leading-trim: both;
                    text-edge: cap;
                    font-family: Plus Jakarta Sans;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 160%
                }

                &[data-v-586610fa]: hover {
                    border:1px solid #21b3dd;
                    transition: .2s
                }
            }

            .active-payment-methods {
                &[data-v-586610fa] {
                    border: 1px solid #21b3dd
                }

                .selected-option[data-v-586610fa] {
                    opacity: 1
                }
            }

            @media screen and (max-width: 600px) {
                &[data-v-586610fa] {
                    grid-template-columns:1fr
                }
            }
        }

        .payments-type-list {
            &[data-v-586610fa] {
                width: 100%;
                margin: 20px 0;
                display: flex;
                align-items: center;
                gap: 15px
            }

            .payment-type {
                &[data-v-586610fa] {
                    width: 100%;
                    height: 46px;
                    padding: 0 6px;
                    border-radius: 250px;
                    border: 1px solid #d9d9d9;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    user-select: none
                }

                p[data-v-586610fa] {
                    color: #2a2e33;
                    font-family: Plus Jakarta Sans;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 550;
                    line-height: normal
                }
            }

            .active-payment-type {
                &[data-v-586610fa] {
                    background: #21b3dd;
                    border: 1px solid #21b3dd
                }

                p[data-v-586610fa] {
                    color: #fff
                }
            }

            @media screen and (max-width: 600px) {
                &[data-v-586610fa] {
                    flex-direction:column
                }
            }
        }

        .tax-to-customer {
            &[data-v-586610fa] {
                display: flex;
                gap: 10px;
                align-items: center;
                margin: 20px 0
            }

            p[data-v-586610fa] {
                color: #2a2e33;
                font-family: Plus Jakarta Sans;
                font-size: 14px;
                font-style: normal;
                font-weight: 550;
                line-height: normal
            }
        }

        .recurrence-datas[data-v-586610fa] {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 15px;
            @media screen and (max-width: 600px) {
                grid-template-columns:1fr
            }
        }

        .button-action[data-v-586610fa] {
            margin-top: 40px
        }
    }
}

.bg-modal-new-withdrawal {
    &[data-v-1ade007b] {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 15;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .bg-close[data-v-1ade007b] {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 16;
        background: rgba(42,46,51,.83)
    }

    .bg-new-withdrawal {
        &[data-v-1ade007b] {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .new-withdrawal {
            &[data-v-1ade007b] {
                overflow-y: scroll;
                max-height: 90vh;
                width: 430px;
                max-width: 98%;
                border-radius: 24px;
                background: #fff;
                position: absolute;
                z-index: 17
            }

            .header-data {
                &[data-v-1ade007b] {
                    padding: 32px 30px;
                    display: flex;
                    flex-direction: column;
                    gap: 10px
                }

                h2[data-v-1ade007b] {
                    color: #2a2e33;
                    font-size: 20px;
                    font-weight: 700;
                    line-height: normal
                }

                h2[data-v-1ade007b],p[data-v-1ade007b] {
                    font-family: Plus Jakarta Sans;
                    font-style: normal
                }

                p[data-v-1ade007b] {
                    color: #86898b;
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 160%
                }
            }

            .data {
                &[data-v-1ade007b] {
                    padding: 32px 30px;
                    display: flex;
                    flex-direction: column;
                    gap: 30px
                }

                .coin {
                    &[data-v-1ade007b] {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center
                    }

                    img[data-v-1ade007b] {
                        max-width: 100%;
                        padding: 32px 30px
                    }
                }

                .success-withdrawal-infos {
                    &[data-v-1ade007b] {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        gap: 10px
                    }

                    h2[data-v-1ade007b] {
                        color: #2a2e33;
                        font-size: 20px;
                        font-weight: 700;
                        line-height: normal;
                        margin-bottom: 10px
                    }

                    h2[data-v-1ade007b],p[data-v-1ade007b] {
                        font-family: Plus Jakarta Sans;
                        font-style: normal
                    }

                    p[data-v-1ade007b] {
                        color: #86898b;
                        text-align: center;
                        font-size: 12px;
                        font-weight: 550;
                        max-width: 230px
                    }
                }

                .data-container {
                    &[data-v-1ade007b] {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        gap: 15px
                    }

                    .title[data-v-1ade007b] {
                        color: #2a2e33;
                        font-family: Plus Jakarta Sans;
                        font-size: 18px;
                        font-style: normal;
                        font-weight: 700;
                        line-height: normal;
                        margin-bottom: 10px
                    }

                    .withdrawal-method-list {
                        &[data-v-1ade007b] {
                            width: 100%;
                            display: flex;
                            flex-direction: column;
                            gap: 10px
                        }

                        .withdrawal-method {
                            &[data-v-1ade007b] {
                                width: 100%;
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                border-radius: 12px;
                                border: 1px solid #d9d9d9;
                                padding: 14px 20px;
                                cursor: pointer
                            }

                            h3 {
                                &[data-v-1ade007b] {
                                    color: #2a2e33;
                                    leading-trim: both;
                                    text-edge: cap;
                                    font-family: Plus Jakarta Sans;
                                    font-size: 16px;
                                    font-style: normal;
                                    font-weight: 600;
                                    line-height: 160%;
                                    display: flex;
                                    align-items: center;
                                    gap: 5px
                                }

                                span[data-v-1ade007b] {
                                    font-size: 12px;
                                    color: #848997
                                }
                            }
                        }

                        .withdrawal-method-selected[data-v-1ade007b] {
                            border: 1px solid #21b3dd
                        }
                    }

                    .withdrawal-datas {
                        &[data-v-1ade007b] {
                            width: 100%
                        }

                        .withdrawal-data {
                            &[data-v-1ade007b] {
                                width: 100%;
                                display: flex;
                                flex-direction: column;
                                gap: 3px;
                                padding: 12px;
                                border: 1px solid hsla(240,7%,86%,.93)
                            }

                            h3[data-v-1ade007b] {
                                color: #2a2e33;
                                font-weight: 600
                            }

                            h3[data-v-1ade007b],p[data-v-1ade007b] {
                                font-family: Plus Jakarta Sans;
                                font-size: 14px;
                                font-style: normal;
                                line-height: normal
                            }

                            p[data-v-1ade007b] {
                                color: #86898b;
                                font-weight: 500
                            }

                            &[data-v-1ade007b]: first-child {
                                border-bottom:0;
                                border-radius: 12px 12px 0 0
                            }

                            &[data-v-1ade007b]: last-child {
                                border-top:0;
                                border-radius: 0 0 12px 12px
                            }
                        }

                        .gray[data-v-1ade007b] {
                            background: #edeff4
                        }
                    }
                }

                .not-amount-disponible-empty-state {
                    &[data-v-1ade007b] {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column
                    }

                    figure[data-v-1ade007b] {
                        max-width: 100%;
                        margin: 20px 0 30px 0
                    }

                    h2[data-v-1ade007b] {
                        color: #2a2e33;
                        font-size: 20px;
                        font-weight: 700;
                        line-height: 160%;
                        margin-bottom: 20px
                    }

                    h2[data-v-1ade007b],p[data-v-1ade007b] {
                        text-align: center;
                        font-family: Plus Jakarta Sans;
                        font-style: normal
                    }

                    p[data-v-1ade007b] {
                        color: #86898b;
                        font-size: 14px;
                        font-weight: 500;
                        margin-top: -10px
                    }
                }

                .bg-recipient-list {
                    h2[data-v-1ade007b] {
                        color: #2a2e33;
                        font-family: Plus Jakarta Sans;
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 550;
                        line-height: normal;
                        margin-bottom: 20px
                    }

                    .bg-recipient-list-empty {
                        &[data-v-1ade007b] {
                            width: 100%;
                            height: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-direction: column
                        }

                        figure[data-v-1ade007b] {
                            max-width: 100%;
                            margin: 30px 0
                        }

                        h2[data-v-1ade007b] {
                            color: #2a2e33;
                            font-size: 20px;
                            font-weight: 700;
                            line-height: 160%
                        }

                        h2[data-v-1ade007b],p[data-v-1ade007b] {
                            text-align: center;
                            font-family: Plus Jakarta Sans;
                            font-style: normal
                        }

                        p[data-v-1ade007b] {
                            color: #86898b;
                            font-size: 14px;
                            font-weight: 500;
                            margin-top: -10px
                        }
                    }

                    .recipient-list {
                        &[data-v-1ade007b] {
                            width: 100%;
                            display: flex;
                            flex-direction: column;
                            gap: 15px;
                            max-height: 250px;
                            overflow-y: scroll;
                            padding-right: 5px
                        }

                        .recipient {
                            &[data-v-1ade007b] {
                                border-radius: 24px;
                                border: 1px solid #eee;
                                background: #fff;
                                box-shadow: 0 0 12.4px 0 rgba(54,25,90,.045);
                                cursor: pointer;
                                transition: .2s;
                                -webkit-user-select: none;
                                -moz-user-select: none;
                                user-select: none
                            }

                            .header {
                                &[data-v-1ade007b] {
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    gap: 10px;
                                    padding: 20px
                                }

                                h3[data-v-1ade007b] {
                                    color: #2a2e33;
                                    font-family: Plus Jakarta Sans;
                                    font-size: 12px;
                                    font-style: normal;
                                    font-weight: 600;
                                    line-height: normal
                                }
                            }

                            .double-column {
                                &[data-v-1ade007b] {
                                    width: 100%;
                                    padding: 20px;
                                    display: flex;
                                    justify-content: space-between;
                                    gap: 10px
                                }

                                .column {
                                    &[data-v-1ade007b] {
                                        display: flex;
                                        flex-direction: column;
                                        gap: 5px
                                    }

                                    h3[data-v-1ade007b] {
                                        color: #86898b;
                                        font-weight: 550
                                    }

                                    h3[data-v-1ade007b],p[data-v-1ade007b] {
                                        font-family: Plus Jakarta Sans;
                                        font-size: 12px;
                                        font-style: normal;
                                        line-height: normal
                                    }

                                    p[data-v-1ade007b] {
                                        color: #2a2e33;
                                        font-weight: 600
                                    }
                                }
                            }

                            .divider[data-v-1ade007b] {
                                transition: .2s
                            }
                        }
                    }
                }
            }

            .divider[data-v-1ade007b] {
                width: 100%;
                height: .5px;
                background: #eee
            }

            .footer-data[data-v-1ade007b] {
                border-top: 1px solid #eee;
                padding: 32px 30px
            }
        }

        @media screen and (max-height: 670px) {
            &[data-v-1ade007b] {
                align-items:flex-start;
                margin-top: 20px
            }
        }
    }
}

.bg-view {
    &[data-v-1ade007b] {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px
    }

    .header {
        &[data-v-1ade007b] {
            width: 100%;
            display: flex;
            align-items: center;
            flex-direction: row;
            gap: 15px
        }

        .disponible-value {
            &[data-v-1ade007b] {
                width: 100%;
                max-width: 500px;
                height: 180px;
                padding: 25px;
                border-radius: 12px;
                background: #21b3dd;
                display: flex;
                align-items: flex-start;
                justify-content: center;
                flex-direction: column;
                gap: 25px
            }

            h3 {
                &[data-v-1ade007b] {
                    color: #fff;
                    leading-trim: both;
                    text-edge: cap;
                    font-family: Plus Jakarta Sans;
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 550;
                    line-height: normal
                }

                span[data-v-1ade007b] {
                    font-size: 10px;
                    color: gray
                }
            }

            .value {
                &[data-v-1ade007b] {
                    display: flex;
                    align-items: center;
                    gap: 10px
                }

                p[data-v-1ade007b] {
                    color: #d1dcff;
                    font-size: 14px;
                    font-weight: 500
                }

                h2[data-v-1ade007b],p[data-v-1ade007b] {
                    leading-trim: both;
                    text-edge: cap;
                    font-family: Plus Jakarta Sans;
                    font-style: normal;
                    line-height: normal
                }

                h2[data-v-1ade007b] {
                    color: #fff;
                    font-size: 32px;
                    font-weight: 650
                }
            }
        }

        .cards {
            &[data-v-1ade007b] {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 15px;
                height: 180px;
                padding: 15px;
                border-radius: 12px;
                background: #fff
            }

            .card {
                &[data-v-1ade007b] {
                    width: 100%;
                    border-radius: 12px;
                    border: 1px solid hsla(240,7%,86%,.93);
                    background: #edeff4;
                    height: 100%;
                    padding: 25px;
                    display: flex;
                    align-items: center
                }

                .card-data {
                    &[data-v-1ade007b] {
                        display: flex;
                        justify-content: center;
                        align-items: flex-start;
                        gap: 10px
                    }

                    figure[data-v-1ade007b] {
                        width: 40px;
                        height: 40px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: #dfe3f1;
                        border-radius: 100%
                    }

                    .data {
                        &[data-v-1ade007b] {
                            display: flex;
                            flex-direction: column;
                            gap: 5px;
                            align-items: flex-start
                        }

                        h2[data-v-1ade007b] {
                            color: #2a2e33;
                            font-size: 14px;
                            font-weight: 600;
                            line-height: normal
                        }

                        h2[data-v-1ade007b],p[data-v-1ade007b] {
                            font-family: Plus Jakarta Sans;
                            font-style: normal
                        }

                        p[data-v-1ade007b] {
                            color: #86898b;
                            font-size: 12px;
                            font-weight: 500;
                            line-height: 160%
                        }

                        button {
                            &[data-v-1ade007b] {
                                width: 105px;
                                border-radius: 250px;
                                background: #21b3dd;
                                padding: 6px 0;
                                margin-top: 5px;
                                transition: .1s;
                                border: 2px solid #21b3dd
                            }

                            p[data-v-1ade007b] {
                                color: #f9f9f9;
                                font-family: Plus Jakarta Sans;
                                font-size: 12px;
                                font-style: normal;
                                font-weight: 500;
                                line-height: normal
                            }

                            &[data-v-1ade007b]: hover {
                                border:2px solid #819fff;
                                background: #21b3dd;
                                transition: .1s
                            }
                        }
                    }
                }
            }

            @media screen and (max-width: 650px) {
                &[data-v-1ade007b] {
                    flex-direction:column;
                    height: auto
                }

                .card[data-v-1ade007b] {
                    justify-content: flex-start
                }
            }
        }

        @media screen and (max-width: 1420px) {
            &[data-v-1ade007b] {
                flex-direction:column
            }

            .disponible-value[data-v-1ade007b] {
                max-width: 100%
            }
        }
    }

    .bg-table {
        &[data-v-1ade007b] {
            width: 100%;
            overflow: hidden
        }

        .table {
            &[data-v-1ade007b] {
                width: auto
            }

            .header-filter-actions {
                &[data-v-1ade007b] {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    gap: 10px
                }

                .left-actions {
                    &[data-v-1ade007b] {
                        width: auto;
                        display: flex;
                        align-items: center;
                        gap: 5px
                    }

                    .filter-input {
                        &[data-v-1ade007b] {
                            width: 450px;
                            display: flex;
                            align-items: center;
                            gap: 5px
                        }

                        .minimal-button[data-v-1ade007b] {
                            width: 60px;
                            height: 45px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: 250px;
                            border: 1px solid #d9d9d9;
                            background: #fff;
                            cursor: pointer
                        }
                    }

                    .filter-dates[data-v-1ade007b] {
                        width: 300px;
                        max-width: 100%
                    }
                }

                @media screen and (max-width: 1450px) {
                    &[data-v-1ade007b] {
                        flex-direction:column;
                        width: 99%
                    }

                    .left-actions {
                        &[data-v-1ade007b] {
                            flex-direction: column;
                            width: 100%
                        }

                        .filter-dates[data-v-1ade007b],.filter-input[data-v-1ade007b] {
                            width: 100%
                        }
                    }

                    .right-actions[data-v-1ade007b] {
                        width: 100%
                    }
                }
            }
        }
    }
}

.bg-view {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    .form {
        width: 100%;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
        .warning {
            display: flex;
            align-items: center;
            padding: 15px;
            gap: 15px;
            border-radius: 12px;
            background: #e6e3dc;
            .icon {
                width: 24px;
                height: 24px;
                background: #ff9d3a;
                border: 1px solid rgba(255,232,209,.45);
                border-radius: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                p {
                    color: #000;
                    font-family: Plus Jakarta Sans;
                    font-size: 10px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: normal;
                    width: auto
                }
            }

            p {
                color: #4d4d0a;
                font-family: Plus Jakarta Sans;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 150%;
                width: 100%
            }
        }

        .checkbox {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            p {
                color: #2a2e33;
                leading-trim: both;
                text-edge: cap;
                font-family: Plus Jakarta Sans;
                font-size: 14px;
                font-style: normal;
                font-weight: 550;
                line-height: normal;
                -webkit-user-select: none;
                -moz-user-select: none;
                user-select: none;
                cursor: pointer
            }
        }

        .line {
            gap: 30px;
            @media screen and (max-width: 720px) {
                flex-direction:column
            }
        }

        .line,.small-line {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: flex-start
        }

        .small-line {
            gap: 10px;
            @media screen and (max-width: 720px) {
                flex-direction:column
            }
        }

        .actions {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px;
            .action-button {
                width: 250px;
                max-width: 100%
            }

            @media screen and (max-width: 590px) {
                flex-direction:column;
                width:100%;gap:20px;.action-button {
                    width: 100%
                }
            }
        }
    }
}

.bg-view {
    &[data-v-20429ce0] {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px
    }

    .integrations-banner {
        &[data-v-20429ce0] {
            width: 100%;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: url(/img/bg-integrations-banner-01.92a4b78d.png);
            background-size: cover;
            background-repeat: no-repeat;
            border-radius: 10px
        }

        h2[data-v-20429ce0] {
            color: #fff;
            text-align: center;
            font-family: Plus Jakarta Sans;
            font-size: 22px;
            font-style: normal;
            font-weight: 650;
            line-height: 160%
        }
    }

    .integration-data {
        &[data-v-20429ce0] {
            width: 100%;
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            gap: 10px
        }

        .documentation-link {
            &[data-v-20429ce0] {
                padding: 20px;
                border-radius: 12px;
                background: #f8fafb
            }

            p[data-v-20429ce0] {
                color: #86898b;
                font-weight: 450
            }

            p[data-v-20429ce0],span[data-v-20429ce0] {
                font-family: Plus Jakarta Sans;
                font-size: 14px;
                font-style: normal;
                line-height: 150%
            }

            span[data-v-20429ce0] {
                color: #21b3dd;
                font-weight: 600;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                user-select: none
            }
        }

        h3[data-v-20429ce0] {
            color: #2a2e33;
            font-family: Plus Jakarta Sans;
            font-size: 18px;
            font-style: normal;
            font-weight: 600;
            line-height: normal
        }

        .credentials {
            &[data-v-20429ce0] {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 20px
            }

            .credential {
                &[data-v-20429ce0] {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    margin-top: 10px
                }

                header {
                    &[data-v-20429ce0] {
                        display: flex;
                        align-items: center;
                        gap: 10px
                    }

                    h4[data-v-20429ce0] {
                        color: #2a2e33;
                        font-family: Plus Jakarta Sans;
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: normal
                    }
                }

                .credential-data {
                    &[data-v-20429ce0] {
                        width: 500px;
                        max-width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        border-radius: 250px;
                        border: 1px solid #d9d9d9;
                        background: #fff;
                        padding: 12px 14px;
                        gap: 10px
                    }

                    p[data-v-20429ce0] {
                        color: #86898b;
                        font-family: Plus Jakarta Sans;
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: normal
                    }
                }

                .icon[data-v-20429ce0] {
                    cursor: pointer
                }
            }

            @media screen and (max-width: 1360px) {
                &[data-v-20429ce0] {
                    flex-direction:column;
                    gap: 5px
                }

                .credential {
                    &[data-v-20429ce0],.credential-data[data-v-20429ce0] {
                        width: 100%
                    }
                }
            }

            @media screen and (max-width: 550px) {
                .credential {
                    .credential-data {
                        p[data-v-20429ce0] {
                            font-size:12px;
                            max-width: 28ch;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap
                        }
                    }
                }
            }
        }
    }
}

:root {
    --toastify-color-light: #fff;
    --toastify-color-dark: #121212;
    --toastify-color-info: #3498db;
    --toastify-color-success: #07bc0c;
    --toastify-color-warning: #f1c40f;
    --toastify-color-error: #e74c3c;
    --toastify-color-transparent: #ffffffb3;
    --toastify-icon-color-info: var(--toastify-color-info);
    --toastify-icon-color-success: var(--toastify-color-success);
    --toastify-icon-color-warning: var(--toastify-color-warning);
    --toastify-icon-color-error: var(--toastify-color-error);
    --toastify-toast-width: 320px;
    --toastify-toast-background: #fff;
    --toastify-toast-min-height: 64px;
    --toastify-toast-max-height: 800px;
    --toastify-font-family: sans-serif;
    --toastify-z-index: 9999;
    --toastify-text-color-light: #757575;
    --toastify-text-color-dark: #fff;
    --toastify-text-color-info: #fff;
    --toastify-text-color-success: #fff;
    --toastify-text-color-warning: #fff;
    --toastify-text-color-error: #fff;
    --toastify-spinner-color: #616161;
    --toastify-spinner-color-empty-area: #e0e0e0;
    --toastify-color-progress-light: linear-gradient(90deg,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55);
    --toastify-color-progress-dark: #bb86fc;
    --toastify-color-progress-info: var(--toastify-color-info);
    --toastify-color-progress-success: var(--toastify-color-success);
    --toastify-color-progress-warning: var(--toastify-color-warning);
    --toastify-color-progress-error: var(--toastify-color-error);
    --toastify-color-progress-colored: #ddd
}

.Toastify__toast-container {
    box-sizing: border-box;
    color: #fff;
    padding: 4px;
    position: fixed;
    transform: translate3d(0,0,var(--toastify-z-index) px);
    width: var(--toastify-toast-width);
    z-index: var(--toastify-z-index)
}

.Toastify__toast-container--top-left {
    left: 1em;
    top: 1em
}

.Toastify__toast-container--top-center {
    left: 50%;
    top: 1em;
    transform: translateX(-50%)
}

.Toastify__toast-container--top-right {
    right: 1em;
    top: 1em
}

.Toastify__toast-container--bottom-left {
    bottom: 1em;
    left: 1em
}

.Toastify__toast-container--bottom-center {
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%)
}

.Toastify__toast-container--bottom-right {
    bottom: 1em;
    right: 1em
}

@media only screen and (max-width: 480px) {
    .Toastify__toast-container {
        left:0;
        margin: 0;
        padding: 0;
        width: 100vw
    }

    .Toastify__toast-container--top-center,.Toastify__toast-container--top-left,.Toastify__toast-container--top-right {
        top: 0;
        transform: translateX(0)
    }

    .Toastify__toast-container--bottom-center,.Toastify__toast-container--bottom-left,.Toastify__toast-container--bottom-right {
        bottom: 0;
        transform: translateX(0)
    }

    .Toastify__toast-container--rtl {
        left: auto;
        right: 0
    }
}

.Toastify__toast {
    border-radius: 4px;
    box-shadow: 0 1px 10px 0 #0000001a,0 2px 15px 0 #0000000d;
    box-sizing: border-box;
    cursor: pointer;
    direction: ltr;
    display: flex;
    font-family: var(--toastify-font-family);
    justify-content: space-between;
    margin-bottom: 1rem;
    max-height: var(--toastify-toast-max-height);
    min-height: var(--toastify-toast-min-height);
    overflow: hidden;
    padding: 8px;
    position: relative;
    z-index: 0
}

.Toastify__toast--rtl {
    direction: rtl
}

.Toastify__toast-body {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    margin: auto 0;
    padding: 6px;
    white-space: pre-wrap
}

.Toastify__toast-body>div:last-child {
    flex: 1
}

.Toastify__toast-icon {
    display: flex;
    flex-shrink: 0;
    margin-inline-end:10px;width: 20px
}

.Toastify--animate {
    animation-duration: .7s;
    animation-fill-mode: both
}

.Toastify--animate-icon {
    animation-duration: .3s;
    animation-fill-mode: both
}

@media only screen and (max-width: 480px) {
    .Toastify__toast {
        border-radius:0;
        margin-bottom: 0
    }
}

.Toastify__toast-theme--dark {
    background: var(--toastify-color-dark);
    color: var(--toastify-text-color-dark)
}

.Toastify__toast-theme--colored.Toastify__toast--default,.Toastify__toast-theme--light {
    background: var(--toastify-color-light);
    color: var(--toastify-text-color-light)
}

.Toastify__toast-theme--colored.Toastify__toast--info {
    background: var(--toastify-color-info);
    color: var(--toastify-text-color-info)
}

.Toastify__toast-theme--colored.Toastify__toast--success {
    background: var(--toastify-color-success);
    color: var(--toastify-text-color-success)
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
    background: var(--toastify-color-warning);
    color: var(--toastify-text-color-warning)
}

.Toastify__toast-theme--colored.Toastify__toast--error {
    background: var(--toastify-color-error);
    color: var(--toastify-text-color-error)
}

.Toastify__progress-bar-theme--light {
    background: var(--toastify-color-progress-light)
}

.Toastify__progress-bar-theme--dark {
    background: var(--toastify-color-progress-dark)
}

.Toastify__progress-bar--info {
    background: var(--toastify-color-progress-info)
}

.Toastify__progress-bar--success {
    background: var(--toastify-color-progress-success)
}

.Toastify__progress-bar--warning {
    background: var(--toastify-color-progress-warning)
}

.Toastify__progress-bar--error {
    background: var(--toastify-color-progress-error)
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--default {
    background: var(--toastify-color-progress-colored)
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning {
    background: var(--toastify-color-transparent)
}

.Toastify__close-button {
    align-self: flex-start;
    background: #0000;
    border: none;
    color: #fff;
    cursor: pointer;
    opacity: .7;
    outline: none;
    padding: 0;
    transition: .3s ease
}

.Toastify__close-button--light {
    color: #000;
    opacity: .3
}

.Toastify__close-button>svg {
    fill: currentcolor;
    height: 16px;
    width: 14px
}

.Toastify__close-button:focus,.Toastify__close-button:hover {
    opacity: 1
}

@keyframes Toastify__trackProgress {
    0% {
        transform: scaleX(1)
    }

    to {
        transform: scaleX(0)
    }
}

.Toastify__progress-bar {
    bottom: 0;
    height: 5px;
    left: 0;
    opacity: .7;
    position: absolute;
    transform-origin: left;
    width: 100%;
    z-index: var(--toastify-z-index)
}

.Toastify__progress-bar--animated {
    animation: Toastify__trackProgress linear 1 forwards
}

.Toastify__progress-bar--controlled {
    transition: transform .2s
}

.Toastify__progress-bar--rtl {
    left: auto;
    right: 0;
    transform-origin: right
}

.Toastify__spinner {
    animation: Toastify__spin .65s linear infinite;
    border: 2px solid;
    border-color: var(--toastify-spinner-color-empty-area);
    border-radius: 100%;
    border-right-color: var(--toastify-spinner-color);
    box-sizing: border-box;
    height: 20px;
    width: 20px
}

@keyframes Toastify__bounceInRight {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(3000px,0,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px,0,0)
    }

    75% {
        transform: translate3d(10px,0,0)
    }

    90% {
        transform: translate3d(-5px,0,0)
    }

    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px,0,0)
    }

    to {
        opacity: 0;
        transform: translate3d(2000px,0,0)
    }
}

@keyframes Toastify__bounceInLeft {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px,0,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(25px,0,0)
    }

    75% {
        transform: translate3d(-10px,0,0)
    }

    90% {
        transform: translate3d(5px,0,0)
    }

    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px,0,0)
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px,0,0)
    }
}

@keyframes Toastify__bounceInUp {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0,3000px,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0,-20px,0)
    }

    75% {
        transform: translate3d(0,10px,0)
    }

    90% {
        transform: translate3d(0,-5px,0)
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__bounceOutUp {
    20% {
        transform: translate3d(0,-10px,0)
    }

    40%,45% {
        opacity: 1;
        transform: translate3d(0,20px,0)
    }

    to {
        opacity: 0;
        transform: translate3d(0,-2000px,0)
    }
}

@keyframes Toastify__bounceInDown {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0,-3000px,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0,25px,0)
    }

    75% {
        transform: translate3d(0,-10px,0)
    }

    90% {
        transform: translate3d(0,5px,0)
    }

    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutDown {
    20% {
        transform: translate3d(0,10px,0)
    }

    40%,45% {
        opacity: 1;
        transform: translate3d(0,-20px,0)
    }

    to {
        opacity: 0;
        transform: translate3d(0,2000px,0)
    }
}

.Toastify__bounce-enter--bottom-left,.Toastify__bounce-enter--top-left {
    animation-name: Toastify__bounceInLeft
}

.Toastify__bounce-enter--bottom-right,.Toastify__bounce-enter--top-right {
    animation-name: Toastify__bounceInRight
}

.Toastify__bounce-enter--top-center {
    animation-name: Toastify__bounceInDown
}

.Toastify__bounce-enter--bottom-center {
    animation-name: Toastify__bounceInUp
}

.Toastify__bounce-exit--bottom-left,.Toastify__bounce-exit--top-left {
    animation-name: Toastify__bounceOutLeft
}

.Toastify__bounce-exit--bottom-right,.Toastify__bounce-exit--top-right {
    animation-name: Toastify__bounceOutRight
}

.Toastify__bounce-exit--top-center {
    animation-name: Toastify__bounceOutUp
}

.Toastify__bounce-exit--bottom-center {
    animation-name: Toastify__bounceOutDown
}

@keyframes Toastify__none {
    0%,60%,75%,90%,to {
        animation-duration: 0;
        animation-timing-function: none
    }

    0% {
        opacity: 1;
        transform: translateZ(0)
    }

    to {
        transform: translateZ(0)
    }
}

.Toastify__none-enter--bottom-center,.Toastify__none-enter--bottom-left,.Toastify__none-enter--bottom-right,.Toastify__none-enter--top-center,.Toastify__none-enter--top-left,.Toastify__none-enter--top-right {
    animation-name: Toastify__none
}

@keyframes Toastify__zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}

@keyframes Toastify__zoomOut {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }

    to {
        opacity: 0
    }
}

.Toastify__zoom-enter {
    animation-name: Toastify__zoomIn
}

.Toastify__zoom-exit {
    animation-name: Toastify__zoomOut
}

@keyframes Toastify__flipIn {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: perspective(400px) rotateX(90deg)
    }

    40% {
        animation-timing-function: ease-in;
        transform: perspective(400px) rotateX(-20deg)
    }

    60% {
        opacity: 1;
        transform: perspective(400px) rotateX(10deg)
    }

    80% {
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        transform: perspective(400px)
    }
}

@keyframes Toastify__flipOut {
    0% {
        transform: perspective(400px)
    }

    30% {
        opacity: 1;
        transform: perspective(400px) rotateX(-20deg)
    }

    to {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg)
    }
}

.Toastify__flip-enter {
    animation-name: Toastify__flipIn
}

.Toastify__flip-exit {
    animation-name: Toastify__flipOut
}

@keyframes Toastify__slideInRight {
    0% {
        transform: translate3d(110%,0,0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInLeft {
    0% {
        transform: translate3d(-110%,0,0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInUp {
    0% {
        transform: translate3d(0,110%,0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInDown {
    0% {
        transform: translate3d(0,-110%,0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideOutRight {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(110%,0,0);
        visibility: hidden
    }
}

@keyframes Toastify__slideOutLeft {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(-110%,0,0);
        visibility: hidden
    }
}

@keyframes Toastify__slideOutDown {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(0,500px,0);
        visibility: hidden
    }
}

@keyframes Toastify__slideOutUp {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(0,-500px,0);
        visibility: hidden
    }
}

.Toastify__slide-enter--bottom-left,.Toastify__slide-enter--top-left {
    animation-name: Toastify__slideInLeft
}

.Toastify__slide-enter--bottom-right,.Toastify__slide-enter--top-right {
    animation-name: Toastify__slideInRight
}

.Toastify__slide-enter--top-center {
    animation-name: Toastify__slideInDown
}

.Toastify__slide-enter--bottom-center {
    animation-name: Toastify__slideInUp
}

.Toastify__slide-exit--bottom-left,.Toastify__slide-exit--top-left {
    animation-name: Toastify__slideOutLeft
}

.Toastify__slide-exit--bottom-right,.Toastify__slide-exit--top-right {
    animation-name: Toastify__slideOutRight
}

.Toastify__slide-exit--top-center {
    animation-name: Toastify__slideOutUp
}

.Toastify__slide-exit--bottom-center {
    animation-name: Toastify__slideOutDown
}

@keyframes Toastify__spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}