/* Margin */

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.m-0 {
    margin: 0!important;
}
.m-xs {
    margin: 0.125rem;
}
.m-1 {
    margin: 0.25rem;
}
.m-2 {
    margin: 0.5rem;
}
.m-3 {
    margin: 1rem;
}
.m-4 {
    margin: 1rem;
}
.m-5 {
    margin: 1.5rem;
}
.m-6 {
    margin: 3rem;
}

.mt-0 {
    margin-top: 0;
}
.mt-1 {
    margin-top: 0.25rem;
}
.mt-2 {
    margin-top: 0.5rem;
}
.mt-3 {
    margin-top: 0.75rem;
}
.mt-4 {
    margin-top: 1rem;
}
.mt-5 {
    margin-top: 1.5rem;
}
.mt-6 {
    margin-top: 3rem;
}

.mb-0 {
    margin-bottom: 0;
}
.mb-1 {
    margin-bottom: 0.25rem;
}
.mb-2 {
    margin-bottom: 0.5rem;
}
.mb-3 {
    margin-bottom: 0.75rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.mb-5 {
    margin-bottom: 1.5rem;
}
.mb-6 {
    margin-bottom: 3rem;
}

.ms-0 {
    margin-left: 0;
}
.ms-1 {
    margin-left: 0.25rem;
}
.ms-2 {
    margin-left: 0.5rem;
}
.ms-3 {
    margin-left: 0.75rem;
}
.ms-4 {
    margin-left: 1rem;
}
.ms-5 {
    margin-left: 1.5rem;
}
.ms-6 {
    margin-left: 3rem;
}

.me-0 {
    margin-right: 0;
}
.me-1 {
    margin-right: 0.25rem;
}
.me-2 {
    margin-right: 0.5rem;
}
.me-3 {
    margin-right: 0.75rem;
}
.me-4 {
    margin-right: 1rem;
}
.me-5 {
    margin-right: 1.5rem;
}
.me-6 {
    margin-right: 3rem;
}

.mx-0 {
    margin-right: 0;
    margin-left: 0;
}
.mx-1 {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
}
.mx-2 {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}
.mx-3 {
    margin-right: 0.75rem;
    margin-left: 0.75rem;
}
.mx-4 {
    margin-right: 1rem;
    margin-left: 1rem;
}
.mx-5 {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
}
.mx-6 {
    margin-right: 3rem;
    margin-left: 3rem;
}

.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}
.my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}
.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.my-5 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.my-6 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.mt-lg-4 {
    margin-top: 1rem;
}
.mt-lg-5 {
    margin-top: 1.5rem;
}
.me-lg-5 {
    margin-right: 1.5rem;
}
.mt-lg-2 {
    margin-top: 0.5rem;
}
.mt-lg-3 {
    margin-top: 0.75rem;
}
.mb-lg-2 {
    margin-bottom: 0.5rem;
}

/* Padding */

.pt-container {
    padding-top: var(--p-container);
}
.pt-header {
    padding-top: var(--header-height);
}
.pt-container {
    padding-top: var(--p-container)
}
.p-0 {
    padding: 0!important;
}
.p-xs {
    padding: 0.125rem;
}
.p-1 {
    padding: 0.25rem;
}
.p-2 {
    padding: 0.5rem;
}
.p-3 {
    padding: 0.75rem;
}
.p-4 {
    padding: 1rem;
}
.p-5 {
    padding: 1.5rem;
}
.p-6 {
    padding: 3rem;
}

.pt-0 {
    padding-top: 0;
}
.pt-1 {
    padding-top: 0.25rem;
}
.pt-2 {
    padding-top: 0.5rem;
}
.pt-3 {
    padding-top: 0.75rem;
}
.pt-4 {
    padding-top: 1rem;
}
.pt-5 {
    padding-top: 1.5rem;
}
.pt-6 {
    padding-top: 3rem;
}

.pb-0 {
    padding-bottom: 0;
}
.pb-1 {
    padding-bottom: 0.25rem;
}
.pb-2 {
    padding-bottom: 0.5rem;
}
.pb-3 {
    padding-bottom: 0.75rem;
}
.pb-4 {
    padding-bottom: 1rem;
}
.pb-5 {
    padding-bottom: 1.5rem;
}
.pb-6 {
    padding-bottom: 3rem;
}

.ps-0 {
    padding-left: 0;
}
.ps-1 {
    padding-left: 0.25rem;
}
.ps-2 {
    padding-left: 0.5rem;
}
.ps-3 {
    padding-left: 0.75rem;
}
.ps-4 {
    padding-left: 1rem;
}
.ps-5 {
    padding-left: 1.5rem;
}
.ps-6 {
    padding-left: 3rem;
}

.pe-0 {
    padding-right: 0;
}
.pe-1 {
    padding-right: 0.25rem;
}
.pe-2 {
    padding-right: 0.5rem;
}
.pe-3 {
    padding-right: 0.75rem;
}
.pe-4 {
    padding-right: 1rem;
}
.pe-5 {
    padding-right: 1.5rem;
}
.pe-6 {
    padding-right: 3rem;
}

.px-0 {
    padding-right: 0!important;
    padding-left: 0!important;
}
.px-1 {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
}
.px-2 {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}
.px-3 {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}
.px-4 {
    padding-right: 1rem;
    padding-left: 1rem;
}
.px-5 {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}
.px-6 {
    padding-right: 3rem;
    padding-left: 3rem;
}
.px-lg-2 {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}
.px-lg-3 {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}
.px-lg-4 {
    padding-right: 1rem;
    padding-left: 1rem;
}

.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}
.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.py-5 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.py-6 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}


/* Width \ Height */

.h-0-px {
    height: 0px;
}
.h-0 {
    height: 0%;
}
.h-25 {
    height: 25%;
}
.h-50 {
    height: 50%;
}
.h-75 {
    height: 75%;
}
.h-100 {
    height: calc(100% - env(safe-area-inset-bottom) - env(safe-area-inset-top))!important;
}
.h-100dvh {
    height: 100dvh;
}
.h-fit-content {
    height: -moz-fit-content;
    height: fit-content;
}
.h-auto {
    height: auto;
}
.h-min-100 {
    min-height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top));
}
.h-100-header {
    height: calc(100% - env(safe-area-inset-bottom) - env(safe-area-inset-top) - var(--header-height))!important;
}
.h-min-100-header {
    min-height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - var(--header-height))!important;
}
.h-max-100-header {
    max-height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - var(--header-height))!important;
}
.h-min-100-vh {
    min-height: 100vh;
}
.h-min-50-vh {
    min-height: 50vh;
}
.h-min-100-pct {
    min-height: 100%;
}
.h-min-100-px {
    min-height: 100px;
}
.h-min-150-px {
    min-height: 150px;
}
.h-min-200-px {
    min-height: 200px;
}
.h-min-300-px {
    min-height: 300px!important;
}
.h-min-350-px {
    min-height: 350px!important;
}
.h-min-400-px {
    min-height: 400px!important;
}
.h-max-100-vh-content {
    max-height: calc(100vh - env(safe-area-inset-bottom));
}
.h-max-100 {
    max-height: 100vh;
}
.h-max-50-vh {
    max-height: 50vh;
}
.h-max-75-vh {
    max-height: 75vh;
}
.h-max-100-px {
    max-height: 100px;
}
.h-max-150-px {
    max-height: 150px;
}
.h-max-200-px {
    max-height: 200px;
}
.h-max-300-px {
    max-height: 300px!important;
}
.h-max-350-px {
    max-height: 350px!important;
}
.h-max-400-px {
    max-height: 400px!important;
}
.h-max-500-px {
    max-height: 500px!important;
}
.h-max-600-px {
    max-height: 600px!important;
}
.h-max-700-px {
    max-height: 700px!important;
}
.h-max-800-px {
    max-height: 800px!important;
}
.h-max-inherit {
    max-height: inherit!important;
}

.h-min-45-px {
    min-height: 45px;
}

