@charset "UTF-8";

:root {
    --color-violet-50: #e1def5;
    --color-violet-60: #cec8ee;
    --color-violet-70: #b5ace5;
    --color-violet-80: #9c91dd;
    --color-violet-90: #8476d4;
    --color-violet: #6b5acc;
    --color-violet-110: #594baa;
    --color-violet-140: #241e44;
    --color-violet-150: #151229;
    --color-bittersweet-50: #ffe2df;
    --color-bittersweet-70: #feb7ae;
    --color-bittersweet-80: #fea093;
    --color-bittersweet: #fe705d;
    --color-bittersweet-110: #d45d4e;
    --color-black-50: #d1d1d1;
    --color-black-60: #b2b2b2;
    --color-black-70: #8b8b8b;
    --color-black-80: #656565;
    --color-black-90: #3f3f3f;
    --color-black: #181818;
    --color-black-110: #141414;
    --color-white: #ffffff;
    --color-green-50: #d8f4d3;
    --color-green-60: #bdedb5;
    --color-green-70: #9ce490;
    --color-green-80: #7cdb6c;
    --color-green-90: #5bd247;
    --color-green: #3ac922;
    --color-green-110: #30a71c;
    --color-success-500: #12B76A;
    --color-red-50: #ffd6d6;
    --color-red-90: #ff5353;
    --color-red: #ff3030;
    --color-red-110: #d42828;
    --color-yellow-50: #fdf7d3;
    --color-yellow: #f6d523;
    --color-yellow-110: #f6d523;
    --color-warning-400: #FDB022;
    --color-blue-50: #d5deff;
    --color-blue: #2d5bff;
    --color-blue-110: #264cd4;
    --color-gray-50: #f7f7f7;
    --color-gray: #d7d7d7;
    --color-gray-110: #b3b3b3;
    --color-softgray-60: #f9f9f9;
    --color-softgray: #ededed;
}

html {
    font-family: "Poppins";
}

html,
body,
.wrapper {
    min-height: 100%;
}

.wrapper {
    position: relative;
}

.wrapper .content-wrapper {
    min-height: calc(100vh - calc(3.5rem + 1px) - calc(3.5rem + 1px));
}

/* Color */

.modal {
    background: rgb(107, 90, 204, 0.1);
}

.form-control::placeholder {
    color: var(--color-black-70);
}

.bg-footer {
    background: var(--color-violet-150);
    box-shadow: 0px -2px 8px 0px #04121a1a;
}

.bg-gradient-navbar {
    background: linear-gradient(
        360deg,
        var(--color-violet) -35.22%,
        var(--color-bittersweet) 353.5%
    );
}

.bg-gradient-violet {
    background: linear-gradient(
        180deg,
        rgba(130, 115, 220, 0.8) 0%,
        rgba(107, 90, 204, 0.8) 100%
    );
    --bs-btn-color: var(--color-white);
    --bs-btn-bg: linear-gradient(
        180deg,
        rgba(130, 115, 220, 0.8) 0%,
        rgba(107, 90, 204, 0.8) 100%
    );
    --bs-btn-border-color: linear-gradient(
        180deg,
        rgba(130, 115, 220, 0.8) 0%,
        rgba(107, 90, 204, 0.8) 100%
    );
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: #8476d4;
    --bs-btn-hover-border-color: #594baa;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: #594baa;
    --bs-btn-active-border-color: #473c88;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-white);
    --bs-btn-disabled-bg: linear-gradient(
        180deg,
        rgba(130, 115, 220, 0.8) 0%,
        rgba(107, 90, 204, 0.8) 100%
    );
    --bs-btn-disabled-border-color: linear-gradient(
        180deg,
        rgba(130, 115, 220, 0.8) 0%,
        rgba(107, 90, 204, 0.8) 100%
    );
}

.bg-white-100 {
    background: var(--color-white);
}

.bg-violet-140 {
    background: var(--color-violet-140);
}

.bg-violet-150 {
    background: var(--color-violet-150);
}

.bg-violet-100 {
    background: var(--color-violet);
}

.bg-violet-80 {
    background-color: var(--color-violet-80);
}

.bg-violet-50 {
    background: var(--color-violet-50);
}

.bg-green-80 {
    background-color: var(--color-green-80);
}

.bg-green-50 {
    background-color: var(--color-green-50);
}

.bg-warning-400 {
    background-color: var(--color-warning-400);
}

.bg-gray-50 {
    background: var(--color-gray-50);
}

.bg-softgray {
    background: var(--color-softgray);
}

.bg-red-100 {
    background: var(--color-red);
}

.bg-blue-50 {
    background-color: var(--color-blue-50);
}

.bg-bittersweet-50 {
    background-color: var(--color-bittersweet-50);
}

.bg-bittersweet-80 {
    background-color: var(--color-bittersweet-80);
}

.bg-black-50 {
    background-color: var(--color-black-50);
}

.btn-blue-110 {
    --bs-btn-color: var(--color-white);
    --bs-btn-bg: var(--color-blue-110);
    --bs-btn-border-color: var(--color-blue-110);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: var(--color-blue);
    --bs-btn-hover-border-color: var(--color-blue);
    --bs-btn-focus-shadow-rgb: 107, 90, 204;
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: var(--color-blue);
    --bs-btn-active-border-color: var(--color-blue);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-white);
    --bs-btn-disabled-bg: var(--color-black-50);
    --bs-btn-disabled-border-color: var(--color-black-50);
}

.btn-white {
    --bs-btn-color: var(--color-black-90);
    --bs-btn-bg: var(--color-white);
    --bs-btn-border-color: var(--color-white);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: var(--color-black-60);
    --bs-btn-hover-border-color: var(--color-black-60);
    --bs-btn-focus-shadow-rgb: 107, 90, 204;
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: var(--color-black-60);
    --bs-btn-active-border-color: var(--color-black-60);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-black-80);
    --bs-btn-disabled-bg: var(--color-black-50);
    --bs-btn-disabled-border-color: var(--color-black-50);
}

.btn-light-violet {
    --bs-btn-color: var(--color-white);
    --bs-btn-bg: var(--color-violet);
    --bs-btn-border-color: var(--color-violet);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: #8476d4;
    --bs-btn-hover-border-color: #594baa;
    --bs-btn-focus-shadow-rgb: 107, 90, 204;
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: #594baa;
    --bs-btn-active-border-color: #473c88;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-white);
    --bs-btn-disabled-bg: var(--color-black-50);
    --bs-btn-disabled-border-color: var(--color-black-50);
}

