.bg-red-50 {
    -webkit-text-size-adjust: 100%;
    font-family: 'Inter';
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    border-style: solid;
    margin-top: 0.5rem;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(254 202 202 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity));
    padding: 1rem;
    --tw-text-opacity: 1;
    color: rgb(153 27 27 / var(--tw-text-opacity));
}

.bg-blue-100 {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
    line-height: inherit;
    box-sizing: border-box;
    border-style: solid;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(191 219 254 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity));
    padding: 1rem;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity));
}

.bg-gray-50 {
    font-family: 'Inter';
    box-sizing: border-box;
    border-style: solid;
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
    padding: 1rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity));
}





.Notif_Badge_Baru {
    --color-R500: #e52424;
    --color-R400: #f15c59;
    --color-R300: #fc7474;
    --color-R200: #ffb9b9;
    --color-R100: #ffdfdf;
    --color-N900: #18191b;
    --color-N800: #303135;
    --color-N700: #4d4f56;
    --color-N600: #71747d;
    --color-N500: #8c909e;
    --color-N400: #aeb2be;
    --color-N300: #c0c3cf;
    --color-N200: #d8dce8;
    --color-N100: #f4f7fe;
    --color-N50: #f8f9fd;
    --color-N0: #fff;
    --gradient-gg100: #01cf6c;
    --gradient-gg200: #02cd9c;
    --gradient-gv100: #18dc9b;
    --gradient-gv200: #6e54ef;
    --gradient-go100: #e52424;
    --gradient-go200: #ff7200;
    --gradient-gr100: #ff4062;
    --gradient-gr200: #ff00b8;
    --gradient-gt100: #00cc9b;
    --gradient-gt200: #017cff;
    --gradient-gb100: #007bff;
    --gradient-gb200: #00c1eb;
    --gradient-gl100: #e7f2ff;
    --gradient-gl200: #d9eafe;
    --gradient-gp100: #fa00b4;
    --gradient-gp200: #7600d2;
    --gradient-gts100: #47506f;
    --gradient-gts200: #cbd6ec;
    --gradient-gtgo100: #614500;
    --gradient-gtgo200: #ebbf4f;
    --gradient-gtp100: #0f0f0f;
    --gradient-gtp200: #838990;
    --gradient-gtd100: #000208;
    --gradient-gtd200: #1258c9;
    --gradient-gpl100: #4d4f56;
    --gradient-gpl200: #191a1c;
    --gradient-ggo100: #fffbee;
    --gradient-ggo200: #f4e3b0;
    --gradient-gs100: #e7eefe;
    --gradient-gs200: #dce1f2;
    --gradient-gso100: #727a96;
    --gradient-gso200: #3f4964;
    --color-gradient-green: linear-gradient(to right,var(--gradient-gg100),var(--gradient-gg200));
    --color-gradient-viola: linear-gradient(to right,var(--gradient-gv100),var(--gradient-gv200));
    --color-gradient-orange: linear-gradient(to right,var(--gradient-go100),var(--gradient-go200));
    --color-gradient-red: linear-gradient(to right,var(--gradient-gr100),var(--gradient-gr200));
    --color-gradient-tosca: linear-gradient(to right,var(--gradient-gt100),var(--gradient-gt200));
    --color-gradient-blue: linear-gradient(to right,var(--gradient-gb100),var(--gradient-gb200));
    --color-gradient-purple: linear-gradient(to right,var(--gradient-gp100),var(--gradient-gp200));
    --color-gradient-light-blue: linear-gradient(to right,var(--gradient-gl100),var(--gradient-gl200));
    --color-gradient-tier-silver: linear-gradient(to right,var(--gradient-gts100),var(--gradient-gts200));
    --color-gradient-tier-gold: linear-gradient(to right,var(--gradient-gtgo100),var(--gradient-gtgo200));
    --color-gradient-tier-platinum: linear-gradient(to right,var(--gradient-gtp100),var(--gradient-gtp200));
    --color-gradient-tier-diamond: linear-gradient(to right,var(--gradient-gtd100),var(--gradient-gtd200));
    --color-gradient-platinum-old: linear-gradient(to right,var(--gradient-gpl100),var(--gradient-gpl200));
    --color-gradient-gold-old: linear-gradient(to right,var(--gradient-ggo100),var(--gradient-ggo200));
    --color-gradient-silver-old: linear-gradient(to right,var(--gradient-gs100),var(--gradient-gs200));
    --color-gradient-sodalite-old: linear-gradient(to right,var(--gradient-gso100),var(--gradient-gso200));
    --font-color-high-emphasis: var(--color-N800);
    --font-color-low-emphasis: var(--color-N600);
    --font-color-disabled: var(--color-N400);
    --font-color-alert: var(--color-R400);
    --font-color-activity: var(--color-B400);
    --font-color-positive: var(--color-G500);
    --font-color-price: var(--color-R500);
    --font-color-analytics: var(--color-O500);
    --font-color-usp: var(--color-T500);
    --font-color-invert: var(--color-N0);
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-size-mobile-h1-px: 32px;
    --line-height-mobile-h1-px: 38px;
    --font-size-mobile-h2-px: 22px;
    --line-height-mobile-h2-px: 28px;
    --font-size-mobile-h3-px: 18px;
    --line-height-mobile-h3-px: 24px;
    --font-size-mobile-b1-px: 16px;
    --line-height-mobile-b1-px: 22px;
    --font-size-mobile-b2-px: 14px;
    --line-height-mobile-b2-px: 20px;
    --font-size-mobile-b3-px: 12px;
    --line-height-mobile-b3-px: 16px;
    --font-size-mobile-sm-px: 10px;
    --line-height-mobile-sm-px: 14px;
    --font-size-mobile-h1-rem: 2rem;
    --line-height-mobile-h1-rem: 2.375rem;
    --font-size-mobile-h2-rem: 1.375rem;
    --line-height-mobile-h2-rem: 1.75rem;
    --font-size-mobile-h3-rem: 1.125rem;
    --line-height-mobile-h3-rem: 1.5rem;
    --font-size-mobile-b1-rem: 1rem;
    --line-height-mobile-b1-rem: 1.375rem;
    --font-size-mobile-b2-rem: 0.875rem;
    --line-height-mobile-b2-rem: 1.25rem;
    --font-size-mobile-b3-rem: 0.75rem;
    --line-height-mobile-b3-rem: 1rem;
    --font-size-mobile-sm-rem: 0.625rem;
    --line-height-mobile-sm-rem: 0.875rem;
    --font-size-mobile-h1: var(--font-size-mobile-h1-px);
    --line-height-mobile-h1: var(--line-height-mobile-h1-px);
    --font-size-mobile-h2: var(--font-size-mobile-h2-px);
    --line-height-mobile-h2: var(--line-height-mobile-h2-px);
    --font-size-mobile-h3: var(--font-size-mobile-h3-px);
    --line-height-mobile-h3: var(--line-height-mobile-h3-px);
    --font-size-mobile-b1: var(--font-size-mobile-b1-px);
    --line-height-mobile-b1: var(--line-height-mobile-b1-px);
    --font-size-mobile-b2: var(--font-size-mobile-b2-px);
    --line-height-mobile-b2: var(--line-height-mobile-b2-px);
    --font-size-mobile-b3: var(--font-size-mobile-b3-px);
    --line-height-mobile-b3: var(--line-height-mobile-b3-px);
    --font-size-mobile-sm: var(--font-size-mobile-sm-px);
    --line-height-mobile-sm: var(--line-height-mobile-sm-px);
    --font-size-desktop-h1: 56px;
    --line-height-desktop-h1: 60px;
    --font-size-desktop-h2: 38px;
    --line-height-desktop-h2: 42px;
    --font-size-desktop-h3: 24px;
    --line-height-desktop-h3: 30px;
    --font-size-desktop-b1: 18px;
    --line-height-desktop-b1: 24px;
    --font-size-desktop-b2: 16px;
    --line-height-desktop-b2: 22px;
    --font-size-desktop-b3: 14px;
    --line-height-desktop-b3: 20px;
    --font-size-desktop-sm: 12px;
    --line-height-desktop-sm: 16px;
    --font-size-desktop-xs: 10px;
    --line-height-desktop-xs: 14px;
    --font-size-h1: var(--font-size-mobile-h1);
    --line-height-h1: var(--line-height-mobile-h1);
    --font-size-h2: var(--font-size-mobile-h2);
    --line-height-h2: var(--line-height-mobile-h2);
    --font-size-h3: var(--font-size-mobile-h3);
    --line-height-h3: var(--line-height-mobile-h3);
    --font-size-b1: var(--font-size-mobile-b1);
    --line-height-b1: var(--line-height-mobile-b1);
    --font-size-b2: var(--font-size-mobile-b2);
    --line-height-b2: var(--line-height-mobile-b2);
    --font-size-b3: var(--font-size-mobile-b3);
    --line-height-b3: var(--line-height-mobile-b3);
    --font-size-sm: var(--font-size-mobile-sm);
    --line-height-sm: var(--line-height-mobile-sm);
    --font-size-xs: var(--font-size-mobile-sm);
    --line-height-xs: var(--line-height-mobile-sm);
    --gutter-8: 8px;
    --gutter-12: 12px;
    --gutter-16: 16px;
    --gutter-24: 24px;
    --edge-padding: 20px;
    --container-max-width: none;
    --color-shadow-rgb: 48,49,53;
    --elevation-1: 0 2px 8px rgba(var(--color-shadow-rgb),0.16);
    --elevation-2: 0 4px 12px rgba(var(--color-shadow-rgb),0.2);
    --space-2: 2px;
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --layout-8: 8px;
    --layout-12: 12px;
    --layout-16: 16px;
    --layout-24: 24px;
    --layout-32: 32px;
    --layout-48: 48px;
    --layout-64: 64px;
    --layout-96: 96px;
    --layout-128: 128px;
    --z-loading-with-illustration: 1100;
    --z-snackbar: 1001;
    --z-bottom-sheet: 1000;
    --z-tooltip: 999;
    --color-blanket-rgb: 24,25,27;
    --bg-color-blanket: rgba(var(--color-blanket-rgb),0.4);
    --safe-area-top: env(safe-area-inset-top,0);
    --safe-area-bottom: env(safe-area-inset-bottom,0);
    --safe-area-left: env(safe-area-inset-left,0);
    --safe-area-right: env(safe-area-inset-right,0);
    --space-6: 6px;
    --space-10: 10px;
    --space-20: 20px;
    --space-32: 32px;
    --space-40: 40px;
    --safe-inset-top: env(safe-area-inset-top);
    --safe-inset-bottom: env(safe-area-inset-bottom);
    --negative-edge-padding: calc(var(--edge-padding) * -1);
    --color-background: var(--color-N200);
    --z-index-100: 100;
    --z-index-200: 200;
    --z-index-300: 300;
    --z-index-400: 400;
    --z-index-500: 500;
    --z-index-600: 600;
    --z-index-700: 700;
    --z-index-800: 800;
    --z-index-900: 900;
    --z-index-1000: 1000;
    -webkit-font-smoothing: antialiased;
    text-transform: none;
    font: inherit;
    user-select: none;
    cursor: pointer;
    box-sizing: border-box;
    color: var(--font-color-invert);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    width: max-content;
    display: block;
    border: 2px solid var(--color-N0);
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: var(--badge-background-color);
    border-radius: 999px;
    padding: 0 var(--space-4);
    min-width: calc(var(--line-height-sm) + 4px);
    min-height: calc(var(--line-height-sm) + 4px);
    --badge-background-color: var(--color-R500);
    animation: Notif_shimmer-label__9GhIV 1.3s ease-in-out infinite;
    background-image: linear-gradient(90deg,transparent,hsla(0,0%,100%,.5),transparent);
    background-size: 30px 100%;
    background-repeat: no-repeat;
    background-position-x: calc(67.6203% + 10.5722px);
    background-position-y: 0px;
}

@keyframes Notif_shimmer-label__9GhIV {
    0% {
        background-position: -30px 0
    }

    70%,to {
        background-position: calc(30px + 100%) 0
    }
}

.box-notes {
width:92%;margin-top:20px;margin-left:26px;
}
@media only screen
and (min-width : 50px)
and (max-width : 800px) {
.box-notes {
width:89% !important;
margin-left:21px;
}
}