.h-set-30-px {
    min-height: 30px;
    max-height: 30px;
    height: 30px;
}
.h-set-45-px {
    min-height: 45px;
    max-height: 45px;
    height: 45px;
}
.h-set-50-px {
    min-height: 50px;
    max-height: 50px;
    height: 50px;
}
.h-set-75-px {
    min-height: 75px;
    max-height: 75px;
    height: 75px;
}
.h-set-100-px {
    min-height: 100px;
    max-height: 100px;
    height: 100px;
}
.h-set-130-px {
    min-height: 130px;
    max-height: 130px;
    height: 130px;
}
.h-set-150-px {
    min-height: 150px;
    max-height: 150px;
    height: 150px;
}
.h-set-20-px {
    min-height: 20px;
    max-height: 20px;
    height: 20px;
}
.h-set-25-px {
    min-height: 25px;
    max-height: 25px;
    height: 25px;
}
.h-set-200-px {
    min-height: 200px;
    max-height: 200px;
    height: 200px;
}
.h-set-250-px {
    min-height: 250px;
    max-height: 250px;
    height: 250px;
}
.h-set-300-px {
    min-height: 300px;
    max-height: 300px;
    height: 300px;
}
.h-set-50-vh {
    min-height: 50vh;
    max-height: 50vh;
    height: 50vh;
}
.h-set-350-px {
    min-height: 350px;
    max-height: 350px;
    height: 350px;
}
.h-set-400-px {
    min-height: 400px;
    max-height: 400px;
    height: 400px;
}

.w-0-px {
    width: 0px;
}
.w-0 {
    width: 0%;
}
.w-25 {
    width: 25%;
}
.w-50 {
    width: 50%;
}
.w-75 {
    width: 75%;
}
.w-100 {
    width: 100%;
}
.w-max-0 {
    width: 0%;
}
.w-max-25 {
    max-width: 25%;
}
.w-max-50 {
    max-width: 50%;
}
.w-max-75 {
    max-width: 75%;
}
.w-max-100 {
    max-width: 100%;
}
.w-max-100vw {
    max-width: 100vw;
}
.w-auto {
    width: auto;
}
.w-min-100 {
    min-width: 100%;
}
.w-min-0 {
    min-width: 0;
}
.w-min-25-px {
    min-width: 25px;
}
.w-min-30-px {
    min-width: 30px;
}
.w-min-45-px {
    min-width: 45px;
}
.w-min-75-px {
    min-width: 75px;
}
.w-min-100-px {
    min-width: 100px;
}
.w-min-150-px {
    min-width: 150px;
}
.w-min-200-px {
    min-width: 200px;
}
.w-min-250-px {
    min-width: 250px;
}
.w-min-300-px {
    min-width: 300px;
}
.w-min-500-px {
    min-width: 500px;
}
.w-min-600-px {
    min-width: 600px;
}
.w-min-700-px {
    min-width: 700px;
}
.w-min-1000-px {
    min-width: 1000px;
}
.w-min-1100-px {
    min-width: 1100px;
}
.w-min-1400-px {
    min-width: 1400px;
}
.w-min-2400-px {
    min-width: 2400px;
}

.w-available {
    width: -webkit-fill-available;
    width: fill-available;
}
.w-max-content {
    width: max-content;
}
.w-fit-content {
    width: -moz-fit-content;
    width: fit-content;
}

.min-w-100 {
    min-width: 100%;
}
.min-w-75 {
    min-width: 75%;
}
.min-w-50 {
    min-width: 50%;
}
.min-w-25 {
    min-width: 25%;
}

.w-min-0 {
    min-width: 0;
}
.h-10 {
    height: 2.5rem;
}
.w-10 {
    width: 2.5rem;
    max-width: 2.5rem;
    min-width: 2.5rem;
}
.w-50-px {
    width: 50px;
}
.w-min-50-px {
    min-width: 50px;
}
.w-max-25-px {
    max-width: 25px;
}
.w-max-50-px {
    max-width: 50px;
}
.w-max-75-px {
    max-width: 75px;
}
.w-max-100-px {
    max-width: 100px!important;
}
.w-max-125-px {
    max-width: 125px;
}
.w-max-150-px {
    max-width: 150px;
}
.w-max-200-px {
    max-width: 200px;
}
.w-max-250-px {
    max-width: 250px;
}
.w-max-300-px {
    max-width: 300px;
}
.w-max-150-px {
    max-width: 150px;
}
.w-200-px {
    width: 200px;
}
.w-min-200-px {
    min-width: 200px;
}
.w-max-200-px {
    max-width: 200px;
}
.w-max-400-px {
    max-width: 400px;
}
.w-max-500-px {
    max-width: 500px;
}
.w-max-600-px {
    max-width: 600px;
}
.w-max-700-px {
    max-width: 700px;
}
.w-max-800-px {
    max-width: 800px;
}
.w-max-1000-px {
    max-width: 1000px;
}
.w-set-0-px {
    width: 0px;
    min-width: 0px;
    max-width: 0px;
}
.w-set-150-px {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}
.w-set-200-px {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
}
.w-set-225-px {
    width: 225px;
    min-width: 225px;
    max-width: 225px;
}
.w-set-250-px {
    width: 250px;
    min-width: 250px;
    max-width: 250px;
}
.w-set-300-px {
    width: auto;
    min-width: 300px;
    max-width: 300px;
}
.w-set-350-px {
    width: auto;
    min-width: 350px;
    max-width: 350px;
}
.w-set-400-px {
    width: auto;
    min-width: 400px;
    max-width: 400px;
}
.w-set-500-px {
    width: auto;
    min-width: 500px;
    max-width: 500px;
}
.w-max-default {
    max-width: var(--w-max-default, 100%);
    width: 100%;
}
.w-max-md {
    max-width: var(--w-max-md, 100%);
    width: 100%;
}
.w-max-sm {
    max-width: var(--w-max-sm, 100%);
    width: 100%;
}
.w-max-xl {
    max-width: var(--w-max-xl);
}
.w-max-lg {
    max-width: var(--w-max-lg, 100%);
    width: 100%;
}
.w-set-auto {
    width: auto!important;
    min-width: auto!important;
    max-width: unset!important;
}


.w-set-10-px {
    width: 10px;
    max-width: 10px;
    min-width: 10px;
}
.w-set-20-px {
    width: 20px;
    max-width: 20px;
    min-width: 20px;
}
.w-set-25-px {
    width: 25px;
    max-width: 25px;
    min-width: 25px;
}
.w-set-30-px {
    width: 30px;
    max-width: 30px;
    min-width: 30px;
}
.w-set-50-px {
    width: 50px;
    max-width: 50px;
    min-width: 50px;
}
.w-set-75-px {
    width: 75px!important;
    max-width: 75px!important;
    min-width: 75px!important;
}
.w-set-100-px {
    width: 100px!important;
    max-width: 100px!important;
    min-width: 100px!important;
}
.w-set-200-px {
    width: 200px;
    max-width: 200px;
    min-width: 200px;
}


/* Icons */
.icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon.icon-2xs {
    width: 10px;
    height: 10px;
}
.icon.icon-2xs svg {
    width: 10px;
    height: 10px;
}
.icon.icon-xs {
    width: 12px;
    height: 12px;
}
.icon.icon-xs svg {
    width: 12px;
    height: 12px;
}
.icon.icon-sm {
    width: 16px;
    height: 16px;
}
.icon.icon-sm svg {
    width: 16px;
    height: 16px;
}
.icon.icon-lg {
    width: 24px;
    height: 24px;
}
.icon.icon-lg svg {
    width: 24px;
    height: 24px;
}
.icon.icon-xl {
    width: 32px;
    height: 32px;
}
.icon.icon-xl svg {
    width: 32px;
    height: 32px;
}
.icon.icon-xxl {
    width: 48px;
    height: 48px;
}
.icon.icon-xxl {
    width: 48px;
    height: 48px;
}
.icon.icon-xxxl {
    width: 64px;
    height: 64px;
}
.icon.icon-xxxl svg {
    width: 64px;
    height: 64px;
}