.btn-violet {
    --bs-btn-color: var(--color-white);
    --bs-btn-bg: var(--color-violet);
    --bs-btn-border-color: var(--color-violet);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: #8476d4;
    --bs-btn-hover-border-color: #594baa;
    --bs-btn-focus-shadow-rgb: 107, 90, 204;
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: #594baa;
    --bs-btn-active-border-color: #473c88;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-white);
    --bs-btn-disabled-bg: var(--color-black-50);
    --bs-btn-disabled-border-color: var(--color-black-50);
}

.btn-bittersweet {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-bittersweet);
    --bs-btn-border-color: var(--color-bittersweet);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #fe8878;
    --bs-btn-hover-border-color: #fea093;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #d45d4e;
    --bs-btn-active-border-color: #d45d4e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-bittersweet);
    --bs-btn-disabled-border-color: var(--color-bittersweet);
}

.btn-gray {
    --bs-btn-color: var(--color-white);
    --bs-btn-bg: var(--color-gray);
    --bs-btn-border-color: var(--color-gray);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: #dedede;
    --bs-btn-hover-border-color: #b3b3b3;
    --bs-btn-focus-shadow-rgb: 107, 90, 204;
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: #b3b3b3;
    --bs-btn-active-border-color: #8f8f8f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-white);
    --bs-btn-disabled-bg: var(--color-gray);
    --bs-btn-disabled-border-color: var(--color-gray);
}

.btn-softgray {
    --bs-btn-color: var(--color-black);
    --bs-btn-bg: var(--color-softgray);
    --bs-btn-border-color: var(--color-softgray);
    --bs-btn-hover-color: var(--color-black);
    --bs-btn-hover-bg: #ededed;
    --bs-btn-hover-border-color: #9e9e9e;
    --bs-btn-focus-shadow-rgb: 107, 90, 204;
    --bs-btn-active-color: var(--color-black);
    --bs-btn-active-bg: #9e9e9e;
    --bs-btn-active-border-color: #777777;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-black);
    --bs-btn-disabled-bg: var(--color-softgray);
    --bs-btn-disabled-border-color: var(--color-softgray);
}

.btn-softgray-bold {
    --bs-btn-color: var(--color-black);
    --bs-btn-bg: var(--color-softgray);
    --bs-btn-border-color: var(--color-softgray);
    --bs-btn-hover-color: var(--color-black);
    --bs-btn-hover-bg: var(--color-black-80);
    --bs-btn-hover-border-color: var(--color-black-80);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: var(--color-black);
    --bs-btn-active-border-color: var(--color-black);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-black-60);
    --bs-btn-disabled-bg: var(--color-gray);
    --bs-btn-disabled-border-color: var(--color-softgray-60);
}

.btn-outline-transparent {
    --bs-btn-color: var(--color-black-90);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--color-black-90);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: #594baa;
    --bs-btn-focus-shadow-rgb: 107, 90, 204;
    --bs-btn-active-color: var(--bs-border-color);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--bs-border-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-border-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-black-50);
}

.btn-outline-violet {
    --bs-btn-color: var(--color-black-80);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-black-50);
    --bs-btn-hover-color: var(--color-black-90);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--color-violet);
    --bs-btn-focus-shadow-rgb: 107, 90, 204;
    --bs-btn-active-color: var(--color-violet);
    --bs-btn-active-bg: var(--color-violet-50);
    --bs-btn-active-border-color: var(--color-violet-60);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-border-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-black-50);
}

.btn-border-violet {
    --bs-btn-color: var(--color-violet);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-violet);
    --bs-btn-hover-color: var(--color-violet-140);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--color-violet-60);
    --bs-btn-focus-shadow-rgb: 107, 90, 204;
    --bs-btn-active-color: var(--color-violet);
    --bs-btn-active-bg: var(--color-violet-50);
    --bs-btn-active-border-color: var(--color-violet);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-black-50);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-black-50);
}

.btn-outline-white {
    --bs-btn-color: var(--color-white);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-black-50);
    --bs-btn-hover-color: var(--color-black-50);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--color-black-50);
    --bs-btn-focus-shadow-rgb: 107, 90, 204;
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--color-white);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-border-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-black-50);
}

.btn-outline-hover-violet {
    --bs-btn-color: var(--color-violet);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-violet);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: var(--color-violet);
    --bs-btn-hover-border-color: var(--color-violet);
    --bs-btn-focus-shadow-rgb: 107, 90, 204;
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: var(--color-violet);
    --bs-btn-active-border-color: var(--color-violet);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-black-50);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-black-50);
}

.btn-no-border-violet {
    --bs-btn-color: var(--color-black-80);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 107, 90, 204;
    --bs-btn-active-color: var(--color-violet);
    --bs-btn-active-bg: var(--color-violet-50);
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-black-50);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

.btn-transparent-text-black {
    --bs-btn-color: var(--color-black-70) !important;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--color-black-80) !important;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 107, 90, 204;
    --bs-btn-active-color: var(--color-black-90) !important;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-black-50) !important;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

.btn-icon {
    padding: 0;
    width: calc(2.309375rem + 2px);
    height: calc(2.309375rem + 2px);
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}
.btn-icon.btn-xl,
.btn-group-xl > .btn-icon.btn {
    width: calc(3.625rem + 2px);
    height: calc(3.625rem + 2px);
}
.btn-icon.btn-xl > span,
.btn-group-xl > .btn-icon.btn > span {
    font-size: 1.25rem;
}
.btn-icon.btn-lg,
.btn-group-lg > .btn-icon.btn {
    width: calc(3rem + 2px);
    height: calc(3rem + 2px);
    font-size: 1rem;
}
.btn-icon.btn-sm,
.btn-group-sm > .btn-icon.btn {
    width: calc(1.625rem + 2px);
    height: calc(1.625rem + 2px);
    font-size: 0.75rem;
}
.btn-icon.btn-xs,
.btn-group-xs > .btn-icon.btn {
    width: calc(1.125rem + 2px);
    height: calc(1.125rem + 2px);
    font-size: 0.75rem;
}

.btn-pagination {
    width: 42px;
    height: 42px;
    padding: 4px;
    border-radius: 8px;
    border: 0;
    background: var(--color-softgray-60);
    font-size: 18px;
    font-weight: 400;
    color: var(--color-black-70);
    transition: 0.5s;
}

.btn-pagination-32 {
    width: 32px;
    height: 32px;
    padding: 4px;
    border-radius: 8px;
    border: 0;
    background: var(--color-softgray-60);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-black-70);
    transition: 0.5s;
}

.btn-pagination:hover,
.btn-pagination-32:hover {
    background: var(--color-softgray);
}

