/*
 * TABLE OF CONTENTS.
 *
 * 1. GLOBAL WRAPPERS (html/body tag, scrolls, and general helper classes)
 * 2. TEXTS (classes to define pré-built text styles)
 * 3. COLORS (classes to define pre-built color styles)
 * 4. SHADOWS (classes to define box-shadows/elevations styles)
 * 5. INPUTS
 * 6. BUTTONS
*/


/* 1. GLOBAL WRAPPERS */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
    background: var(--neutral-100);
}

.flex-1 {
    flex: 1;
}

.row {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.border-radius-100 { border-radius: 100px }
.border-radius-50 { border-radius: 50px }
.border-radius-16 { border-radius: 1rem }
.border-radius-12 { border-radius: .75rem }
.border-radius-8 { border-radius: .5rem }
.border-radius-4 { border-radius: .25rem }

.p-2_5 { padding: .75rem !important }
.ps-2_5, .px-2_5 { padding-left: .75rem !important }
.pe-2_5, .px-2_5 { padding-right: .75rem !important }

.pt-2_5, .py-2_5 { padding-top: .75rem !important }
.pb-2_5, .py-2_5 { padding-bottom: .75rem !important }

.p-4_5 { padding: 2rem !important }
.ps-4_5, .px-4_5 { padding-left: 2rem !important }
.pe-4_5, .px-4_5 { padding-right: 2rem !important }

.pt-4_5, .py-4_5 { padding-top: 2rem !important }
.pb-4_5, .py-4_5 { padding-bottom: 2rem !important }

.m-2_5 { margin: .75rem !important }
.ms-2_5, .mx-2_5 { margin-left: .75rem !important }
.me-2_5, .mx-2_5 { margin-right: .75rem !important }

.mt-2_5, .my-2_5 { margin-top: .75rem !important }
.mb-2_5, .my-2_5 { margin-bottom: .75rem !important }

.m-4_5 { margin: 2rem !important }
.ms-4_5, .mx-4_5 { margin-left: 2rem !important }
.me-4_5, .mx-4_5 { margin-right: 2rem !important }

.mt-4_5, .my-4_5 { margin-top: 2rem !important }
.mb-4_5, .my-4_5 { margin-bottom: 2rem !important }

.object-fit-cover { object-fit: cover !important }

/* 2. TEXTS */
p,
b,
span,
strong,
font {
    font-size: var(--f-body-md-fs);
    font-weight: var(--f-body-md-fw);
    line-height: var(--f-body-md-lh);
    letter-spacing: var(--f-body-md-ls);
}

p,
b,
span,
strong,
font,
h1,
h2,
h3,
h4,
h5,
h6,
div,
input,
select {
    color: var(--default-font-color);
    font-family: var(--general-font-family);
}

b, strong {
    color: currentColor;
}

h1,
.f-headline-lg {
    font-size: var(--h1-fs);
    font-weight: var(--h1-fw);
    line-height: var(--h1-lh);
    letter-spacing: var(--h1-ls);
}

h2,
.f-headline-md {
    font-size: var(--h2-fs);
    font-weight: var(--h2-fw);
    line-height: var(--h2-lh);
    letter-spacing: var(--h2-ls);
}

h3,
.f-headline-sm {
    font-size: var(--h3-fs);
    font-weight: var(--h3-fw);
    line-height: var(--h3-lh);
    letter-spacing: var(--h3-ls);
}

h4,
.f-title-lg {
    font-size: var(--h4-fs);
    font-weight: var(--h4-fw);
    line-height: var(--h4-lh);
    letter-spacing: var(--h4-ls);
}

h5,
.f-title-md {
    font-size: var(--h5-fs);
    font-weight: var(--h5-fw);
    line-height: var(--h5-lh);
    letter-spacing: var(--h5-ls);
}

h6,
.f-title-sm {
    font-size: var(--h6-fs);
    font-weight: var(--h6-fw);
    line-height: var(--h6-lh);
    letter-spacing: var(--h6-ls);
}

.f-body-lg {
    font-size: var(--f-body-lg-fs);
    font-weight: var(--f-body-lg-fw);
    line-height: var(--f-body-lg-lh);
    letter-spacing: var(--f-body-lg-ls);
}

.f-body-md {
    font-size: var(--f-body-md-fs);
    font-weight: var(--f-body-md-fw);
    line-height: var(--f-body-md-lh);
    letter-spacing: var(--f-body-md-ls);
}

.f-body-sm {
    font-size: var(--f-body-sm-fs);
    font-weight: var(--f-body-sm-fw);
    line-height: var(--f-body-sm-lh);
    letter-spacing: var(--f-body-sm-ls);
}

.f-label-lg {
    font-size: var(--f-label-lg-fs);
    font-weight: var(--f-label-lg-fw);
    line-height: var(--f-label-lg-lh);
    letter-spacing: var(--f-label-lg-ls);
}

.f-label-md {
    font-size: var(--f-label-md-fs);
    font-weight: var(--f-label-md-fw);
    line-height: var(--f-label-md-lh);
    letter-spacing: var(--f-label-md-ls);
}

.f-label-sm {
    font-size: var(--f-label-sm-fs);
    font-weight: var(--f-label-sm-fw);
    line-height: var(--f-label-sm-lh);
    letter-spacing: var(--f-label-sm-ls);
}

.f-body-lg {
    font-size: var(--f-body-lg-fs);
    font-weight: var(--f-body-lg-fw);
    line-height: var(--f-body-lg-lh);
    letter-spacing: var(--f-body-lg-ls);
}

.f-body-md {
    font-size: var(--f-body-md-fs);
    font-weight: var(--f-body-md-fw);
    line-height: var(--f-body-md-lh);
    letter-spacing: var(--f-body-md-ls);
}

.f-body-sm {
    font-size: var(--f-body-sm-fs);
    font-weight: var(--f-body-sm-fw);
    line-height: var(--f-body-sm-lh);
    letter-spacing: var(--f-body-sm-ls);
}

.f-display-lg {
    font-size: var(--f-display-lg-fs);
    font-weight: var(--f-display-lg-fw);
    line-height: var(--f-display-lg-lh);
    letter-spacing: var(--f-display-lg-ls);
}

.f-display-md {
    font-size: var(--f-display-md-fs);
    font-weight: var(--f-display-md-fw);
    line-height: var(--f-display-md-lh);
    letter-spacing: var(--f-display-md-ls);
}

.f-display-sm {
    font-size: var(--f-display-sm-fs);
    font-weight: var(--f-display-sm-fw);
    line-height: var(--f-display-sm-lh);
    letter-spacing: var(--f-display-sm-ls);
}

.fw-700 { font-weight: 700 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-300 { font-weight: 300 !important; }
.fw-200 { font-weight: 200 !important; }

.text-decoration-none { text-decoration: none }

/* COLORS */
.bg-primary-10 { background-color: var(--primary-10) }
.bg-primary-20 { background-color: var(--primary-20) }
.bg-primary-30 { background-color: var(--primary-30) }
.bg-primary-40 { background-color: var(--primary-40) }
.bg-primary-50 { background-color: var(--primary-50) }
.bg-primary-60 { background-color: var(--primary-60) }
.bg-primary-70 { background-color: var(--primary-70) }
.bg-primary-80 { background-color: var(--primary-80) }
.bg-primary-90 { background-color: var(--primary-90) }
.bg-primary-95 { background-color: var(--primary-95) }
.bg-primary-99 { background-color: var(--primary-99) }
.bg-primary-op-12 { background-color: rgba(var(--primary-rgb), .12) }
.bg-primary-op-8 { background-color: rgba(var(--primary-rgb), .08) }

/* .bg-secondary-10 { background-color: var(--secondary-10) }
.bg-secondary-20 { background-color: var(--secondary-20) }
.bg-secondary-30 { background-color: var(--secondary-30) }
.bg-secondary-40 { background-color: var(--secondary-40) }
.bg-secondary-50 { background-color: var(--secondary-50) }
.bg-secondary-60 { background-color: var(--secondary-60) }
.bg-secondary-70 { background-color: var(--secondary-70) }
.bg-secondary-80 { background-color: var(--secondary-80) }
.bg-secondary-90 { background-color: var(--secondary-90) }
.bg-secondary-95 { background-color: var(--secondary-95) }
.bg-secondary-99 { background-color: var(--secondary-99) }

.bg-tertiary-10 { background-color: var(--tertiary-10) }
.bg-tertiary-20 { background-color: var(--tertiary-20) }
.bg-tertiary-30 { background-color: var(--tertiary-30) }
.bg-tertiary-40 { background-color: var(--tertiary-40) }
.bg-tertiary-50 { background-color: var(--tertiary-50) }
.bg-tertiary-60 { background-color: var(--tertiary-60) }
.bg-tertiary-70 { background-color: var(--tertiary-70) }
.bg-tertiary-80 { background-color: var(--tertiary-80) }
.bg-tertiary-90 { background-color: var(--tertiary-90) }
.bg-tertiary-95 { background-color: var(--tertiary-95) }
.bg-tertiary-99 { background-color: var(--tertiary-99) } */

.bg-neutral-0 { background-color: var(--neutral-0) }
.bg-neutral-10 { background-color: var(--neutral-10) }
.bg-neutral-20 { background-color: var(--neutral-20) }
.bg-neutral-30 { background-color: var(--neutral-30) }
.bg-neutral-40 { background-color: var(--neutral-40) }
.bg-neutral-50 { background-color: var(--neutral-50) }
.bg-neutral-60 { background-color: var(--neutral-60) }
.bg-neutral-70 { background-color: var(--neutral-70) }
.bg-neutral-80 { background-color: var(--neutral-80) }
.bg-neutral-90 { background-color: var(--neutral-90) }
.bg-neutral-95 { background-color: var(--neutral-95) }
.bg-neutral-99 { background-color: var(--neutral-99) }
.bg-neutral-100 { background-color: var(--neutral-100) }
.bg-neutral-op-12 { background-color: rgba(var(--neutral-rgb), .12) }
.bg-neutral-op-8 { background-color: rgba(var(--neutral-rgb), .08) }

.bg-error-10 { background-color: var(--error-10) }
.bg-error-20 { background-color: var(--error-20) }
.bg-error-30 { background-color: var(--error-30) }
.bg-error-40 { background-color: var(--error-40) }
.bg-error-50 { background-color: var(--error-50) }
.bg-error-60 { background-color: var(--error-60) }
.bg-error-70 { background-color: var(--error-70) }
.bg-error-80 { background-color: var(--error-80) }
.bg-error-90 { background-color: var(--error-90) }
.bg-error-95 { background-color: var(--error-95) }
.bg-error-99 { background-color: var(--error-99) }

.bg-alert-10 { background-color: var(--alert-10) }
.bg-alert-20 { background-color: var(--alert-20) }
.bg-alert-30 { background-color: var(--alert-30) }
.bg-alert-40 { background-color: var(--alert-40) }
.bg-alert-50 { background-color: var(--alert-50) }
.bg-alert-60 { background-color: var(--alert-60) }
.bg-alert-70 { background-color: var(--alert-70) }
.bg-alert-80 { background-color: var(--alert-80) }
.bg-alert-90 { background-color: var(--alert-90) }
.bg-alert-95 { background-color: var(--alert-95) }
.bg-alert-99 { background-color: var(--alert-99) }

.bg-success-10 { background-color: var(--success-10) }
.bg-success-20 { background-color: var(--success-20) }
.bg-success-30 { background-color: var(--success-30) }
.bg-success-40 { background-color: var(--success-40) }
.bg-success-50 { background-color: var(--success-50) }
.bg-success-60 { background-color: var(--success-60) }
.bg-success-70 { background-color: var(--success-70) }
.bg-success-80 { background-color: var(--success-80) }
.bg-success-90 { background-color: var(--success-90) }
.bg-success-95 { background-color: var(--success-95) }
.bg-success-99 { background-color: var(--success-99) }

.text-primary-10 { color: var(--primary-10) !important }
.text-primary-20 { color: var(--primary-20) !important }
.text-primary-30 { color: var(--primary-30) !important }
.text-primary-40 { color: var(--primary-40) !important }
.text-primary-50 { color: var(--primary-50) !important }
.text-primary-60 { color: var(--primary-60) !important }
.text-primary-70 { color: var(--primary-70) !important }
.text-primary-80 { color: var(--primary-80) !important }
.text-primary-90 { color: var(--primary-90) !important }
.text-primary-95 { color: var(--primary-95) !important }
.text-primary-99 { color: var(--primary-99) !important }

/* .text-secondary-10 { color: var(--secondary-10) !important }
.text-secondary-20 { color: var(--secondary-20) !important }
.text-secondary-30 { color: var(--secondary-30) !important }
.text-secondary-40 { color: var(--secondary-40) !important }
.text-secondary-50 { color: var(--secondary-50) !important }
.text-secondary-60 { color: var(--secondary-60) !important }
.text-secondary-70 { color: var(--secondary-70) !important }
.text-secondary-80 { color: var(--secondary-80) !important }
.text-secondary-90 { color: var(--secondary-90) !important }
.text-secondary-95 { color: var(--secondary-95) !important }
.text-secondary-99 { color: var(--secondary-99) !important }

.text-tertiary-10 { color: var(--tertiary-10) !important }
.text-tertiary-20 { color: var(--tertiary-20) !important }
.text-tertiary-30 { color: var(--tertiary-30) !important }
.text-tertiary-40 { color: var(--tertiary-40) !important }
.text-tertiary-50 { color: var(--tertiary-50) !important }
.text-tertiary-60 { color: var(--tertiary-60) !important }
.text-tertiary-70 { color: var(--tertiary-70) !important }
.text-tertiary-80 { color: var(--tertiary-80) !important }
.text-tertiary-90 { color: var(--tertiary-90) !important }
.text-tertiary-95 { color: var(--tertiary-95) !important }
.text-tertiary-99 { color: var(--tertiary-99) !important } */

.text-neutral-0 { color: var(--neutral-0) !important }
.text-neutral-10 { color: var(--neutral-10) !important }
.text-neutral-20 { color: var(--neutral-20) !important }
.text-neutral-30 { color: var(--neutral-30) !important }
.text-neutral-40 { color: var(--neutral-40) !important }
.text-neutral-50 { color: var(--neutral-50) !important }
.text-neutral-60 { color: var(--neutral-60) !important }
.text-neutral-70 { color: var(--neutral-70) !important }
.text-neutral-80 { color: var(--neutral-80) !important }
.text-neutral-90 { color: var(--neutral-90) !important }
.text-neutral-95 { color: var(--neutral-95) !important }
.text-neutral-99 { color: var(--neutral-99) !important }
.text-neutral-100 { color: var(--neutral-100) !important }

.text-error-10 { color: var(--error-10) !important }
.text-error-20 { color: var(--error-20) !important }
.text-error-30 { color: var(--error-30) !important }
.text-error-40 { color: var(--error-40) !important }
.text-error-50 { color: var(--error-50) !important }
.text-error-60 { color: var(--error-60) !important }
.text-error-70 { color: var(--error-70) !important }
.text-error-80 { color: var(--error-80) !important }
.text-error-90 { color: var(--error-90) !important }
.text-error-95 { color: var(--error-95) !important }
.text-error-99 { color: var(--error-99) !important }

.text-alert-10 { color: var(--alert-10) !important }
.text-alert-20 { color: var(--alert-20) !important }
.text-alert-30 { color: var(--alert-30) !important }
.text-alert-40 { color: var(--alert-40) !important }
.text-alert-50 { color: var(--alert-50) !important }
.text-alert-60 { color: var(--alert-60) !important }
.text-alert-70 { color: var(--alert-70) !important }
.text-alert-80 { color: var(--alert-80) !important }
.text-alert-90 { color: var(--alert-90) !important }
.text-alert-95 { color: var(--alert-95) !important }
.text-alert-99 { color: var(--alert-99) !important }

.text-success-10 { color: var(--success-10) !important }
.text-success-20 { color: var(--success-20) !important }
.text-success-30 { color: var(--success-30) !important }
.text-success-40 { color: var(--success-40) !important }
.text-success-50 { color: var(--success-50) !important }
.text-success-60 { color: var(--success-60) !important }
.text-success-70 { color: var(--success-70) !important }
.text-success-80 { color: var(--success-80) !important }
.text-success-90 { color: var(--success-90) !important }
.text-success-95 { color: var(--success-95) !important }
.text-success-99 { color: var(--success-99) !important }

.border-primary-10 { border-color: var(--primary-10) !important }
.border-primary-20 { border-color: var(--primary-20) !important }
.border-primary-30 { border-color: var(--primary-30) !important }
.border-primary-40 { border-color: var(--primary-40) !important }
.border-primary-50 { border-color: var(--primary-50) !important }
.border-primary-60 { border-color: var(--primary-60) !important }
.border-primary-70 { border-color: var(--primary-70) !important }
.border-primary-80 { border-color: var(--primary-80) !important }
.border-primary-90 { border-color: var(--primary-90) !important }
.border-primary-95 { border-color: var(--primary-95) !important }
.border-primary-99 { border-color: var(--primary-99) !important }

/* .border-secondary-10 { border-color: var(--secondary-10) !important }
.border-secondary-20 { border-color: var(--secondary-20) !important }
.border-secondary-30 { border-color: var(--secondary-30) !important }
.border-secondary-40 { border-color: var(--secondary-40) !important }
.border-secondary-50 { border-color: var(--secondary-50) !important }
.border-secondary-60 { border-color: var(--secondary-60) !important }
.border-secondary-70 { border-color: var(--secondary-70) !important }
.border-secondary-80 { border-color: var(--secondary-80) !important }
.border-secondary-90 { border-color: var(--secondary-90) !important }
.border-secondary-95 { border-color: var(--secondary-95) !important }
.border-secondary-99 { border-color: var(--secondary-99) !important }

.border-tertiary-10 { border-color: var(--tertiary-10) !important }
.border-tertiary-20 { border-color: var(--tertiary-20) !important }
.border-tertiary-30 { border-color: var(--tertiary-30) !important }
.border-tertiary-40 { border-color: var(--tertiary-40) !important }
.border-tertiary-50 { border-color: var(--tertiary-50) !important }
.border-tertiary-60 { border-color: var(--tertiary-60) !important }
.border-tertiary-70 { border-color: var(--tertiary-70) !important }
.border-tertiary-80 { border-color: var(--tertiary-80) !important }
.border-tertiary-90 { border-color: var(--tertiary-90) !important }
.border-tertiary-95 { border-color: var(--tertiary-95) !important }
.border-tertiary-99 { border-color: var(--tertiary-99) !important } */

.border-neutral-0 { border-color: var(--neutral-0) !important }
.border-neutral-10 { border-color: var(--neutral-10) !important }
.border-neutral-20 { border-color: var(--neutral-20) !important }
.border-neutral-30 { border-color: var(--neutral-30) !important }
.border-neutral-40 { border-color: var(--neutral-40) !important }
.border-neutral-50 { border-color: var(--neutral-50) !important }
.border-neutral-60 { border-color: var(--neutral-60) !important }
.border-neutral-70 { border-color: var(--neutral-70) !important }
.border-neutral-80 { border-color: var(--neutral-80) !important }
.border-neutral-90 { border-color: var(--neutral-90) !important }
.border-neutral-95 { border-color: var(--neutral-95) !important }
.border-neutral-99 { border-color: var(--neutral-99) !important }
.border-neutral-100 { border-color: var(--neutral-100) !important }

.border-error-10 { border-color: var(--error-10) !important }
.border-error-20 { border-color: var(--error-20) !important }
.border-error-30 { border-color: var(--error-30) !important }
.border-error-40 { border-color: var(--error-40) !important }
.border-error-50 { border-color: var(--error-50) !important }
.border-error-60 { border-color: var(--error-60) !important }
.border-error-70 { border-color: var(--error-70) !important }
.border-error-80 { border-color: var(--error-80) !important }
.border-error-90 { border-color: var(--error-90) !important }
.border-error-95 { border-color: var(--error-95) !important }
.border-error-99 { border-color: var(--error-99) !important }

.border-alert-10 { border-color: var(--alert-10) !important }
.border-alert-20 { border-color: var(--alert-20) !important }
.border-alert-30 { border-color: var(--alert-30) !important }
.border-alert-40 { border-color: var(--alert-40) !important }
.border-alert-50 { border-color: var(--alert-50) !important }
.border-alert-60 { border-color: var(--alert-60) !important }
.border-alert-70 { border-color: var(--alert-70) !important }
.border-alert-80 { border-color: var(--alert-80) !important }
.border-alert-90 { border-color: var(--alert-90) !important }
.border-alert-95 { border-color: var(--alert-95) !important }
.border-alert-99 { border-color: var(--alert-99) !important }

.border-success-10 { border-color: var(--success-10) !important }
.border-success-20 { border-color: var(--success-20) !important }
.border-success-30 { border-color: var(--success-30) !important }
.border-success-40 { border-color: var(--success-40) !important }
.border-success-50 { border-color: var(--success-50) !important }
.border-success-60 { border-color: var(--success-60) !important }
.border-success-70 { border-color: var(--success-70) !important }
.border-success-80 { border-color: var(--success-80) !important }
.border-success-90 { border-color: var(--success-90) !important }
.border-success-95 { border-color: var(--success-95) !important }
.border-success-99 { border-color: var(--success-99) !important }

/* 4. SHADOWS */
.elevation-1 {
    box-shadow: var(--elevation-1);
}

.elevation-2 {
    box-shadow: var(--elevation-2);
}

.elevation-3 {
    box-shadow: var(--elevation-3);
}

.elevation-4 {
    box-shadow: var(--elevation-4);
}

.elevation-5 {
    box-shadow: var(--elevation-5);
}

/* INPUTS */
.form-field {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.form-field label {
    margin-bottom: .375rem;
    padding-left: .5rem;
    font-size: .875rem;
    font-weight: 400;
    color: var(--neutral-40);
}

.form-field input,
.form-field select {
    height: 44px;
    padding: .5rem 1rem;
    border-radius: 100px;
    border-color: var(--neutral-70);
    font-size: .875rem;
    color: var(--neutral-40);
    transition: .15s ease-in-out;
}

.form-field input::placeholder {
    color: var(--neutral-70);
    opacity: 1;
}

.form-field input::-webkit-input-placeholder {
    color: var(--neutral-70);
    font-family: var(--general-font-family);
}

.form-field input::-moz-placeholder {
    color: var(--neutral-70);
    font-family: var(--general-font-family);
}

.form-field input:-ms-input-placeholder {
    color: var(--neutral-70);
    font-family: var(--general-font-family);
}

.form-field input::-ms-input-placeholder {
    color: var(--neutral-70);
    font-family: var(--general-font-family);
}

.form-field input:hover,
.form-field select:hover {
    border-color: var(--neutral-50);
}

.form-field input:focus,
.form-field input:focus-visible,
.form-field input:active,
.form-field select:focus,
.form-field select:focus-visible,
.form-field select:active {
    border-color: var(--primary-40) !important;
}

.form-field .error {
    font-size: .75rem;
    padding-left: .75rem;
    font-weight: 400;
    color: var(--error-40);
}

.form-field:has(.error) input,
.form-field:has(.error) select {
    border-color: var(--error-40);
}

.form-field:has(.error) input:focus,
.form-field:has(.error) input:focus-visible,
.form-field:has(.error) input:active,
.form-field:has(.error) select:focus,
.form-field:has(.error) select:focus-visible,
.form-field:has(.error) select:active {
    border-color: var(--error-40) !important;
    box-shadow: 0 0 0 .25rem rgba(219, 8, 0, .25);
}

.form-field input:disabled {
    border-color: var(--neutral-70) !important;
    background: var(--neutral-90) !important;
    opacity: .75;
}

.form-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23b8b8b8' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center right 16px;
    background-size: 16px;
}

.form-check {
    margin-bottom: 0;
}

.form-check-input {
    height: 1.125rem;
    width: 1.125rem;
    margin-top: 3px;
    border-radius: .75rem;
}

.form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-color: var(--primary-60);
}

/* BUTTONS */
.btn {
    height: 40px;
    padding: 0 1.25rem;
    border-radius: 100px;
    font-weight: 700;
    font-size: .875rem;
    transition: .15s ease-in-out;
    border: 0;
}

.btn-lg {
    height: 48px;
    padding: 0 1.5rem;
    font-size: 1rem;
}

.btn-circle {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 100%;
}

.btn-primary {
    background: linear-gradient(180deg, var(--primary-40), var(--primary-60)) !important;
    color: var(--neutral-100) !important;
}

.btn-primary:hover {
    background: linear-gradient(180deg, var(--primary-40), var(--primary-40)) !important;
}

.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active {
    background: linear-gradient(180deg, var(--primary-60), var(--primary-60)) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background: var(--neutral-80) !important;
    color: var(--neutral-100);
    opacity: 1 !important;
}

.btn-outline-primary {
    border: 2px solid var(--primary-40);
    color: var(--primary-40);
}

.btn-outline-primary:hover {
    border-color: var(--primary-40);
    background: var(--primary-40);
    color: var(--neutral-100);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    border: var(--neutral-80);
    background: var(--neutral-80) !important;
    color: var(--neutral-100);
    opacity: 1 !important;
}

.btn-danger {
    background: var(--error-40) !important;
}

.btn-danger:hover {
    background: var(--error-30) !important;
}

.btn-danger:focus,
.btn-danger:focus-visible,
.btn-danger:active {
    background: var(--error-20) !important;
}

.btn-danger:disabled,
.btn-danger.disabled {
    background: var(--neutral-80) !important;
    color: var(--neutral-100);
    opacity: 1 !important;
}

.btn-outline-danger {
    border: 2px solid var(--error-50) !important;
    color: var(--error-50);
}

.btn-outline-danger:hover {
    border-color: var(--error-40) !important;
    background: var(--error-40) !important;
    color: var(--error-99);
}

.btn-outline-danger:focus,
.btn-outline-danger:focus-visible,
.btn-outline-danger:active {
    border-color: var(--error-30) !important;
    background: var(--error-30) !important;
    color: var(--error-99);
}

.btn-outline-danger:disabled,
.btn-outline-danger.disabled {
    background: var(--neutral-80) !important;
    color: var(--neutral-100);
    opacity: 1 !important;
}