:root {
    --mantine-color-primary-0: #f3eefb;
    --mantine-color-primary-1: #e3d9f3;
    --mantine-color-primary-2: #c5aee7;
    --mantine-color-primary-3: #a682dd;
    --mantine-color-primary-4: #8b5cd3;
    --mantine-color-primary-5: #7b44ce;
    --mantine-color-primary-6: #7338cc;
    --mantine-color-primary-7: #622bb5;
    --mantine-color-primary-8: #5726a2;
    --mantine-color-primary-9: #4a1f8f;
}
:root[data-mantine-color-scheme="dark"] {
    --mantine-color-primary-filled: #5726a2;
    --mantine-color-primary-filled-hover: #4a1f8f;
    --mantine-color-primary-light: rgba(115, 56, 204, 0.15);
    --mantine-color-primary-light-hover: rgba(115, 56, 204, 0.2);
    --mantine-color-primary-light-color: #a682dd;
    --mantine-color-primary-outline: #8b5cd3;
    --mantine-color-primary-outline-hover: rgba(139, 92, 211, 0.05);
}
:root[data-mantine-color-scheme="light"] {
    --mantine-color-primary-filled: #7338cc;
    --mantine-color-primary-filled-hover: #622bb5;
    --mantine-color-primary-light: rgba(115, 56, 204, 0.1);
    --mantine-color-primary-light-hover: rgba(115, 56, 204, 0.12);
    --mantine-color-primary-light-color: #7338cc;
    --mantine-color-primary-outline: #7338cc;
    --mantine-color-primary-outline-hover: rgba(115, 56, 204, 0.05);
}
:root {
    --mantine-color-green-filled: #31b950;
    --mantine-color-green-filled-hover: #34ac4e;
    --mantine-color-white: #ffffff;
}

@media (max-width: 35.99375em) {
    .mantine-visible-from-xs {
        display: none !important;
    }
}
@media (min-width: 36em) {
    .mantine-hidden-from-xs {
        display: none !important;
    }
}
@media (max-width: 47.99375em) {
    .mantine-visible-from-sm {
        display: none !important;
    }
}
@media (min-width: 48em) {
    .mantine-hidden-from-sm {
        display: none !important;
    }
}
@media (max-width: 61.99375em) {
    .mantine-visible-from-md {
        display: none !important;
    }
}
@media (min-width: 62em) {
    .mantine-hidden-from-md {
        display: none !important;
    }
}
@media (max-width: 74.99375em) {
    .mantine-visible-from-lg {
        display: none !important;
    }
}
@media (min-width: 75em) {
    .mantine-hidden-from-lg {
        display: none !important;
    }
}
@media (max-width: 87.99375em) {
    .mantine-visible-from-xl {
        display: none !important;
    }
}
@media (min-width: 88em) {
    .mantine-hidden-from-xl {
        display: none !important;
    }
}
:root {
    --app-shell-header-height: calc(4.375rem * var(--mantine-scale));
    --app-shell-footer-height: calc(3.125rem * var(--mantine-scale));
    --app-shell-footer-offset: calc(3.125rem * var(--mantine-scale));
    --app-shell-padding: 0px;
}

:root {
    --mantine-color-lime-filled: #a2d642;
    --mantine-color-white: #ffffff;
    --mantine-scale: 1;
    --ti-size-sm: 1rem; /* contoh */
}

:root {
    --mantine-color-orange-filled: #f97316;
    --mantine-color-orange-filled-hover: #ea580c;
    --mantine-color-white: #ffffff;
    --mantine-radius-md: 8px;
    --mantine-scale: 1;
}

:root {
    --modal-y-offset: 2rem;
    --modal-x-offset: 1.5rem;
    --_inner-align: center;
}