.fill-primary svg {
    color: var(--color-primary-text)!important;
    fill: var(--color-primary-text)!important;
}
.fill-danger svg {
    color: var(--color-danger-text)!important;
    fill: var(--color-danger-text)!important;
}
.fill-brand svg {
    color: var(--color-brand)!important;
    fill: var(--color-brand)!important;
}
.fill-success svg {
    color: var(--color-success-text)!important;
    fill: var(--color-success-text)!important;
}
.fill-warning svg {
    color: var(--color-warning-text)!important;
    fill: var(--color-warning-text)!important;
}
.fill-secondary svg {
    color: var(--text-secondary)!important;
    fill: var(--text-secondary)!important;
}
.fill-black svg {
    color: #000!important;
    fill: #000!important;
}
.fill-white svg {
    color: #fff!important;
    fill: #fff!important;
}
.fill-text svg,
.fill-text path[fill] {
    color: var(--text-dark)!important;
    fill: var(--text-dark)!important;
}
.fill-light svg,
.fill-light path[fill] {
    color: var(--text-light)!important;
    fill: var(--text-light)!important;
}
.icon svg {
    width: 24px;
    height: 24px;
    fill: var(--text-dark);
}
.icon.icon-xs svg {
    width: 12px;
    height: 12px;
    fill: var(--text-dark);
}
.icon.icon-sm svg {
    width: 16px;
    height: 16px;
    fill: var(--text-dark);
}
.icon.icon-lg svg {
    width: 32px;
    height: 32px;
    fill: var(--text-dark);
}
.icon.icon-xl svg {
    width: 3rem;
    height: 3rem;
    fill: var(--text-dark);
}

.ms-200-px {
    margin-left: 200px;
}

@media (max-width: 600px) {
    .w-set-md-auto {
        width: auto;
        min-width: auto;
        max-width: unset;
    }
    .p-md-0 {
        padding: 0rem!important;
    }
    .m-md-0 {
        margin: 0rem!important;
    }
    .container-md {
        padding-left: 32px;
        padding-right: 32px;
    }

    .max-h-md-unset {
        max-height: unset;
    }
}


@media (max-width: 800px) {
    /* Sizes */
    .w-sm-min-auto {
        min-width: auto;
    }
    .w-sm-100 {
        width: 100%;
    }
    .m-sm-0 {
        margin: 0rem!important;
    }
    .m-sm-1 {
        margin: 0.25rem!important;
    }
    .m-sm-2 {
        margin: 0.5rem!important;
    }
    .m-sm-3 {
        margin: 0.75rem!important;
    }
    .m-sm-4 {
        margin: 1rem!important;
    }
    .mb-sm-0 {
        margin-bottom: 0rem!important;
    }
    .mb-sm-1 {
        margin-bottom: 0.25rem!important;
    }
    .mb-sm-2 {
        margin-bottom: 0.50rem!important;
    }
    .mb-sm-3 {
        margin-bottom: 0.75rem!important;
    }
    .mb-sm-4 {
        margin-bottom: 1rem!important;
    }
    .mb-sm-5 {
        margin-bottom: 1.5rem!important;
    }
    .mt-sm-0 {
        margin-top: 0rem!important;
    }
    .mt-sm-1 {
        margin-top: 0.25rem!important;
    }
    .mt-sm-2 {
        margin-top: 0.50rem!important;
    }
    .mt-sm-3 {
        margin-top: 0.75rem!important;
    }
    .mt-sm-4 {
        margin-top: 1rem!important;
    }
    .mt-sm-5 {
        margin-top: 1.5rem!important;
    }
    .ms-sm-0 {
        margin-left: 0rem!important;
    }
    .ms-sm-1 {
        margin-left: 0.25rem!important;
    }
    .ms-sm-2 {
        margin-left: 0.50rem!important;
    }
    .ms-sm-3 {
        margin-left: 0.75rem!important;
    }
    .ms-sm-4 {
        margin-left: 1rem!important;
    }
    .ms-sm-5 {
        margin-left: 1.5rem!important;
    }
    .pt-sm-0 {
        padding-top: 0!important;
    }
    .pt-sm-1 {
        padding-top: 0.25rem!important;
    }
    .pt-sm-2 {
        padding-top: 0.50rem!important;
    }
    .pt-sm-3 {
        padding-top: 0.75rem!important;
    }
    .pt-sm-4 {
        padding-top: 1rem!important;
    }
    .pt-sm-5 {
        padding-top: 1.5rem!important;
    }
    .pt-sm-6 {
        padding-top: 3rem!important;
    }
    .pb-sm-0 {
        padding-bottom: 0!important;
    }
    .pb-sm-1 {
        padding-bottom: 0.25rem!important;
    }
    .pb-sm-2 {
        padding-bottom: 0.50rem!important;
    }
    .pb-sm-3 {
        padding-bottom: 0.75rem!important;
    }
    .pb-sm-4 {
        padding-bottom: 1rem!important;
    }
    .pb-sm-5 {
        padding-bottom: 1.5rem!important;
    }
    .pb-sm-6 {
        padding-bottom: 3rem!important;
    }
    .me-sm-0 {
        margin-right: 0!important;
    }
    .me-sm-1 {
        margin-right: 0.25rem!important;
    }
    .ms-sm-0 {
        margin-left: 0!important;
    }
    .ms-sm-1 {
        margin-left: 0.25rem!important;
    }

    .mx-sm-0 {
        margin-right: 0!important;
        margin-left: 0!important;
    }
    .mx-sm-1 {
        margin-right: 0.25rem;
        margin-left: 0.25rem;
    }
    .mx-sm-2 {
        margin-right: 0.5rem!important;
        margin-left: 0.5rem!important;
    }
    .mx-sm-3 {
        margin-right: 0.75rem!important;
        margin-left: 0.75rem!important;
    }
    .mx-sm-4 {
        margin-right: 1rem!important;
        margin-left: 1rem!important;
    }

    .my-sm-0 {
        margin-top: 0!important;
        margin-bottom: 0!important;
    }
    .my-sm-1 {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
    }
    .my-sm-2 {
        margin-top: 0.5rem!important;
        margin-bottom: 0.5rem!important;
    }
    .my-sm-3 {
        margin-top: 0.75rem!important;
        margin-bottom: 0.75rem!important;
    }
    .my-sm-4 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .px-sm-0 {
        padding-right: 0!important;
        padding-left: 0!important;
    }
    .px-sm-1 {
        padding-right: 0.25rem!important;
        padding-left: 0.25rem!important;
    }
    .px-sm-2 {
        padding-right: 0.5rem!important;
        padding-left: 0.5rem!important;
    }
    .px-sm-3 {
        padding-right: 0.75rem!important;
        padding-left: 0.75rem!important;
    }
    .px-sm-4 {
        padding-right: 1rem!important;
        padding-left: 1rem!important;
    }

    .pe-sm-0 {
        padding-right: 0;
    }
    .pe-sm-1 {
        padding-right: 0.25rem;
    }
    .pe-sm-2 {
        padding-right: 0.5rem;
    }
    .pe-sm-3 {
        padding-right: 0.75rem;
    }
    .pe-sm-4 {
        padding-right: 1rem;
    }
    .pe-sm-5 {
        padding-right: 1.5rem;
    }
    .pe-sm-6 {
        padding-right: 3rem;
    }

    .py-sm-0 {
        padding-top: 0!important;
        padding-bottom: 0!important;
    }
    .py-sm-1 {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
    .py-sm-2 {
        padding-top: 0.5rem!important;
        padding-bottom: 0.5rem!important;
    }
    .py-sm-3 {
        padding-top: 0.75rem!important;
        padding-bottom: 0.75rem!important;
    }
    .py-sm-4 {
        padding-top: 1rem!important;
        padding-bottom: 1rem!important;
    }
    .py-sm-5 {
        padding-top: 1.5rem!important;
        padding-bottom: 1.5rem!important;
    }
    .py-sm-6 {
        padding-top: 3rem!important;
        padding-bottom: 3rem!important;
    }
    .px-lg-1,
    .px-lg-2,
    .px-lg-3,
    .px-lg-4,
    .px-lg-5,
    .px-lg-6 {
        padding-right: 0;
        padding-left: 0;
    }
    .p-sm-75 {
        padding: 0.75rem;
    }
    .mt-sm-0 {
        margin-top: 0;
    }
    .mt-sm-5 {
        margin-top: 1.5rem;
    }
    .mb-lg-2 {
        margin-bottom: 0;
    }
    .mt-lg-1,
    .mt-lg-2,
    .mt-lg-3,
    .mt-lg-4,
    .mt-lg-5,
    .mt-lg-6 {
        margin-top: 0;
    }
    .me-lg-5 {
        margin-right: 0;
    }
    .ms-sm-75 {
        margin-left: 0.75rem;
    }

    .p-sm-0 {
        padding: 0!important;
    }
    .p-sm-1 {
        padding: 0.25rem;
    }
    .p-sm-2 {
        padding: 0.5rem;
    }
    .p-sm-3 {
        padding: 0.75rem;
    }
    .p-sm-4 {
        padding: 1rem;
    }
    .p-sm-5 {
        padding: 1.5rem;
    }
    .p-sm-6 {
        padding: 3rem;
    }

    .w-sm-available {
        width: -webkit-fill-available;
        width: fill-available;
    }
    .w-sm-min-auto {
        min-width: auto;
    }

    .w-sm-min-90-pct {
        min-width: 90%;
    }

    .w-sm-min-75-pct {
        min-width: 75%;
    }
    .w-sm-min-60-pct {
        min-width: 60%;
    }
    .w-sm-min-50-pct {
        min-width: 50%;
    }
    .w-sm-min-40-pct {
        min-width: 40%;
    }

    .w-set-sm-150-px {
        width: 150px;
        min-width: 150px;
        max-width: 150px;
    }

    .w-set-sm-auto {
        width: auto;
        min-width: 0;
        max-width: none;
    }
    .w-sm-min-100 {
        min-width: 100%!important;
    }

    .ms-sm-150-px {
        margin-left: 150px;
    }
    .h-sm-100 {
        height: 100%!important;
    }
    .h-sm-100-header {
        height: calc(100% - var(--header-height));
    }
    .h-sm-set-250-px {
        min-height: 250px;
        max-height: 250px;
        height: 250px;
    }
    .h-sm-set-150-px {
        min-height: 150px;
        max-height: 150px;
        height: 150px;
    }
    .h-sm-set-100-px {
        min-height: 100px;
        max-height: 100px;
        height: 100px;
    }
    .h-sm-set-75-px {
        min-height: 75px;
        max-height: 75px;
        height: 75px;
    }

    .pt-container {
        padding-top: 0;
    }

    .w-sm-max-0 {
        width: 0%;
    }
    .w-sm-max-25 {
        max-width: 25%;
    }
    .w-sm-max-50 {
        max-width: 50%;
    }
    .w-sm-max-75 {
        max-width: 75%;
    }
    .w-sm-max-100 {
        max-width: 100%;
    }

    .w-sm-max-25-px {
        max-width: 25px;
    }
    .w-sm-max-50-px {
        max-width: 50px;
    }
    .w-sm-max-75-px {
        max-width: 75px;
    }
    .w-sm-max-100-px {
        max-width: 100px;
    }
    .w-sm-max-125-px {
        max-width: 125px;
    }
    .w-sm-max-150-px {
        max-width: 150px;
    }
    .w-sm-fit-content {
        width: -moz-fit-content;
        width: fit-content;
    }

    .w-sm-set-100-px {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
    }

    .w-sm-set-75-px {
        width: 75px;
        min-width: 75px;
        max-width: 75px;
    }

    .w-sm-set-50-px {
        width: 50px;
        min-width: 50px;
        max-width: 50px;
    }

    .h-sm-max-0 {
        height: 0%;
    }
    .h-sm-min-100 {
        min-height: 100%;
    }
    .h-sm-max-100 {
        max-height: 100%;
    }
    .h-set-sm-auto {
        height: 100%!important;
        min-height: 0!important;
        max-height: none!important;
    }
    .h-min-sm-50-vh {
        min-height: 50vh;
    }

    .h-sm-header {
        height: var(--header-sm-height);
    }

    .h-100-header {
        height: calc(100% - env(safe-area-inset-bottom) - env(safe-area-inset-top) - var(--header-height) - 49px);
    }
    .h-min-100-header {
        min-height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - var(--header-height) - 49px);
    }
    .h-max-100-header {
        max-height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - var(--header-height) - 49px);
    }
}
.monospace {
    font-family: var(--font-family-monospace);
}
.signature {
    font-family: var(--font-family-signature)!important;
}