.btn-pagination-32.active,
.btn-pagination-32:active,
.btn-pagination-32.active.disabled,
.btn-pagination-32.active:disabled,
.btn-pagination.active,
.btn-pagination:active,
.btn-pagination.active.disabled,
.btn-pagination.active:disabled {
    background: var(--color-violet);
    color: var(--color-white);
    font-weight: 700;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-pagination-32:disabled,
.btn-pagination-32.disabled,
.btn-pagination:disabled,
.btn-pagination.disabled {
    background: var(--color-softgray-60);
    cursor: default;
}

.dropdown-item.dropdown-violet.active,
.dropdown-item.dropdown-violet:active {
    color: var(--color-violet);
    font-weight: 600 !important;
    background-color: var(--color-violet-50);
}

.dropdown-item.dropdown-hover-violet:hover {
    color: var(--color-violet);
    background-color: var(--color-violet-50);
}

.dropdown-notification.dropdown-toggle::after {
    content: none;
}

.dropdown-menu-notification {
    width: 100%;
}

@media (min-width: 768px) {
    .dropdown-menu-notification {
        width: 500px;
    }
}

.form-control:focus {
    box-shadow: none;
    border-color: var(--color-violet);
    z-index: 1 !important;
}

.form-control.border-2:focus {
    box-shadow: none;
    z-index: 1 !important;
}

/* .input-group:focus-within {

    box-shadow: 0 0 0 0.25rem rgba(107, 90, 204, 0.25);
    border-color: var(--color-violet);
    border-radius: 8px;
} */

.form-select:focus {
    box-shadow: 0 0 0 0.25rem rgba(107, 90, 204, 0.25);
    border-color: var(--color-violet);
}

.text-bittersweet {
    color: var(--color-bittersweet);
}

.text-violet {
    color: var(--color-violet);
}

.text-violet-60 {
    color: var(--color-violet-60);
}

.text-black-100 {
    color: var(--color-black);
}

.text-black-90 {
    color: var(--color-black-90);
}

.text-black-80 {
    color: var(--color-black-80);
}

.text-black-70 {
    color: var(--color-black-70);
}

.text-black-60 {
    color: var(--color-black-60);
}

.text-blue-100 {
    color: var(--color-blue);
}

.text-red-100 {
    color: var(--color-red);
}

.text-red-90 {
    color: var(--color-red-90);
}

.text-yellow-100 {
    color: #f6d523;
}

.text-white-100 {
    color: var(--color-white);
}

.text-green-100 {
    color: var(--color-green);
}

.text-green-110 {
    color: var(--color-green-110);
}

.text-gray-110 {
    color: var(--color-gray-110);
}

.text-link-primary {
    color: var(--color-black-70);
}

.text-link-primary.active,
.text-link-primary:active,
.text-link-primary:hover {
    color: var(--color-violet) !important;
}

.text-link-primary-bold {
    color: var(--color-violet);
}

.text-link-primary-bold.active,
.text-link-primary-bold:active,
.text-link-primary-bold:hover {
    color: var(--color-violet-140);
}

.link-violet:hover {
    background: var(--color-violet);
    color: var(--color-white);
    font-weight: bold;
}

.text-truncate-1-line {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-2-line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-3-line {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-4-line {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-5-line {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-6-line {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Spacing */
.m-n1 {
    margin: -0.25rem !important;
}

.m-n2 {
    margin: -0.5rem !important;
}

.m-n3 {
    margin: -1rem !important;
}

.m-n4 {
    margin: -1.5rem !important;
}

.m-n5 {
    margin: -3rem !important;
}

.mx-n1 {
    margin-right: -0.25rem !important;
    margin-left: -0.25rem !important;
}

.mx-n2 {
    margin-right: -0.5rem !important;
    margin-left: -0.5rem !important;
}

.mx-n3 {
    margin-right: -1rem !important;
    margin-left: -1rem !important;
}

.mx-n4 {
    margin-right: -1.5rem !important;
    margin-left: -1.5rem !important;
}

.mx-n5 {
    margin-right: -3rem !important;
    margin-left: -3rem !important;
}

.my-n1 {
    margin-top: -0.25rem !important;
    margin-bottom: -0.25rem !important;
}

.my-n2 {
    margin-top: -0.5rem !important;
    margin-bottom: -0.5rem !important;
}

.my-n3 {
    margin-top: -1rem !important;
    margin-bottom: -1rem !important;
}

.my-n4 {
    margin-top: -1.5rem !important;
    margin-bottom: -1.5rem !important;
}

.my-n5 {
    margin-top: -3rem !important;
    margin-bottom: -3rem !important;
}

.mt-n1 {
    margin-top: -0.25rem !important;
}

.mt-n2 {
    margin-top: -0.5rem !important;
}

.mt-n3 {
    margin-top: -1rem !important;
}

.mt-n4 {
    margin-top: -1.5rem !important;
}

.mt-n5 {
    margin-top: -3rem !important;
}

.mt-n80 {
    margin-top: -80px !important;
}

.me-n1 {
    margin-right: -0.25rem !important;
}

.me-n2 {
    margin-right: -0.5rem !important;
}

.me-n3 {
    margin-right: -1rem !important;
}

.me-n4 {
    margin-right: -1.5rem !important;
}

.me-n5 {
    margin-right: -3rem !important;
}

.mb-n1 {
    margin-bottom: -0.25rem !important;
}

.mb-n2 {
    margin-bottom: -0.5rem !important;
}

.mb-n3 {
    margin-bottom: -1rem !important;
}

.mb-n4 {
    margin-bottom: -1.5rem !important;
}

.mb-n5 {
    margin-bottom: -3rem !important;
}

.ms-n1 {
    margin-left: -0.25rem !important;
}

.ms-n2 {
    margin-left: -0.5rem !important;
}

.ms-n3 {
    margin-left: -1rem !important;
}

.ms-n4 {
    margin-left: -1.5rem !important;
}

.ms-n5 {
    margin-left: -3rem !important;
}

.margin-banner {
    margin-top: 5rem !important;
}

@media (min-width: 768px) {
    .margin-banner {
        margin-top: 7.5rem !important;
    }
}

.p-n1 {
    padding: -0.25rem !important;
}

.p-n2 {
    padding: -0.5rem !important;
}

.p-n3 {
    padding: -1rem !important;
}

.p-n4 {
    padding: -1.5rem !important;
}

.p-n5 {
    padding: -3rem !important;
}

.px-n1 {
    padding-right: -0.25rem !important;
    padding-left: -0.25rem !important;
}

.px-n2 {
    padding-right: -0.5rem !important;
    padding-left: -0.5rem !important;
}

.px-n3 {
    padding-right: -1rem !important;
    padding-left: -1rem !important;
}

.px-n4 {
    padding-right: -1.5rem !important;
    padding-left: -1.5rem !important;
}

.px-n5 {
    padding-right: -3rem !important;
    padding-left: -3rem !important;
}

.py-n1 {
    padding-top: -0.25rem !important;
    padding-bottom: -0.25rem !important;
}

.py-n2 {
    padding-top: -0.5rem !important;
    padding-bottom: -0.5rem !important;
}

.py-n3 {
    padding-top: -1rem !important;
    padding-bottom: -1rem !important;
}

.py-n4 {
    padding-top: -1.5rem !important;
    padding-bottom: -1.5rem !important;
}

.py-n5 {
    padding-top: -3rem !important;
    padding-bottom: -3rem !important;
}

.pt-n1 {
    padding-top: -0.25rem !important;
}

.pt-n2 {
    padding-top: -0.5rem !important;
}

.pt-n3 {
    padding-top: -1rem !important;
}

.pt-n4 {
    padding-top: -1.5rem !important;
}

.pt-n5 {
    padding-top: -3rem !important;
}

.pe-n1 {
    padding-right: -0.25rem !important;
}

.pe-n2 {
    padding-right: -0.5rem !important;
}

.pe-n3 {
    padding-right: -1rem !important;
}

.pe-n4 {
    padding-right: -1.5rem !important;
}

.pe-n5 {
    padding-right: -3rem !important;
}

.pb-n1 {
    padding-bottom: -0.25rem !important;
}

.pb-n2 {
    padding-bottom: -0.5rem !important;
}

.pb-n3 {
    padding-bottom: -1rem !important;
}

.pb-n4 {
    padding-bottom: -1.5rem !important;
}

.pb-n5 {
    padding-bottom: -3rem !important;
}

.ps-n1 {
    padding-left: -0.25rem !important;
}

.ps-n2 {
    padding-left: -0.5rem !important;
}

.ps-n3 {
    padding-left: -1rem !important;
}

.ps-n4 {
    padding-left: -1.5rem !important;
}

.ps-n5 {
    padding-left: -3rem !important;
}

/* Typography */
.app-fs-18 {
    font-size: 18px;
}

.app-fs-32 {
    font-size: 32px;
}

.app-h1,
.app-h2,
.app-h3,
.app-sub-h1,
.app-sub-h4,
.app-body-1,
.app-body-5,
.app-caption-1 {
    font-family: "Poppins";
    font-weight: 700;
}

.app-h4,
.app-sub-h2,
.app-sub-h5,
.app-body-2,
.app-body-6,
.app-caption-4,
.app-caption-6,
.app-caption-8 {
    font-family: "Poppins";
    font-weight: 600;
}

.app-sub-h3,
.app-sub-h5,
.app-sub-h6,
.app-body-3,
.app-body-7,
.app-caption-2 {
    font-family: "Poppins";
    font-weight: 500;
}

.app-sub-h7,
.app-body-4,
.app-body-8,
.app-caption-3,
.app-caption-5,
.app-caption-7,
.app-caption-9 {
    font-family: "Poppins";
    font-weight: 400;
}

.app-h1 {
    font-size: 56px;
}

.app-h2 {
    font-size: 48px;
}

.app-h3 {
    font-size: 40px;
}

.app-h4 {
    font-size: 40px;
}

.app-sub-h1,
.app-sub-h2,
.app-sub-h3 {
    font-size: 36px;
}

.app-sub-h4,
.app-sub-h5,
.app-sub-h6,
.app-sub-h7 {
    font-size: 32px;
}

.app-body-1,
.app-body-2,
.app-body-3,
.app-body-4 {
    font-size: 24px;
}

.app-body-5,
.app-body-6,
.app-body-7,
.app-body-8 {
    font-size: 20px;
}

.app-caption-1,
.app-caption-2,
.app-caption-3 {
    font-size: 18px;
}

.app-caption-4,
.app-caption-5 {
    font-size: 16px;
}

.app-caption-6,
.app-caption-7 {
    font-size: 14px;
}

.app-caption-8,
.app-caption-9 {
    font-size: 12px;
}

.divider {
    display: block;
    text-align: center;
    margin: 1rem 0;
    overflow: hidden;
    white-space: nowrap;
}
.divider .divider-text {
    position: relative;
    display: inline-block;
    font-size: 0.8rem;
    padding: 0rem 1rem;
}
.divider .divider-text i {
    font-size: 1rem;
}
.divider .divider-text:before,
.divider .divider-text:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 100vw;
    border-top: 3px solid var(--color-gray);
}
.divider .divider-text:before {
    right: 100%;
}
.divider .divider-text:after {
    left: 100%;
}
.divider.text-start .divider-text {
    padding-left: 0;
}
.divider.text-end .divider-text {
    padding-right: 0;
}
.divider.text-start-center .divider-text {
    left: -25%;
}
.divider.text-end-center .divider-text {
    right: -25%;
}
.divider.divider-dotted .divider-text:before,
.divider.divider-dotted .divider-text:after {
    border-style: dotted;
    border-width: 0 1px 1px;
    border-color: rgba(67, 89, 113, 0.2);
}
.divider.divider-dashed .divider-text:before,
.divider.divider-dashed .divider-text:after {
    border-style: dashed;
    border-width: 0 1px 1px;
    border-color: rgba(67, 89, 113, 0.2);
}

.divider.divider.divider-secondary .divider-text:before,
.divider.divider.divider-secondary .divider-text:after {
    border-color: #8592a3;
}

.divider.divider.divider-success .divider-text:before,
.divider.divider.divider-success .divider-text:after {
    border-color: #71dd37;
}

.divider.divider.divider-info .divider-text:before,
.divider.divider.divider-info .divider-text:after {
    border-color: #03c3ec;
}

.divider.divider.divider-warning .divider-text:before,
.divider.divider.divider-warning .divider-text:after {
    border-color: #ffab00;
}

.divider.divider.divider-danger .divider-text:before,
.divider.divider.divider-danger .divider-text:after {
    border-color: #ff3e1d;
}

.divider.divider.divider-dark .divider-text:before,
.divider.divider.divider-dark .divider-text:after {
    border-color: #233446;
}

.divider.divider.divider-gray .divider-text:before,
.divider.divider.divider-gray .divider-text:after {
    border-color: rgba(67, 89, 113, 0.1);
}

/* Form Control */
.input-group-merge .input-group-text:first-child {
    border-right: 0;
}
.input-group-merge .input-group-text:last-child {
    border-left: 0;
}
.input-group-merge .form-control:not(:first-child) {
    padding-left: 0;
    border-left: 0;
}
.input-group-merge .form-control:not(:last-child) {
    padding-right: 0;
    border-right: 0;
}

.form-check-input-success:checked {
    border-color: var(--color-green);
    background-color: var(--color-green);
}

.form-check-input-success:focus ~ .form-check-label::before {
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0),
        0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.form-check-input-success:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--color-green-70);
}

.form-check-input-success:not(:disabled):active ~ .form-check-label::before {
    background-color: var(--color-green-50);
    border-color: var(--color-green-50);
}

.form-check-input-violet:checked {
    border-color: var(--color-violet);
    background-color: var(--color-violet);
}

.form-check-input-violet:focus {
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0),
        0 0 0 0.2rem rgba(125, 40, 167, 0.25) !important;
}

.form-check-input-violet:focus ~ .form-check-label::before {
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0),
        0 0 0 0.2rem rgba(125, 40, 167, 0.25) !important;
}

.form-check-input-violet:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--color-violet-70);
}