/* Align */

.text-wrap {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.text-center {
    text-align: center;
}
.text-end {
    text-align: end;
}
.text-start {
    text-align: start;
}

/* Sizes */

.page-title {
    font-size: 25px;
    font-weight: 400;
}
.title-1 {
    font-size: 35px;
    font-weight: 400;
}
.title-2 {
    font-size: 24px;
    font-weight: 400;
}
.title-3 {
    font-size: 20px;
    font-weight: 400;
}

.fs-10 {
    font-size: 10px;
}
.fs-12 {
    font-size: 12px!important;
}
.fs-14 {
    font-size: 14px!important;
}
.fs-15 {
    font-size: 15px;
}
.fs-16 {
    font-size: 16px;
}
.fs-18 {
    font-size: 18px;
}
.fs-20 {
    font-size: 20px;
}
.fs-24 {
    font-size: 24px;
}
.fs-28 {
    font-size: 28px;
}
.fs-32 {
    font-size: 32px;
}
.fs-38 {
    font-size: 38px;
}
.fs-54 {
    font-size: 54px;
}
.fs-96 {
    font-size: 96px;
}
.line-height-1 {
    line-height: 1;
}
.line-height-1-3 {
    line-height: 1.3;
}
.line-height-2 {
    line-height: 2;
}

/* Weight */
.weight-100 {
    font-weight: 100;
}
.weight-400 {
    font-weight: 400!important;
}
.weight-500 {
    font-weight: 500!important;
}
.weight-600 {
    font-weight: 600!important;
}
.weight-700 {
    font-weight: 700;
}
.bold {
    font-weight: bold!important;
}

/* line title */

.text-1-line-title {
    max-height: 18px;
    font-size: 16px;
    overflow: hidden;
}
.text-2-line-title {
    max-height: 38px;
    font-size: 16px;
    overflow: hidden;
}

/* Color */
.text-primary {
    color: rgb(var(--color-general-primary-text));
}
.text-brand-hover:hover {
    color: var(--color-brand);
}
.text-primary-hover:hover {
    color: var(--color-primary);
}
.text-danger {
    color: var(--color-danger-text);
}
.text-brand {
    color: var(--color-brand);
}
.text-custom {
    color: var(--color-custom);
}
.text-warning {
    color: var(--color-warning-text);
}
.text-success {
    color: var(--color-success-text);
}
.text-dark {
    color: var(--text-dark);
}
.text-dark-hover:hover {
    color: var(--text-dark);
}
.text-light-hover:hover {
    color: var(--text-light);
}
.text-light {
    color: var(--text-light)!important;
}
.text-white {
    color: #fff!important;
}
.text-black {
    color: #000!important;
}
.text-secondary {
    color: var(--text-secondary);
}
.text-secondary-light {
    color: var(--text-secondary-light);
}
.text-color-initial {
    color: initial;
}
/* Decorations */
.text-capitalize {
    text-transform: capitalize;
}
.text-lowercase {
    text-transform: lowercase;
}
.text-line-through {
    text-decoration: line-through;
}
.text-underlined {
    text-decoration: underline;
}
.text-dashed {
    -webkit-text-decoration: dashed;
            text-decoration: dashed;
}
.text-underlined-hover:hover {
    text-decoration: underline;
}
.text-decoration-none {
    text-decoration: none!important;
}
.text-shadow-hard {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}
.text-shadow {
    text-shadow: var(--text-shadow);
}
.text-shadow-sm {
    text-shadow: var(--text-shadow);
}

.weight-normal {
    font-weight: normal;
}
.text-uppercase {
    text-transform: uppercase;
}

.white-space-nowrap {
    white-space: nowrap;
}

/* Other */
.can-select {
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
}
.disable-select {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
.td-no-wrap {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-nowrap {
    position: relative;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
} 
.text-wrap-anywhere {
    white-space: pre-wrap;
    word-wrap: break-word;
}
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-ellipsis-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-ellipsis-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-ellipsis-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.white-space-nowrap {
    white-space: nowrap;
}
.break-words {
    word-break: break-word;
}
.break-words-all {
    word-break: break-all;
}

.textarea-vertical-resize {
    resize: vertical;
}

@media (max-width: 800px) {
    .title-sm-1 {
        font-size: 35px;
        font-weight: 600;
    }
    .title-sm-2 {
        font-size: 24px;
        font-weight: 600;
    }
    .title-sm-3 {
        font-size: 22px;
        font-weight: 600;
    }
    .title-sm-4 {
        font-size: 18px;
        font-weight: 600;
    }
    
    .fs-sm-10 {
        font-size: 10px!important;
    }
    .fs-sm-12 {
        font-size: 12px!important;
    }
    .fs-sm-14 {
        font-size: 14px!important;
    }
    .fs-sm-16 {
        font-size: 16px!important;
    }
    .fs-sm-18 {
        font-size: 18px!important;
    }
    .fs-sm-20 {
        font-size: 20px!important;
    }
    .fs-sm-24 {
        font-size: 24px!important;
    }
    .fs-sm-28 {
        font-size: 28px!important;
    }
    .fs-sm-32 {
        font-size: 32px!important;
    }
    .fs-sm-48 {
        font-size: 48px!important;
    }
    .fs-sm-54 {
        font-size: 54px!important;
    }

    .text-sm-center {
        text-align: center;
    }
    .text-sm-start {
        text-align: start;
    }
    .text-sm-end {
        text-align: end;
    }
}
.react-datepicker {
    display: flex;
    flex-direction: column;
    background-color: var(--color-main)!important;
    box-shadow: var(--box-shadow);
    animation: drop var(--transition-duration) forwards;
    padding: 12px!important;
    border-radius: var(--border-radius-lg)!important;
}
.react-datepicker__month {
    margin: 0!important;
    padding: 0!important;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
    border-top-left-radius: var(--border-radius)!important;
    border-top-right-radius: var(--border-radius)!important;
}
.react-datepicker-popper {
    z-index: 9999!important;
}
.react-datepicker__navigation-icon::before {
    border-color: var(--text-dark)!important;
    height: 6px!important;
    width: 6px!important;
}
.react-datepicker .react-datepicker__day-names .react-datepicker__day-name {
    font-size: 10px!important;
    font-weight: 500!important;
    color: var(--text-secondary)!important;
    font-family: var(--font-family)!important;
}
.react-datepicker__header {
    background-color: var(--color-main)!important;
    color: var(--text-light)!important;
    font-family: var(--font-family)!important;
}
.react-datepicker__children-container {
    margin: 0;
    padding: 4px;
    border-bottom-left-radius: var(--border-radius)!important;
    border-bottom-right-radius: var(--border-radius)!important;
}
.dropdown-menu .react-datepicker {
    box-shadow: none!important;
}
.dropdown-mobile-container .react-datepicker {
    padding-left: 0!important;
    padding-right: 0!important;
}
.dropdown-menu:has(.react-datepicker) {
    padding: 0!important;
}
.dropdown-mobile-container:has(.react-datepicker) {
    padding: 8px 0!important;
}
.react-datepicker,
.react-datepicker__header {
    border-color: transparent!important;
}
.react-datepicker__header {
    padding: 0!important;
}
.react-datepicker__day, 
.react-datepicker__time-name {
    color: var(--text-dark)!important;
    font-family: var(--font-family)!important;
}
.react-datepicker__current-month {
    font-weight: 400!important;
    font-size: 16px!important;
    opacity: 1!important;
}
.react-datepicker__day-name {
    /* opacity: 0.5!important; */
}
.react-datepicker__day--outside-month {
    opacity: 0.15!important;
}
.react-datepicker__day.react-datepicker__day--range-end:hover,
.react-datepicker__day.react-datepicker__day--today:hover,
.react-datepicker:has(.react-datepicker__day--in-range ):hover  .react-datepicker__week .react-datepicker__day--selected:hover , .react-datepicker__day.react-datepicker__day--selected:hover {
    background-color: rgb(var(--color-general-secondary-bg-hover))!important;
}
.react-datepicker__day:hover {
    /* border-radius: 50%!important; */
    color: rgb(var(--color-general-brand-text))!important;
    background-color: rgb(var(--color-general-secondary-bg-hover))!important;
    border-radius: 50%;
    font-weight: 500;
}
.react-datepicker__day--disabled,
.react-datepicker__day--disabled:hover {
    background-color: var(--color-tertiary)!important;
    color: var(--text-dark)!important;
    opacity: 0.2!important;
}
.modal-open .react-datepicker__portal {
    background-color: transparent!important;
}
.modal-open .react-datepicker__portal .react-datepicker__navigation {
    top: 8px!important;
    margin: 0 8px!important;
}
.react-datepicker__portal {
    background-color: var(--color-overlay)!important;
    width: calc(100% - 24px)!important;
    padding: 0 12px!important;
    height: 100%!important;
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
}
.react-datepicker__portal .react-datepicker {
    box-shadow: var(--box-shadow)!important;
}
.react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header {
    padding: 4px 0 16px 0;
    color: var(--text-dark);
}
.react-datepicker__navigation {
    top: 0px!important; 
    margin: 16px 12px!important;
    opacity: 0.5!important;
    transition-duration: var(--transition-duration)!important;
}
.react-datepicker:has(.date-select-custom-header) .react-datepicker__navigation {
    top: -2px!important; 
    margin: 0!important;
}
.react-datepicker__navigation:hover {
    opacity: 1!important;
}
.react-datepicker__children-container {
    width: auto!important;
    display: flex!important;
}

.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
    border-bottom-color: var(--color-main)!important;
}
.react-datepicker__day--selected,
.react-datepicker__day.react-datepicker__day--selected {
    border: 1px solid rgb(var(--color-general-secondary-border))!important;
    border-top-left-radius: 50%!important;
    border-bottom-left-radius: 50%!important;
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
    border-right-color: transparent!important;
    color: rgb(var(--color-general-brand-text))!important;
    font-weight: 500;
    background-color: rgb(var(--color-general-secondary-bg))!important;
}
.react-datepicker__day--keyboard-selected[aria-selected="false"] {
    border-color: transparent!important;
    color: var(--text-dark)!important;
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__day.react-datepicker__day--range-end {
    border: 1px solid rgb(var(--color-general-secondary-border))!important;
    border-top-right-radius: 50%!important;
    border-bottom-right-radius: 50%!important;
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
    border-left-color: transparent!important;
    color: rgb(var(--color-general-brand-text))!important;
    font-weight: 500;
    background-color: rgb(var(--color-general-secondary-bg))!important;
}
.react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range {
    background-color: var(--color-main)!important;
    border: 1px solid rgb(var(--color-general-secondary-border))!important;
    border-left: none!important;
    border-right: none!important;
    border-radius: 0!important;
    color: rgb(var(--color-general-brand-text))!important;
    font-weight: 500;
    background-color: rgb(var(--color-general-secondary-bg))!important;
}
.react-datepicker__day-name {
    font-weight: 500!important;
    color: var(--text-dark);
}
.react-datepicker__header .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {
    padding-top: 0!important;
    padding-bottom: 0!important;
    margin-top: 0!important;
    margin-bottom: 0!important;
}
.react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {
    /* width: 2rem!important;
    line-height: 2rem!important; */
    margin: 0!important;
    padding: 6px 7px!important;
    font-family: var(--font-family)!important;
}
.inline-calendar.react-datepicker {
    box-shadow: none!important;
    font-size: 12px!important;
}
.inline-calendar .react-datepicker__header {
    background-color: unset!important;
}

.react-datepicker__navigation-icon::before {
    border-style: solid;
    border-width: 2px 2px 0 0;
    content: "";
    display: block;
    height: 9px;
    position: absolute;
    top: 6px;
    width: 9px;
    border-radius: 1px;
}
.react-datepicker__day {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    font-size: 14px!important;

}
.react-datepicker__day.react-datepicker__day--today {
    color: var(--text-dark)!important;
    border-radius: 50%!important;
}
.react-datepicker__day--in-range.react-datepicker__day.react-datepicker__day--today.react-datepicker__day--range-end {
    border-top-right-radius: 50%!important;
    border-bottom-right-radius: 50%!important;
}
    .react-datepicker__day--in-range.react-datepicker__day.react-datepicker__day--today {
    border-radius: 0%!important;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
    border-bottom-color: var(--color-border)!important;
}

.react-datepicker:has(.react-datepicker__day--in-range) .react-datepicker__day--range-start.react-datepicker__day--range-end.react-datepicker__day--in-range {
    border-radius: 50%!important;
    border-right: 1px solid rgb(var(--color-general-secondary-border))!important;
    border: 1px solid rgb(var(--color-general-secondary-border))!important;
}
/* .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
    border-top-color: var(--color-border)!important;
} */
.react-datepicker__view-calendar-icon input {
    margin-left: 46px;
    padding: 11px 6px;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
    padding: 15px 16px;
    transition-duration: var(--transition-duration);
    opacity: 0.5;
}
.calendar-container:has(.react-datepicker) .btn-outline {
    border-color: rgb(var(--color-general-secondary-border));
}
.react-datepicker__input-container .react-datepicker__calendar-icon:hover {
    opacity: 1;
}
.react-datepicker__calendar-icon {
    width: 16px;
    cursor: pointer;
    height: 16px;
}
.react-datepicker__triangle {
    display: none!important;
}
.react-datepicker__today-button {
    color: var(--text-dark)!important;
    border: none;
    font-weight: 400;
    padding: 0.75rem 1rem!important;
    transition-duration: var(--transition-duration)!important;
    color: var(--text-secondary)!important;
    background-color: var(--color-secondary)!important;
}
.react-datepicker__today-button:hover {
    opacity: 1!important;
    color: rgb(var(--color-general-brand-text))!important;
    font-weight: 500;
}
.react-datepicker:not(:has(.react-datepicker__day--in-selecting-range)) .react-datepicker__day.react-datepicker__day--selected {
    border-radius: 50%!important;
    border: 1px solid rgb(var(--color-general-secondary-border))!important;
}
.react-datepicker:has(.react-datepicker__day--in-range ) .react-datepicker__week .react-datepicker__day--selected, .react-datepicker__day.react-datepicker__day--selected  {
    border-right: transparent!important;
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
}

/* .react-datepicker:not(.react-datepicker__day--in-range ) .react-datepicker__day--selected,
.react-datepicker__day.react-datepicker__day--selected {
    border-right: 1px solid rgb(var(--color-general-secondary-border))!important;
    border-radius: 50%!important;
} */

@media (max-width: 800px) {
    .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {
        width: 2rem!important;
        line-height: 2rem!important;
    }
}
:root {
  --color-scheme: light;
  --border-radius-lg: 24px;
  --border-radius: 12px;
  --border-radius-md: 12px;
  --border-radius-sm: 8px;
  --border-radius-xs: 4px;

  --border: 1px solid #E2DDD2;
  --color-translucent: rgba(255, 255, 255, 0.1);

  --color-brand: #1c1c1c;
  --color-brand-text: #1c1c1c;
  --color-brand-bg: #ffffff;
  --color-brand-bg-hover: #ffffff;
  --color-brand-border: #1c1c1c;
  --color-brand-rgb: 

  --color-primary: #1c1c1c;
  --color-primary-10: rgba(28, 28, 28, 0.1);
  --color-primary-20: rgba(28, 28, 28, 0.2);
  --color-primary-text: #1c1c1c;
  --color-primary-bg: #faf2ec;
  --color-primary-bg-hover: #f2e2d8;

  --color-danger: #cc0023;
  --color-danger-text: #dc3545;
  --color-danger-bg: #ffe6e6;
  --color-danger-bg-hover: #ffcccc;

  --color-success: #217005;
  --color-success-text: #217005;
  --color-success-bg: #d7f9b8;
  --color-success-bg-hover: #c6f79c;

  --color-warning: #b13600;
  --color-warning-text: #b13600;
  --color-warning-bg: #fdf8c9;
  --color-warning-bg-hover: #fff0cc;

  --color-general-brand: 83, 58, 253;
  --color-general-primary-text: 28, 28, 28;
  --color-general-primary-bg: 236, 250, 243;
  --color-general-primary-bg-hover: 208, 242, 224;
  --color-general-primary-border: 165, 227, 195;
  --color-general-danger-text: 220, 53, 69;
  --color-general-danger-bg: 255, 230, 230;
  --color-general-danger-bg-hover: 255, 204, 204;
  --color-general-danger-border: 252, 207, 207;
  --color-general-success-text: 33, 112, 5;
  --color-general-success-bg: 215, 249, 184;
  --color-general-success-bg-hover: 215, 249, 184;
  --color-general-success-border: 198, 247, 156;
  --color-general-warning-text: 220, 133, 53;
  --color-general-warning-bg: 255, 247, 230;
  --color-general-warning-bg-hover: 255, 240, 204;
  --color-general-warning-border: 247, 226, 179;
  --color-general-secondary-bg: 248, 246, 241;
  --color-general-secondary-text: 42, 38, 35;
  --color-general-secondary-bg-hover: 238, 235, 227;
  --color-general-secondary-border: 42, 38, 35;
  --color-general-brand-bg: 236, 250, 243;;
  --color-general-brand-text: 236, 250, 243;
  --color-general-brand-bg-hover: 236, 250, 243;
  --color-general-brand-border: 236, 250, 243;

  --color-btn-overlay: rgba(255, 255, 255, 0.15);
  --color-scroll-overlay: rgba(190, 190, 190, 0.3);

  --color-logo: #033C29;

  --color-main: #ffffff;
  --color-secondary: #F8F6F1;
  --color-secondary-hover: #FAF8F4;
  --color-tertiary: #FCFBF8;
  --color-border: #E2DDD2;
  --color-border-secondary: #EEEBE3;

  --text-light: #ffffff;
  --text-dark: #2A2623;
  --text-secondary: #908779;
  --text-secondary-light: #6F6860;

  --color-overlay: rgba(0, 0, 0, 0.25);

  /* ── Dark section palettes ── */
  --color-plum: #140018;
  --color-plum-800: #1E0024;
  --color-plum-600: #2D0038;
  --color-plum-accent: #b0b0fe;

  --color-charcoal: #1A1614;
  --color-charcoal-800: #252019;
  --color-charcoal-600: #3D362E;
  --color-charcoal-accent: #ECBA6A;

  --color-forest: #033C29;
  --color-forest-800: #022B1D;
  --color-forest-accent: #D3FD74;

  /* ── Layout ── */
  --w-max-content: 900px;

  --p-container-content: 32px;
  --p-container: 32px;
  --w-max-sm: 1250px;
  --w-max-default: 1650px;
  --w-max-md: 1850px;
  --w-max-lg: 2400px;

  --transition-duration: .15s;

  --checkout-btn-offset: 75px;

  --nav-width: 225px;
  --nav-width-collapsed: 56px;
  --nav-sm-height: 63px;
  --header-height: 64px;
  --header-sm-height: 61px;
  --max-width: 800px;

  /* box shadow like in max */
  --box-shadow-xs: 0 1px 2px 0 rgba(42,38,35,.25), 0 1px 3px 1px rgba(42,38,35,.12);
  --box-shadow-sm: 0 4px 6px -1px rgba(42,38,35,.08),0 2px 4px -2px rgba(42,38,35,.08);
  --box-shadow: 0 2px 4px rgba(42,38,35,.08), 0 2px 8px rgba(42,38,35,.08);
  --box-shadow-lg:rgba(42, 38, 35, 0.07) 0px 5px 15px 0px, rgba(42, 38, 35, 0.08) 0px 15px 35px -5px;
  --box-shadow-nav: 4px 4px 2px 0 rgba(42,38,35,.1);

  --font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-monospace: 'Source Code Pro', Menlo, Monaco, monospace;
  --font-family-signature: "cedarville cursive",sans-serif;
  --font-family-title: var(--font-libre), ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;

  --color-1-text: rgb(0, 68, 23);
  --color-1-bg: rgb(238, 255, 240);
  --color-1-border: rgb(25, 128, 42);
  --color-1-bg-hover: rgb(210, 255, 225);

  --color-2-text: rgb(0, 68, 23);
  --color-2-bg: rgb(229, 255, 237);
  --color-2-border: rgb(0, 178, 59);
  --color-2-bg-hover: rgb(194, 255, 213);

  --color-3-text: rgb(0, 71, 54);
  --color-3-bg: rgb(203, 255, 242);
  --color-3-border: rgb(18, 191, 148);
  --color-3-bg-hover: rgb(170, 255, 234);

  --color-4-text: rgb(0, 58, 116);
  --color-4-bg: rgb(222, 238, 255);
  --color-4-border: rgb(38, 147, 255);
  --color-4-bg-hover: rgb(196, 226, 255);

  --color-5-text: rgb(55, 0, 94);
  --color-5-bg: rgb(241, 221, 255);
  --color-5-border: rgb(135, 22, 217);
  --color-5-bg-hover: rgb(230, 196, 255);

  --color-6-text: rgb(73, 0, 55);
  --color-6-bg: rgb(255, 241, 251);
  --color-6-border: rgb(217, 54, 176);
  --color-6-bg-hover: rgb(255, 219, 246);

  --color-7-text: rgb(73, 0, 24);
  --color-7-bg: rgb(255, 221, 233);
  --color-7-border: rgb(153, 8, 56);
  --color-7-bg-hover: rgb(255, 196, 216);

  --color-8-text: rgb(66, 0, 11);
  --color-8-bg: rgb(255, 224, 230);
  --color-8-border: rgb(204, 0, 35);
  --color-8-bg-hover: rgb(255, 191, 201);

  --color-9-text: rgb(82, 14, 0);
  --color-9-bg: rgb(255, 238, 234);
  --color-9-border: rgb(242, 91, 61);
  --color-9-bg-hover: rgb(255, 221, 215);

  --color-10-text: rgb(82, 41, 0);
  --color-10-bg: rgb(255, 243, 231);
  --color-10-border: rgb(255, 159, 64);
  --color-10-bg-hover: rgb(255, 230, 206);

  --color-11-text: rgb(77, 57, 0);
  --color-11-bg: rgb(255, 250, 233);
  --color-11-border: rgb(255, 191, 0);
  --color-11-bg-hover: rgb(255, 239, 191);

  --peer-avatar-1: #FF845E;
  --peer-avatar-2: #D45246;
  --peer-avatar-3: #FEBB5B;
  --peer-avatar-4: #F68136;
  --peer-avatar-5: #B694F9;
  --peer-avatar-6: #6C61DF;
  --peer-avatar-7: #9AD164;
  --peer-avatar-8: #46BA43;
  --peer-avatar-9: #53edd6;
  --peer-avatar-10: #28c9b7;
  --peer-avatar-11: #5BCBE3;
  --peer-avatar-12: #359AD4;
  --peer-avatar-13: #FF8AAC;
  --peer-avatar-14: #D95574;
  --peer-avatar-15: #B8C2CC;
  --peer-avatar-16: #9EAAB5;

  --peer-avatar-0: #E2DDD2;
}

[data-theme='dark'] {
  --color-scheme: dark;
  --color-logo: #fff;

  --color-main: #1A1614;
  --color-secondary: #252019;
  --color-secondary-hover: #2E2821;
  --color-tertiary: #211D19;
  --color-border: #3D362E;
  --color-border-secondary: #252019;
  --color-translucent: rgba(0, 0, 0, 0.1);

  --color-overlay: rgba(0, 0, 0, 0.65);
  
  --color-brand: #fff;
  --color-brand-text: #fff;
  --color-brand-bg: #22212c;
  --color-brand-bg-hover: #22212c;
  --color-brand-border: #fff;

  --color-primary: #1d9bf0;
  --color-primary-text: #1d9bf0;
  --color-primary-bg: #1d9bf0;
  --color-primary-bg-hover: #1d9bf0;
  --color-primary-bg-light: #a2daff;

  --color-danger: #cc0023;
  --color-danger-text: #dc3545;
  --color-danger-bg: #ffe6e6;
  --color-danger-bg-hover: #ffcccc;

  --color-success: #217005;
  --color-success-text: #217005;
  --color-success-bg: #d7f9b8;
  --color-success-bg-hover: #c6f79c;

  --color-warning: #b13600;
  --color-warning-text: #b13600;
  --color-warning-bg: #fdf8c9;
  --color-warning-bg-hover: #fff0cc;
  
  --color-general-primary-text: 107, 205, 160;
  --color-general-primary-bg-hover: 2, 43, 29;
  --color-general-primary-bg: 1, 28, 19;
  --color-general-primary-border: 26, 139, 90;
  --color-general-danger-text: 231, 35, 54;
  --color-general-danger-bg-hover: 73, 1, 8;
  --color-general-danger-bg: 59, 0, 6;
  --color-general-danger-border: 220, 53, 69;
  --color-general-success-text: 18, 191, 148;
  --color-general-success-bg-hover: 0, 59, 45;
  --color-general-success-bg: 0, 53, 40;
  --color-general-success-border: 18, 191, 148;
  --color-general-warning-text: 255, 174, 0;
  --color-general-warning-bg-hover: 71, 49, 0;
  --color-general-warning-bg: 54, 37, 0;
  --color-general-warning-border: 255, 178, 10;
  --color-general-secondary-bg-hover: 61, 54, 46;
  --color-general-secondary-bg: 37, 32, 25;
  --color-general-secondary-text: 255, 255, 255;
  --color-general-secondary-border: 169, 164, 158;
  --color-general-brand-bg: 37, 32, 25;
  --color-general-brand-text: 255, 255, 255;
  --color-general-brand-bg-hover: 37, 32, 25;
  --color-general-brand-border: 255, 255, 255;

  --box-shadow-xs: 0 1px 2px 0 rgba(230,240,250,.3), 0 1px 3px 1px rgba(230,240,250,.15);
  --box-shadow-sm: 0 1px 2px 0 rgba(255,255,255,.3), 0 1px 3px 1px rgba(255,255,255,.15);
  --box-shadow: 0 2px 4px rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,1);
  --box-shadow-lg:rgba(230,240,250, 0.03) 0px 5px 15px 0px, rgba(230,240,250, 0.1) 0px 15px 35px -5px;
  --box-shadow-nav: 4px 4px 2px 0 rgba(0,0,0,1);

  --color-btn-overlay: rgba(0, 0, 0, 0.15);
  --color-scroll-overlay: rgba(0, 0, 0, 0.5);

  --text-light: #000000;
  --text-dark: #ffffff;
  --text-secondary: #acacac;
  --text-secondary-light: #acacac;

  --border: 1px solid #3D362E;
  --border-light: 1px solid rgba(42, 38, 35, 0.25);

  --color-1-text: rgb(108, 248, 155);
  --color-1-bg: rgba(25,128,42,.2);
  --color-1-border: rgb(25, 128, 42);
  --color-1-bg-hover: rgba(17, 85, 28, 0.2);

  --color-2-text: rgb(159, 255, 191);
  --color-2-bg: rgba(0,178,59,.2);
  --color-2-border: rgb(0, 178, 59);
  --color-2-bg-hover: rgba(0, 127, 42, 0.2);

  --color-3-text: rgb(30 255 199);
  --color-3-bg: rgba(18, 191, 148, 0.2);
  --color-3-border: rgb(18, 191, 148);
  --color-3-bg-hover: rgba(14, 144, 112, 0.2);

  --color-4-text: rgb(138, 197, 255);
  --color-4-bg: rgba(38,147,255,.2);
  --color-4-border: rgb(38, 147, 255);
  --color-4-bg-hover: rgba(0, 122, 242, 0.2);

  --color-5-text: rgb(200, 122, 255);
  --color-5-bg: rgba(135, 22, 217, 0.2);
  --color-5-border: rgb(135, 22, 217);
  --color-5-bg-hover: rgba(106, 17, 171, 0.2);

  --color-6-text: rgb(255, 123, 222);
  --color-6-bg: rgba(217, 54, 176, 0.2);
  --color-6-border: rgb(217, 54, 176);
  --color-6-bg-hover: rgba(185,35,147,.2);

  --color-7-text: rgb(255, 151, 186);
  --color-7-bg: rgba(153, 8, 56, 0.2);
  --color-7-border: rgb(187, 21, 124);
  --color-7-bg-hover: rgba(105, 5, 38, 0.2);

  --color-8-text: rgb(255, 99, 125);
  --color-8-bg: rgba(204, 0, 35, 0.2);
  --color-8-border: rgb(204, 0, 35);
  --color-8-bg-hover: rgba(153, 0, 26, 0.2);

  --color-9-text: rgb(255, 164, 146);
  --color-9-bg: rgba(242, 91, 61, 0.2);
  --color-9-border: rgb(242, 91, 61);
  --color-9-bg-hover: rgba(236, 52, 16, 0.2);

  --color-10-text: rgb(255, 181, 108);
  --color-10-bg: rgba(255, 159, 64, 0.2);
  --color-10-border: rgb(255, 159, 64);
  --color-10-bg-hover: rgba(255, 133, 13, 0.2);

  --color-11-text: rgb(255, 212, 85);
  --color-11-bg: rgba(255, 191, 0, 0.2);
  --color-11-border: rgb(153, 115, 0);
  --color-11-bg-hover: rgba(204, 153, 0, 0.2);

  --peer-avatar-0: #363636;
}
* {
  /* user-select: none; */
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  --font-family: var(--font-geist-sans), ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
}
/* *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track {
  background-color: transparent!important;
}
*::-webkit-scrollbar-thumb {
  min-height: 65px;
  background-color: var(--color-border)!important;
  border: 1px solid var(--color-border)!important;
  border-radius: var(--border-radius);
} */
.checkout-btn-offset {
  padding-bottom: var(--checkout-btn-offset)!important;
}

html,
textarea,
body {
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6, .fs-24, .fs-20, .fs-18, .fs-38 {
  font-family: var(--font-libre), ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
}

#root {
  background-color: var(--color-main);
}
html,
body,
#root {
  height: 100%;
}
body {
  margin: 0;
  font-weight: 400;
  color: var(--text-dark);
  fill: var(--text-dark);
  background-color: var(--color-main);
  /* overscroll-behavior: contain; */
}
body:has(.navbar-m.open),
body:has(.preview-img-big-display),
/* body:has(.dropdown-open), */
body:has(.modal-open),
body:has(.menu-open),
body:has(.fsm-wrapper.open),
body:has(.navbar.open) {
  overflow: hidden!important;
}
/* .page-body:has(.dropdown-open) {
  overflow: hidden!important;
} */

.content-body-wrapper {
  flex: 1 1;
  display: flex;
  /* flex-grow: 1; */
  /* max-height: calc(100vh - var(--p-container-content)); */
  position: relative;
  /* overflow: auto; */
  /* border-radius: var(--border-radius); */
  /* display: flex; */
}
.content-body-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  max-width: 100%;
  /* border-radius: var(--border-radius); */
}
.content-body {
  background-color: var(--color-main);
  /* min-height: calc(100vh - env(safe-area-inset-bottom)); */
  /* height: 100%; */
  margin-left: auto;
  /* padding-top: 32px; */
  margin-right: auto;
  display: flex;
  flex: 1 1;
  /* padding-right: var(--p-container-content);
  padding-left: var(--p-container-content);
  padding-bottom: var(--p-container-content); */
  flex-direction: column;
}
.top-alert {
  position: fixed;
  z-index: 9999;
  bottom: 0;
}
.content-body-wrapper {
  padding: calc(var(---p-container-content)) var(--p-container-content)  var(--p-container-content)  var(--p-container-content);
}
.content-body-inner::-webkit-scrollbar {
  display: none;
}
.page-body {
  /* border-radius: var(--border-radius); */
  background-color: var(--color-main);
  max-height: inherit;
  min-height: inherit;
  flex: 1 1;
  display: flex;
  flex-direction: column;
}
main {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  padding-top: 72px;
  flex-grow: 1;
}
.container {
  padding-left: var(--p-container);
  padding-right: var(--p-container);
}
.container-content {
  padding-left: var(--p-container-content);
  padding-right: var(--p-container-content);
}
.content {
  display: flex;
  flex: 1 1;
}
.max-width {
  /* max-width: 800px; */
  max-width: 80rem;
}
.max-width-sm {
  max-width: 400px;
}