.form-check-input-violet:not(:disabled):active ~ .form-check-label::before {
    background-color: var(--color-violet-50);
    border-color: var(--color-violet-50);
}

.owl-banner.owl-theme .owl-dots .owl-dot.active span,
.owl-banner.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--color-white) !important;
}

.owl-banner.owl-theme .owl-nav + .owl-dots {
    /* margin-top: -4rem !important; */
    margin-top: -2rem !important;
    position: absolute;
    width: 100%;
}

.owl-banner .owl-nav {
    position: absolute;
    width: 100%;
    top: 50%;
}

.owl-banner .owl-prev {
    float: left !important;
    margin-left: 35px !important;
    padding: 10px !important;
    border-radius: 40px !important;
    width: 44px;
    height: 44px;
    background: var(--color-violet-50) !important;
    font-size: 24px !important;
}

.owl-banner .owl-prev.disabled {
    display: none !important;
}

.owl-banner .owl-next {
    float: right !important;
    margin-right: 35px !important;
    padding: 10px !important;
    border-radius: 40px !important;
    width: 44px;
    height: 44px;
    background: var(--color-violet-50) !important;
    font-size: 24px !important;
}

.owl-banner .owl-next.disabled {
    display: none !important;
}

.owl-recomend.owl-theme .owl-dots .owl-dot.active span,
.owl-recomend.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--color-violet) !important;
}