.app {
  min-height: 100%;
  position: relative
}

table {
  /* font-family: monospace; */
}

a {
  text-decoration: none;
  color: var(--text-dark);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"] {
  -moz-appearance: textfield;
  -webkit-appearance: none;
  margin: 0;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: background-color 5000s ease-in-out 0s!important;
    transition: background-color 5000s ease-in-out 0s!important;
    -webkit-text-fill-color: var(--text-dark) !important;
}


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

.box-shadow-none {
  box-shadow: none!important;
}

.mw-50-px {
  max-width: 60px;
  min-width: 60px;
}

.card-box-lg {
  padding: 40px;
  border: 1px solid var(--color-border);
  background-color: var(--color-main);
}

.padding-top-0 {
  padding-top: calc(var(--header-height) + var(--p-container));
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Quill Editor */
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill,
.ql-snow .ql-picker,
.ql-snow.ql-toolbar button svg {
  fill: var(--text-dark)!important;
  color: var(--text-dark)!important;
}
.ql-snow .ql-stroke {
  stroke: var(--text-dark)!important;
}
.ql-container {
  border: none!important;
  height: auto;
  flex: 1 1;
  display: flex;
  overflow: auto;
}
.ql-editor {
  flex: 1 1;
  padding: 0 12px 8px 12px;
}
.ql-snow.ql-toolbar button svg, .ql-snow .ql-toolbar button svg {
  float: none;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border: none!important;
}
.ql-snow .ql-picker-label {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ql-formats .icon-btn:active {
  transform: none!important;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  background-color: var(--color-main)!important;
  border-radius: var(--border-radius-sm);
  border-color: var(--color-border);
  box-shadow: var(--box-shadow-sm);
  z-index: 9;
}
.ql-snow .ql-color-picker .ql-picker-item {
  border-radius: var(--border-radius);
}
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected, .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover:hover {
  border-color: rgb(var(--color-general-secondary-border));
}
.ql-picker-label {
  justify-content: space-between!important;
}
.ql-toolbar.ql-snow {
  padding: 2px 0;
}
.ql-editor.ql-blank::before {
  color: #000;
  opacity: 0.6;
  font-style: normal;
}

/* End of quill editor */

#tooltip-default,
#tooltip-click {
  background-color: var(--color-main);
  color: var(--text-dark);
  box-shadow: var(--box-shadow-lg);
  padding: 4px 8px;
  border-radius: var(--border-radius-md);
  font-weight: 500;
  font-size: 12px;
}
#tooltip-user {
  border-radius: var(--border-radius-md)!important;
  box-shadow: var(--box-shadow-sm);
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  background-color: var(--color-main);
  z-index: 9999;
  opacity: 1;
  overflow: hidden;
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: var(--transition-duration);
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
.recharts-wrapper:focus,
.recharts-pie:focus,
.recharts-surface:focus,
.recharts-sector:focus {
  outline: none;
}
label.p-FieldLabel {
  color: var(--text-dark)!important;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 800px) {
  .padding-top-0 {
    padding-top: var(--header-height);
  }

  *::-webkit-scrollbar {
    display: none;
  }
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }
  body {
    background-color: var(--color-main);
  }

  .content.content-collapsed,
  .content {
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    /* padding-bottom: 61px; */
  }
  .content {
    flex-direction: column;
  }
  .content-body {
    margin-right: unset;
    margin-left: unset;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    max-width: 100%;
    /* padding-bottom: 30px; */
    min-height: calc(100vh - env(safe-area-inset-bottom));
  }
  .content-body-wrapper {
    /* padding-top: calc(var(--header-sm-height)); */
    padding-left: 0;
    padding-right: 0;
  }
  /* body:has(.navbar-mob) .content-body {
    padding-bottom: calc(51px + env(safe-area-inset-bottom));
    min-height: calc(100vh - env(safe-area-inset-bottom) - 51px);
  } */
  .pb-navbar-mob {
    padding-bottom: calc(51px + env(safe-area-inset-bottom));
  }
  body:has(.hidden-navbar-mob) .content-body {
    padding-bottom: env(safe-area-inset-bottom)!important;
  }
  .page-body {
    border-radius: 0;
  }

  .card-box-lg {
    padding: 0;
    border: none;
  }

  .content-body-wrapper {
    border-radius: 0;
    max-height: unset;
    position: relative;
    overflow: initial;
    display: flex;
  }
  .content-body-inner {
    overflow: initial;
  }
  .page-body {
    overflow-y: initial;
    max-height: initial;
    min-height: initial;
  }
}