.owl-testimoni.owl-theme .owl-dots .owl-dot.active span,
.owl-testimoni.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--color-white) !important;
}

.owl-testimonial.owl-theme .owl-dots .owl-dot.active span,
.owl-testimoni.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--color-violet) !important;
}

.owl-also-like .owl-nav {
    position: absolute;
    width: 100%;
    top: 50%;
}

.owl-also-like .owl-prev {
    float: left !important;
    margin-left: -50px !important;
    padding: 2px !important;
    border-radius: 40px !important;
    width: 44px;
    height: 44px;
    background: var(--color-violet) !important;
    font-size: 24px !important;
    opacity: 0.5;
}

.owl-also-like .owl-prev.disabled {
    display: none !important;
}

.owl-also-like .owl-next {
    float: right !important;
    margin-right: -50px !important;
    padding: 2px !important;
    border-radius: 40px !important;
    width: 44px;
    height: 44px;
    background: var(--color-violet) !important;
    font-size: 24px !important;
    opacity: 0.5;
}

.owl-also-like .owl-next.disabled {
    display: none !important;
}

.owl-also-like-mobile .owl-prev {
    padding: 2px !important;
    border-radius: 40px !important;
    width: 44px;
    height: 44px;
    background: var(--color-violet) !important;
    font-size: 24px !important;
    opacity: 0.5;
}

.owl-also-like-mobile .owl-prev.disabled {
    display: none !important;
}

.owl-also-like-mobile .owl-next {
    padding: 2px !important;
    border-radius: 40px !important;
    width: 44px;
    height: 44px;
    background: var(--color-violet) !important;
    font-size: 24px !important;
    opacity: 0.5;
}

.owl-also-like-mobile .owl-next.disabled {
    display: none !important;
}

.owl-new-product .owl-nav {
    position: absolute;
    width: 100%;
    top: calc(50% - 44px);
}

.owl-new-product .owl-prev {
    float: left !important;
    margin-left: -20px !important;
    padding: 10px !important;
    border-radius: 40px !important;
    width: 44px;
    height: 44px;
    background: var(--color-bittersweet-70) !important;
    font-size: 24px !important;
}

.owl-new-product .owl-prev.disabled {
    display: none !important;
}

.owl-new-product .owl-next {
    float: right !important;
    margin-right: -20px !important;
    padding: 10px !important;
    border-radius: 40px !important;
    width: 44px;
    height: 44px;
    background: var(--color-bittersweet-70) !important;
    font-size: 24px !important;
}

.owl-new-product .owl-next.disabled {
    display: none !important;
}

.owl-new-product-mobile .owl-prev {
    padding: 10px !important;
    border-radius: 40px !important;
    width: 44px;
    height: 44px;
    background: var(--color-bittersweet-70) !important;
    font-size: 24px !important;
}

.owl-new-product-mobile .owl-prev.disabled {
    display: none !important;
}

.owl-new-product-mobile .owl-next {
    padding: 10px !important;
    border-radius: 40px !important;
    width: 44px;
    height: 44px;
    background: var(--color-bittersweet-70) !important;
    font-size: 24px !important;
}

.owl-new-product-mobile .owl-next.disabled {
    display: none !important;
}

.owl-main-product .owl-nav {
    position: absolute;
    width: 100%;
    top: 50%;
}

.owl-main-product .owl-prev {
    float: left !important;
    margin-left: -50px !important;
    padding: 2px !important;
    border-radius: 40px !important;
    width: 44px;
    height: 44px;
    background: var(--color-bittersweet) !important;
    font-size: 24px !important;
    opacity: 0.5;
}

.owl-main-product .owl-prev.disabled {
    display: none !important;
}

.owl-main-product .owl-next {
    float: right !important;
    margin-right: -50px !important;
    padding: 2px !important;
    border-radius: 40px !important;
    width: 44px;
    height: 44px;
    background: var(--color-bittersweet) !important;
    font-size: 24px !important;
    opacity: 0.5;
}

.owl-main-product .owl-next.disabled {
    display: none !important;
}

@media screen and (max-width: 767px) {
    .owl-main-product.owl-theme .owl-nav [class*="owl-"] {
        margin: 42px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .owl-main-product.owl-theme .owl-nav [class*="owl-"] {
        margin: -33px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .owl-main-product.owl-theme .owl-nav [class*="owl-"] {
        margin: -33px;
    }
}

@media screen and (min-width: 1280px) {
    .owl-main-product.owl-theme .owl-nav [class*="owl-"] {
        margin: -33px;
    }
}

.card-custom {
    border-radius: 24px;
    box-shadow: 0px 0px 20px 0px #84848433;
}

.card-custom-product {
    border-radius: 16px;
    box-shadow: 0px 0px 20px 0px #84848433;
}

.box-custom {
    box-shadow: 0px 0px 20px 0px #84848433;
}

.box-shadow-custom-sm {
    box-shadow: 0px 0px 10px 0px #84848426;
}

.box-shadow-custom-light {
    box-shadow: 0px 0px 10px 0px #84848426;
}

.box-shadow-green {
    box-shadow: 0px 0px 30px 0px var(--color-green-80);
}

.box-shadow-bittersweet {
    box-shadow: 0px 0px 20px 0px var(--color-bittersweet-80);
}

.box-shadow-grey-10 {
    box-shadow: 0px 0px 10px 0px var(--color-black-50);
}

.box-shadow-grey-20 {
    box-shadow: 0px 0px 20px 0px var(--color-black-50);
}

.box-shadow-violet {
    box-shadow: 0px 0px 20px 0px var(--color-violet-80);
}

.box-shadow-thin-grey {
    box-shadow: 0px 2px 7px 0px var(--color-gray);
}

.box-shadow-thin-grey-with-hover {
    transition-duration: 0.4s;
    box-shadow: 0px 2px 7px 0px var(--color-gray);
}

.box-shadow-thin-grey-with-hover:hover {
    transition-duration: 0.4s;
    box-shadow: 0px 3px 10px 3px var(--color-gray);
}

.box-shadow-thin-grey-to-bottom {
	box-shadow: 0px 5px 7px 0px var(--color-gray);
	-webkit-box-shadow: 0px 5px 7px 0px var(--color-gray);
	-moz-box-shadow: 0px 5px 7px 0px var(--color-gray);
}

.box-shadow-thin-grey-to-bottom-only-hover {
	box-shadow: none;
    transition-duration: 0.4s;
}

.box-shadow-thin-grey-to-bottom-only-hover:hover {
    transition-duration: 0.4s;
	box-shadow: 0px 5px 7px 0px var(--color-gray);
	-webkit-box-shadow: 0px 5px 7px 0px var(--color-gray);
	-moz-box-shadow: 0px 5px 7px 0px var(--color-gray);
}

.tab-notification {
    color: var(--color-black-70);
    font-weight: 700;
    font-size: 18px;
    border-bottom: 2px solid var(--color-softgray);
}

.tab-notification.active {
    color: var(--color-violet);
    border-bottom: 2px solid var(--color-violet);
}

.bg-label-violet {
    background-color: var(--color-violet-50) !important;
    color: var(--color-violet-110);
    border-radius: 8px;
}

.bg-label-bittersweet {
    background-color: var(--color-bittersweet-50) !important;
    color: var(--color-bittersweet-110);
    border-radius: 8px;
}

.bg-label-red {
    background-color: var(--color-red-50) !important;
    color: var(--color-red);
    border-radius: 8px;
}

.bg-label-green {
    background-color: var(--color-green-50) !important;
    color: var(--color-green-110);
    border-radius: 8px;
}

.bg-label-yellow {
    background-color: var(--color-yellow-50) !important;
    color: var(--color-yellow-110);
    border-radius: 8px;
}

.bg-label-blue {
    background-color: var(--color-blue-50) !important;
    color: var(--color-blue-110);
    border-radius: 8px;
}

.bg-label-gray {
    background-color: var(--color-gray-50) !important;
    color: var(--color-gray-110);
    border-radius: 8px;
}

.scrollbar-custom::-webkit-scrollbar {
    width: 10px;
}

.scrollbar-custom::-webkit-scrollbar-thumb {
    background: var(--color-violet-60);
    border-radius: 10px;
}

.scrollbar-custom-black::-webkit-scrollbar {
    width: 10px;
}

.scrollbar-custom-black::-webkit-scrollbar-thumb {
    background: var(--color-black-80);
    border-radius: 10px;
    height: 100px;
}

.border-right {
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important;
}

.border-right-none {
    border-right: none!important;
}

.border-bottom {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important;
}

.border-bottom-none {
    border-bottom: none!important;
}

@media (min-width: 576px) {
    .border-sm-right {
        border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important;
    }

    .border-sm-right-none {
        border-right: none!important;
    }

    .border-sm-bottom {
        border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important;
    }

    .border-sm-bottom-none {
        border-bottom: none!important;
    }
}

.border-8 {
    border-width: 8px !important;
}

.border-softgray {
    --bs-border-opacity: 1;
    border-color: var(--color-softgray) !important;
}

.border-black-50 {
    --bs-border-opacity: 1;
    border-color: var(--color-black-50) !important;
}

.border-violet {
    --bs-border-opacity: 1;
    border-color: var(--color-violet-60) !important;
}

.border-violet-100 {
    --bs-border-opacity: 1;
    border-color: var(--color-violet) !important;
}

.border-black-90 {
    --bs-border-opacity: 1;
    border-color: var(--color-black-90) !important;
}

.border-black-60 {
    border-color: var(--color-black-60) !important;
}

.border-transparent {
    --bs-border-opacity: 1;
    border-color: transparent !important;
}

.border-radius-10-left {
    border-radius: 10px 0 0 10px;
}

.border-radius-10-right {
    border-radius: 0 10px 10px 0;
}

.border-radius-0 {
    border-radius: 0px !important;
}

.border-radius-10 {
    border-radius: 10px !important;
}

.border-radius-15 {
    border-radius: 15px !important;
}

.border-radius-top-20 {
    border-radius: 20px 20px 0 0 !important;
}

.border-radius-20 {
    border-radius: 20px !important;
}

.border-1-solid {
    border: 1px solid;
}

.border-top-1-solid {
    border-top: 1px solid;
}

.border-right-1-solid {
    border-right: 1px solid;
}

.border-left-1-solid {
    border-left: 1px solid;
}

.border-bottom-1-solid {
    border-bottom: 1px solid;
}

.border-white {
    border-color: var(--color-white) !important;
}

.border-violet {
    border-color: var(--color-violet) !important;
}

.border-dashed {
    border-style: dashed !important;
}

.text-black-60.breadcrumb-item + .text-black-60.breadcrumb-item::before {
    color: var(--color-black-60);
}

.body-10 {
    width: 10px;
    height: 10px;
    min-width: 10px !important;
}

.body-16 {
    width: 16px;
    height: 16px;
    min-width: 16px !important;
}

.body-20 {
    width: 20px;
    height: 20px;
    min-width: 20px !important;
}

.body-24 {
    width: 24px;
    height: 24px;
    min-width: 24px !important;
}

.body-40 {
    width: 40px;
    height: 40px;
    min-width: 40px !important;
}

.body-48 {
    width: 48px;
    height: 48px;
    min-width: 48px !important;
}

.body-100 {
    width: 100px;
    height: 100px;
    min-width: 100px !important;
}

.body-150 {
    width: 150px;
    height: 150px;
    min-width: 150px !important;
}

.body-200 {
    width: 200px;
    height: 200px;
    min-width: 200px !important;
}

.rounded-100 {
    border-radius: 100px !important;
}

.rounded-40 {
    border-radius: 40px !important;
}

.rounded-32 {
    border-radius: 32px !important;
}

.rounded-24 {
    border-radius: 24px;
}

.rounded-16 {
    border-radius: 16px;
}

.rounded-12 {
    border-radius: 12px;
}

.rounded-10 {
    border-radius: 10px;
}

.rounded-8 {
    border-radius: 8px;
}

@media (min-width: 768px) {
    .w-md-auto {
        width: auto !important;
    }
}

@media (min-width: 992px) {
    .mt-n15 {
        margin-top: -15rem !important;
    }
}

.cursor-default {
    cursor: default;
}

.cursor-pointer {
    cursor: pointer;
}

.main-product .breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-white);
}

.invalid-feedback-custom {
    display: none;
    width: 100%;
    margin-top: 0.5rem;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-red);
}

.was-validated-custom :valid ~ .valid-feedback,
.was-validated-custom :valid ~ .valid-tooltip,
.is-valid-custom ~ .valid-feedback,
.is-valid-custom ~ .valid-tooltip {
    display: block;
}

.was-validated-custom .form-control:valid,
.form-control.is-valid-custom {
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20ZM9.0026 14L16.0737 6.92893L14.6595 5.51472L9.0026 11.1716L6.17421 8.3431L4.75999 9.7574L9.0026 14Z' fill='%2330A81C'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.6rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated-custom textarea.form-control:valid,
textarea.form-control.is-valid-custom {
    padding-right: calc(1.5em + 0.75rem);
    background-position: top calc(0.375em + 0.1875rem) right
        calc(0.375em + 0.1875rem);
}

.was-validated-custom .form-select:valid,
.form-select.is-valid-custom {
    border-color: var(--bs-form-valid-border-color);
}
.was-validated-custom .form-select:valid:not([multiple]):not([size]),
.was-validated-custom .form-select:valid:not([multiple])[size="1"],
.form-select.is-valid-custom:not([multiple]):not([size]),
.form-select.is-valid-custom:not([multiple])[size="1"] {
    --bs-form-select-bg-icon: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20ZM9.0026 14L16.0737 6.92893L14.6595 5.51472L9.0026 11.1716L6.17421 8.3431L4.75999 9.7574L9.0026 14Z' fill='%2330A81C'/%3e%3c/svg%3e");
    padding-right: 4.125rem;
    background-position: right 0.75rem center, center right 2.25rem;
    background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated-custom .form-select:valid:focus,
.form-select.is-valid-custom:focus {
    border-color: var(--bs-form-valid-border-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}

.was-validated-custom .form-control-color:valid,
.form-control-color.is-valid-custom {
    width: calc(3rem + calc(1.5em + 0.75rem));
}

.was-validated-custom .form-check-input:valid,
.form-check-input.is-valid-custom {
    border-color: var(--bs-form-valid-border-color);
}
.was-validated-custom .form-check-input:valid:checked,
.form-check-input.is-valid-custom:checked {
    background-color: var(--bs-form-valid-color);
}
.was-validated-custom .form-check-input:valid:focus,
.form-check-input.is-valid-custom:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}
.was-validated-custom .form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid-custom ~ .form-check-label {
    color: var(--bs-form-valid-color);
}

.form-check-inline .form-check-input ~ .valid-feedback {
    margin-left: 0.5em;
}

.was-validated-custom .input-group > .form-control:not(:focus):valid,
.input-group > .form-control:not(:focus).is-valid-custom,
.was-validated-custom .input-group > .form-select:not(:focus):valid,
.input-group > .form-select:not(:focus).is-valid-custom,
.was-validated-custom .input-group > .form-floating:not(:focus-within):valid,
.input-group > .form-floating:not(:focus-within).is-valid-custom {
    z-index: 3;
}

.was-validated-custom :invalid ~ .invalid-feedback,
.was-validated-custom :invalid ~ .invalid-tooltip,
.is-invalid-custom ~ .invalid-feedback,
.is-invalid-custom ~ .invalid-tooltip {
    display: block;
}

.was-validated-custom .form-control:invalid,
.form-control.is-invalid-custom,
.form-control.is-invalid-custom + .input-group-text {
    border-color: var(--color-red);
}
.was-validated-custom .form-control:invalid:focus,
.form-control.is-invalid-custom:focus {
    border-color: var(--color-red);
}

.was-validated-custom textarea.form-control:invalid,
textarea.form-control.is-invalid-custom {
    padding-right: calc(1.5em + 0.75rem);
    background-position: top calc(0.375em + 0.1875rem) right
        calc(0.375em + 0.1875rem);
}

.was-validated-custom .form-select:invalid,
.form-select.is-invalid-custom {
    border-color: var(--color-red);
}

.was-validated-custom .form-select:invalid:focus,
.form-select.is-invalid-custom:focus {
    border-color: var(--color-red);
}

.was-validated-custom .form-control-color:invalid,
.form-control-color.is-invalid-custom {
    width: calc(3rem + calc(1.5em + 0.75rem));
}

.was-validated-custom .form-check-input:invalid,
.form-check-input.is-invalid-custom {
    border-color: var(--color-red);
}
.was-validated-custom .form-check-input:invalid:checked,
.form-check-input.is-invalid-custom:checked {
    background-color: var(--bs-form-invalid-color);
}

.was-validated-custom .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid-custom ~ .form-check-label {
    color: var(--bs-form-invalid-color);
}

.form-check-inline .form-check-input ~ .invalid-feedback {
    margin-left: 0.5em;
}

.was-validated-custom .input-group > .form-control:not(:focus):invalid,
.input-group > .form-control:not(:focus).is-invalid-custom,
.was-validated-custom .input-group > .form-select:not(:focus):invalid,
.input-group > .form-select:not(:focus).is-invalid-custom,
.was-validated-custom .input-group > .form-floating:not(:focus-within):invalid,
.input-group > .form-floating:not(:focus-within).is-invalid-custom {
    z-index: 4;
}

.form-otp {
    border: 1px solid var(--color-black-50);
    border-radius: 12px;
    width: 50px;
    height: 50px;
    font-size: 28px;
    text-align: center;
    color: var(--color-black);
}

.form-otp:focus {
    border: 1px solid var(--color-black);
}

.form-otp.fill {
    border: 1px solid var(--color-violet);
}

@media (min-width: 768px) {
    .form-otp {
        border-radius: 14px;
        width: 58px;
        height: 58px;
        font-size: 30px;
    }
}

@media (min-width: 992px) {
    .form-otp {
        border-radius: 16px;
        width: 72px;
        height: 72px;
        font-size: 32px;
    }
}

.photo-profile {
    border-radius: 50%;
}

nav .photo-profile {
    width: 40px;
}

.tidy-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.product-image-thumb:hover {
    opacity: 0.8;
}

.product-image-thumb.active {
    border: 4px solid var(--color-violet-60);
}

.circle {
    border-radius: 50% !important;
}

@media (min-width: 576px) {
    .h-sm-180 {
        height: 180px;
    }
}

.btn-play-youtube:hover {
    opacity: 0.7;
}

/* Drop Image Feature */
.preview-box {
    position: relative;
    background: #ffffff;
    width: 100%;
}

.preview-box-header {
    color: #444;
    display: block;
    padding: 10px;
    position: relative;
    border-bottom: 1px solid #f4f4f4;
    margin-bottom: 10px;
}

.preview-box-tools {
    position: absolute;
    right: 10px;
    top: 5px;
}

.dropzone-wrapper {
    border: 2px dashed var(--color-black-50);
    color: var(--color-black-50);
    position: relative;
    height: 150px;
    border-radius: 15px;
}

.dropzone-desc {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center;
    width: 40%;
    top: 50px;
    font-size: 16px;
}

.dropzone,
.dropzone:focus {
    position: absolute;
    outline: none !important;
    width: 100%;
    height: 150px;
    cursor: pointer;
    opacity: 0;
}

.dropzone-wrapper:hover,
.dropzone-wrapper.dragover {
    background: #ecf0f5;
}

.preview-zone {
    text-align: center;
}

.preview-zone .preview-box {
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
}

table thead.th-violet-90 tr th {
    background: var(--color-violet-90) !important;
    color: var(--color-white) !important;
}

.partnership-pricelist-card {

}

.partnership-pricelist-card sup {
    top: -0.75rem;
}

.partnership-pricelist-card .badge-pricelist-popular {
    top: -20px;
}

.partnership-pricelist-card .card-footer {
    border-top: transparent;
}

.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text {
    box-shadow: none;
}
.input-group.disabled .input-group-text {
    background-color: #eceef1;
}

.input-group-text {
    background-clip: padding-box;
}
.input-group-text i {
    font-size: 0.9375rem;
}

.input-group-lg > .input-group-text i {
    font-size: 1rem;
}

.input-group-sm > .input-group-text i {
    font-size: 0.75rem;
}

.input-group-merge .input-group-text:first-child {
    border-right: 0;
}
.input-group-merge .input-group-text:last-child {
    border-left: 0;
}
.input-group-merge .form-control:not(:first-child) {
    padding-left: 0;
    border-left: 0;
}
.input-group-merge .form-control:not(:last-child) {
    padding-right: 0;
    border-right: 0;
}

.input-group-text {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .input-group-text {
        transition: none;
    }
}

.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text {
  border-color: #696cff;
}

.mt-banner-about-us {
    margin-top: 5.3rem;
}

@media (min-width: 768px) {
    .mt-banner-about-us {
        margin-top: 7.5rem;
    }
}

.vh-80 {
    height: 80vh !important;
}

.faq-clickable {
    cursor: pointer;
}

.faq-clickable:hover {
    background: var(--color-violet-60);
    color: var(--color-violet);
}

.faq-active {
    background: var(--color-violet-60);
    color: var(--color-violet);
}

.faq-body ol li {
    margin-bottom: 1rem;
}

.owl-referral-how-to.owl-theme .owl-nav, .owl-home-banner.owl-theme .owl-nav {
    margin-top: -4rem !important;
    position: absolute;
    width: 100%;
}

.owl-referral-how-to .owl-nav, .owl-home-banner .owl-nav {
    position: absolute;
    width: 100%;
    top: 50%;
}

.owl-referral-how-to .owl-prev, .owl-home-banner .owl-prev {
    float: left !important;
    margin-left: 15px !important;
    padding: 10px !important;
    border-radius: 40px !important;
    width: 50px;
    height: 50px;
    background: var(--color-violet-50) !important;
    font-size: 20px !important;
}

.owl-referral-how-to .owl-prev.disabled, .owl-home-banner .owl-prev.disabled {
    display: none !important;
}

.owl-referral-how-to .owl-next, .owl-home-banner .owl-next {
    float: right !important;
    margin-right: 15px !important;
    padding: 10px !important;
    border-radius: 40px !important;
    width: 50px;
    height: 50px;
    background: var(--color-violet-50) !important;
    font-size: 20px !important;
}

.owl-referral-how-to .owl-next.disabled, .owl-home-banner .owl-next.disabled {
    display: none !important;
}

.ul-fa-check-circle-success ul, .ul-fa-check-success ul, .ul-fa-check-white ul {
	padding: 0 15px;
}

.ul-fa-check-circle-success ul li, .ul-fa-check-success ul li, .ul-fa-check-white ul li {
	padding-left: 5px;
}

.ul-fa-check-circle-success ul li::marker, .ul-fa-check-success ul li::marker, .ul-fa-check-white ul li::marker {
	font: normal normal normal 14px/1 FontAwesome;
    padding-left: 0; /* Adjust as needed */
}

.ul-fa-check-circle-success ul li::marker {
    content: "\f058"; /* Unicode for the green check-circle icon */
    color: var(--color-success-500); /* Set the color to green or your preferred color */
}

.ul-fa-check-success ul li::marker {
    content: "\f00c"; /* Unicode for the green check-circle icon */
    color: var(--color-success-500); /* Set the color to green or your preferred color */
}

.ul-fa-check-white ul li::marker {
    content: "\f00c"; /* Unicode for the green check-circle icon */
    color: var(--color-white); /* Set the color to green or your preferred color */
}

.ratio-3x2 {
    --bs-aspect-ratio: calc(2 / 3 * 100%);
}

.ratio-5x4 {
    --bs-aspect-ratio: calc(4 / 5 * 100%);
}

.what-is {
    margin-top: 10rem !important;
}

@media (max-width: 768px) {
    .what-is {
        margin-top: 0rem !important;
    }
}

/* .product-categories {
    min-width: 8rem;
} */

@media (max-width: 768px) {
    /* .product-categories {
        min-width: auto;
    } */

    .btn-group-product-categories {
        /* overflow-x: auto;  */
        /* max-width: 100%;  */
        /* white-space: nowrap;
        width: 100%;
        overflow-x: scroll; */
    }
}

/* Initially hide all category buttons */
.product-categories {
    display: inline-block;
}

/* Show only the active category button */
.product-categories.active {
    display: inline-block;
}

.rounded-start-pill-mobile {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

/* Media query for mobile devices */
@media only screen and (max-width: 767px) {
    /* Hide all buttons initially */
    .product-categories {
        display: none;
    }

    /* Show burger bar button */
    #showCategoriesButton {
        display: inline-block;
    }

    /* Show active category button when burger bar is open */
    #categoriesContainer.show-categories .product-categories.active {
        display: inline-block;
    }

    .rounded-start-pill-mobile {
        border-bottom-left-radius: var(--bs-border-radius-pill) !important;
        border-top-left-radius: var(--bs-border-radius-pill) !important;
    }
}