/* Custom Font Size */
.fs-7 { font-size: 0.875rem !important; } /* 14px */
.fs-8 { font-size: 0.75rem !important; }  /* 12px */
.fs-9 { font-size: 0.6875rem !important; }/* 11px */
.fs-10 { font-size: 0.625rem !important; }/* 10px */
.fs-11 { font-size: 0.9375rem !important; } /* 15px */
.fs-12 { font-size: 1rem !important; }      /* 16px */
.fs-13 { font-size: 1.0625rem !important; } /* 17px */
.fs-14 { font-size: 1.125rem !important; }  /* 18px */
.fs-15 { font-size: 1.1875rem !important; } /* 19px */
.fs-16 { font-size: 1.25rem !important; }   /* 20px */
.fs-17 { font-size: 1.3125rem !important; } /* 21px */
.fs-18 { font-size: 1.375rem !important; }  /* 22px */
.fs-19 { font-size: 1.4375rem !important; } /* 23px */
.fs-20 { font-size: 1.5rem !important; }    /* 24px */
.fs-21 { font-size: 1.5625rem !important; } /* 25px */
.fs-22 { font-size: 1.625rem !important; }  /* 26px */
.fs-23 { font-size: 1.6875rem !important; } /* 27px */
.fs-24 { font-size: 1.75rem !important; }   /* 28px */
.fs-25 { font-size: 1.8125rem !important; } /* 29px */
.fs-26 { font-size: 1.875rem !important; }  /* 30px */

/* Custom Border Radius */
.rounded-4   { border-radius: 4px !important; }
.rounded-6   { border-radius: 6px !important; }
.rounded-8   { border-radius: 8px !important; }
.rounded-10  { border-radius: 10px !important; }
.rounded-12  { border-radius: 12px !important; }
.rounded-16  { border-radius: 16px !important; }
.rounded-20  { border-radius: 20px !important; }
.rounded-24  { border-radius: 24px !important; }
.rounded-50  { border-radius: 50% !important; }

/* Custom Top Border Radius */
/* Top Border Radius */
.rounded-top-8  { border-top-left-radius: 8px !important;  border-top-right-radius: 8px !important;  }
.rounded-top-10 { border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; }
.rounded-top-12 { border-top-left-radius: 12px !important; border-top-right-radius: 12px !important; }
.rounded-top-16 { border-top-left-radius: 16px !important; border-top-right-radius: 16px !important; }

/* Bottom Border Radius */
.rounded-bottom-8  { border-bottom-left-radius: 8px !important;  border-bottom-right-radius: 8px !important;  }
.rounded-bottom-10 { border-bottom-left-radius: 10px !important; border-bottom-right-radius: 10px !important; }
.rounded-bottom-12 { border-bottom-left-radius: 12px !important; border-bottom-right-radius: 12px !important; }
.rounded-bottom-16 { border-bottom-left-radius: 16px !important; border-bottom-right-radius: 16px !important; }

/* Custom Gap */
.gap-4  { gap: 0.25rem !important; }  /* 4px */
.gap-6  { gap: 0.375rem !important; } /* 6px */
.gap-8  { gap: 0.5rem !important; }   /* 8px */
.gap-10 { gap: 0.625rem !important; } /* 10px */
.gap-12 { gap: 0.75rem !important; }  /* 12px */
.gap-16 { gap: 1rem !important; }     /* 16px */
.gap-18 { gap: 1.125rem !important; } /* 18px */
.gap-20 { gap: 1.25rem !important; }  /* 20px */
.gap-24 { gap: 1.5rem !important; }   /* 24px */
.gap-28 { gap: 1.75rem !important; }  /* 28px */
.gap-32 { gap: 2rem !important; }     /* 32px */
.gap-36 { gap: 2.25rem !important; }  /* 36px */
.gap-40 { gap: 2.5rem !important; }   /* 40px */
.gap-48 { gap: 3rem !important; }     /* 48px */
.gap-56 { gap: 3.5rem !important; }   /* 56px */
.gap-64 { gap: 4rem !important; }     /* 64px */

/* Custom Height (Non-Bootstrap) */
.h-15  { height: 15px !important; }
.h-20  { height: 20px !important; }
.h-30  { height: 30px !important; }
.h-35  { height: 35px !important; }
.h-40  { height: 40px !important; }
.h-45  { height: 45px !important; }
.h-55  { height: 55px !important; }
.h-60  { height: 60px !important; }
.h-65  { height: 65px !important; }
.h-70  { height: 70px !important; }
.h-80  { height: 80px !important; }
.h-85  { height: 85px !important; }
.h-90  { height: 90px !important; }
.h-95  { height: 95px !important; }
.h-120 { height: 120px !important; }
.h-150 { height: 150px !important; }
.h-200 { height: 200px !important; }

/* Custom Min Height */
.min-h-15  { min-height: 15px !important; }
.min-h-20  { min-height: 20px !important; }
.min-h-25  { min-height: 25px !important; } /* Bootstrap biasanya tidak punya ini */
.min-h-30  { min-height: 30px !important; }
.min-h-35  { min-height: 35px !important; }
.min-h-40  { min-height: 40px !important; }
.min-h-45  { min-height: 45px !important; }
.min-h-50  { min-height: 50px !important; } /* aman */
.min-h-60  { min-height: 60px !important; }
.min-h-80  { min-height: 80px !important; }
.min-h-100 { min-height: 100px !important; }

/* Custom Width (Non-Bootstrap) */
.w-15  { width: 15px !important; }
.w-20  { width: 20px !important; }
.w-30  { width: 30px !important; }
.w-35  { width: 35px !important; }
.w-40  { width: 40px !important; }
.w-45  { width: 45px !important; }
.w-55  { width: 55px !important; }
.w-60  { width: 60px !important; }
.w-65  { width: 65px !important; }
.w-70  { width: 70px !important; }
.w-80  { width: 80px !important; }
.w-85  { width: 85px !important; }
.w-90  { width: 90px !important; }
.w-95  { width: 95px !important; }
.w-120 { width: 120px !important; }
.w-150 { width: 150px !important; }
.w-200 { width: 200px !important; }

/* Custom Min Width (Non-Bootstrap) */
.min-w-15  { min-width: 15px !important; }
.min-w-20  { min-width: 20px !important; }
.min-w-30  { min-width: 30px !important; }
.min-w-35  { min-width: 35px !important; }
.min-w-40  { min-width: 40px !important; }
.min-w-45  { min-width: 45px !important; }
.min-w-50  { min-width: 50px !important; } /* Bootstrap biasanya tidak punya ini */
.min-w-60  { min-width: 60px !important; }
.min-w-80  { min-width: 80px !important; }

/* Custom Max Width (Non-Bootstrap) */
.max-w-15  { max-width: 15px !important; }
.max-w-20  { max-width: 20px !important; }
.max-w-30  { max-width: 30px !important; }
.max-w-35  { max-width: 35px !important; }
.max-w-40  { max-width: 40px !important; }
.max-w-45  { max-width: 45px !important; }
.max-w-50  { max-width: 50px !important; }
.max-w-60  { max-width: 60px !important; }
.max-w-80  { max-width: 80px !important; }
.max-w-100 { max-width: 100px !important; }

/* Custom Shadow */
.shadow-inset-glow-sm {
    box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.18) inset !important;
}

.shadow-inset-glow {
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.24) inset !important;
}

.shadow-inset-glow-lg {
    box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.28) inset !important;
}

.shadow-glow-sm {
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.18) !important;
}

.shadow-glow {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.24) !important;
}

.shadow-glow-lg {
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.30) !important;
}

/* Custom Margin 5px - 50px */
/* Semua Sisi */
.m-5   { margin: 5px !important; }
.m-10  { margin: 10px !important; }
.m-15  { margin: 15px !important; }
.m-20  { margin: 20px !important; }
.m-25  { margin: 25px !important; }
.m-30  { margin: 30px !important; }
.m-35  { margin: 35px !important; }
.m-40  { margin: 40px !important; }
.m-45  { margin: 45px !important; }
.m-50  { margin: 50px !important; }

/* Margin Top */
.mt-5   { margin-top: 5px !important; }
.mt-10  { margin-top: 10px !important; }
.mt-15  { margin-top: 15px !important; }
.mt-20  { margin-top: 20px !important; }
.mt-25  { margin-top: 25px !important; }
.mt-30  { margin-top: 30px !important; }
.mt-35  { margin-top: 35px !important; }
.mt-40  { margin-top: 40px !important; }
.mt-45  { margin-top: 45px !important; }
.mt-50  { margin-top: 50px !important; }

/* Margin Bottom */
.mb-5   { margin-bottom: 5px !important; }
.mb-10  { margin-bottom: 10px !important; }
.mb-15  { margin-bottom: 15px !important; }
.mb-20  { margin-bottom: 20px !important; }
.mb-25  { margin-bottom: 25px !important; }
.mb-30  { margin-bottom: 30px !important; }
.mb-35  { margin-bottom: 35px !important; }
.mb-40  { margin-bottom: 40px !important; }
.mb-45  { margin-bottom: 45px !important; }
.mb-50  { margin-bottom: 50px !important; }

/* Margin Left */
.ms-5   { margin-left: 5px !important; }
.ms-10  { margin-left: 10px !important; }
.ms-15  { margin-left: 15px !important; }
.ms-20  { margin-left: 20px !important; }
.ms-25  { margin-left: 25px !important; }
.ms-30  { margin-left: 30px !important; }
.ms-35  { margin-left: 35px !important; }
.ms-40  { margin-left: 40px !important; }
.ms-45  { margin-left: 45px !important; }
.ms-50  { margin-left: 50px !important; }

/* Margin Right */
.me-5   { margin-right: 5px !important; }
.me-10  { margin-right: 10px !important; }
.me-15  { margin-right: 15px !important; }
.me-20  { margin-right: 20px !important; }
.me-25  { margin-right: 25px !important; }
.me-30  { margin-right: 30px !important; }
.me-35  { margin-right: 35px !important; }
.me-40  { margin-right: 40px !important; }
.me-45  { margin-right: 45px !important; }
.me-50  { margin-right: 50px !important; }

/* Margin Horizontal (Left & Right) */
.mx-5   { margin-left: 5px !important; margin-right: 5px !important; }
.mx-10  { margin-left: 10px !important; margin-right: 10px !important; }
.mx-15  { margin-left: 15px !important; margin-right: 15px !important; }
.mx-20  { margin-left: 20px !important; margin-right: 20px !important; }
.mx-25  { margin-left: 25px !important; margin-right: 25px !important; }
.mx-30  { margin-left: 30px !important; margin-right: 30px !important; }
.mx-35  { margin-left: 35px !important; margin-right: 35px !important; }
.mx-40  { margin-left: 40px !important; margin-right: 40px !important; }
.mx-45  { margin-left: 45px !important; margin-right: 45px !important; }
.mx-50  { margin-left: 50px !important; margin-right: 50px !important; }

/* Margin Vertical (Top & Bottom) */
.my-5   { margin-top: 5px !important; margin-bottom: 5px !important; }
.my-10  { margin-top: 10px !important; margin-bottom: 10px !important; }
.my-15  { margin-top: 15px !important; margin-bottom: 15px !important; }
.my-20  { margin-top: 20px !important; margin-bottom: 20px !important; }
.my-25  { margin-top: 25px !important; margin-bottom: 25px !important; }
.my-30  { margin-top: 30px !important; margin-bottom: 30px !important; }
.my-35  { margin-top: 35px !important; margin-bottom: 35px !important; }
.my-40  { margin-top: 40px !important; margin-bottom: 40px !important; }
.my-45  { margin-top: 45px !important; margin-bottom: 45px !important; }
.my-50  { margin-top: 50px !important; margin-bottom: 50px !important; }

/* Custom Padding 5px - 50px */
/* Semua Sisi */
.p-5   { padding: 5px !important; }
.p-10  { padding: 10px !important; }
.p-15  { padding: 15px !important; }
.p-20  { padding: 20px !important; }
.p-25  { padding: 25px !important; }
.p-30  { padding: 30px !important; }
.p-35  { padding: 35px !important; }
.p-40  { padding: 40px !important; }
.p-45  { padding: 45px !important; }
.p-50  { padding: 50px !important; }

/* Padding Top */
.pt-5   { padding-top: 5px !important; }
.pt-10  { padding-top: 10px !important; }
.pt-15  { padding-top: 15px !important; }
.pt-20  { padding-top: 20px !important; }
.pt-25  { padding-top: 25px !important; }
.pt-30  { padding-top: 30px !important; }
.pt-35  { padding-top: 35px !important; }
.pt-40  { padding-top: 40px !important; }
.pt-45  { padding-top: 45px !important; }
.pt-50  { padding-top: 50px !important; }

/* Padding Bottom */
.pb-5   { padding-bottom: 5px !important; }
.pb-10  { padding-bottom: 10px !important; }
.pb-15  { padding-bottom: 15px !important; }
.pb-20  { padding-bottom: 20px !important; }
.pb-25  { padding-bottom: 25px !important; }
.pb-30  { padding-bottom: 30px !important; }
.pb-35  { padding-bottom: 35px !important; }
.pb-40  { padding-bottom: 40px !important; }
.pb-45  { padding-bottom: 45px !important; }
.pb-50  { padding-bottom: 50px !important; }

/* Padding Left */
.ps-5   { padding-left: 5px !important; }
.ps-10  { padding-left: 10px !important; }
.ps-15  { padding-left: 15px !important; }
.ps-20  { padding-left: 20px !important; }
.ps-25  { padding-left: 25px !important; }
.ps-30  { padding-left: 30px !important; }
.ps-35  { padding-left: 35px !important; }
.ps-40  { padding-left: 40px !important; }
.ps-45  { padding-left: 45px !important; }
.ps-50  { padding-left: 50px !important; }

/* Padding Right */
.pe-5   { padding-right: 5px !important; }
.pe-10  { padding-right: 10px !important; }
.pe-15  { padding-right: 15px !important; }
.pe-20  { padding-right: 20px !important; }
.pe-25  { padding-right: 25px !important; }
.pe-30  { padding-right: 30px !important; }
.pe-35  { padding-right: 35px !important; }
.pe-40  { padding-right: 40px !important; }
.pe-45  { padding-right: 45px !important; }
.pe-50  { padding-right: 50px !important; }

/* Padding Horizontal (Left & Right) */
.px-5   { padding-left: 5px !important; padding-right: 5px !important; }
.px-10  { padding-left: 10px !important; padding-right: 10px !important; }
.px-15  { padding-left: 15px !important; padding-right: 15px !important; }
.px-20  { padding-left: 20px !important; padding-right: 20px !important; }
.px-25  { padding-left: 25px !important; padding-right: 25px !important; }
.px-30  { padding-left: 30px !important; padding-right: 30px !important; }
.px-35  { padding-left: 35px !important; padding-right: 35px !important; }
.px-40  { padding-left: 40px !important; padding-right: 40px !important; }
.px-45  { padding-left: 45px !important; padding-right: 45px !important; }
.px-50  { padding-left: 50px !important; padding-right: 50px !important; }

/* Padding Vertical (Top & Bottom) */
.py-5   { padding-top: 5px !important; padding-bottom: 5px !important; }
.py-10  { padding-top: 10px !important; padding-bottom: 10px !important; }
.py-15  { padding-top: 15px !important; padding-bottom: 15px !important; }
.py-20  { padding-top: 20px !important; padding-bottom: 20px !important; }
.py-25  { padding-top: 25px !important; padding-bottom: 25px !important; }
.py-30  { padding-top: 30px !important; padding-bottom: 30px !important; }
.py-35  { padding-top: 35px !important; padding-bottom: 35px !important; }
.py-40  { padding-top: 40px !important; padding-bottom: 40px !important; }
.py-45  { padding-top: 45px !important; padding-bottom: 45px !important; }
.py-50  { padding-top: 50px !important; padding-bottom: 50px !important; }

/* Custom Opacity */
.opacity-10 { opacity: 0.10 !important; }
.opacity-20 { opacity: 0.20 !important; }
.opacity-30 { opacity: 0.30 !important; }
.opacity-40 { opacity: 0.40 !important; }
.opacity-60 { opacity: 0.60 !important; }
.opacity-70 { opacity: 0.70 !important; }
.opacity-80 { opacity: 0.80 !important; }
.opacity-90 { opacity: 0.90 !important; }

/* Universal Background Opacity */
.bg-opacity-10 { --bs-bg-opacity: 0.10; }
.bg-opacity-20 { --bs-bg-opacity: 0.20; }
.bg-opacity-30 { --bs-bg-opacity: 0.30; }
.bg-opacity-40 { --bs-bg-opacity: 0.40; }
.bg-opacity-50 { --bs-bg-opacity: 0.50; }
.bg-opacity-60 { --bs-bg-opacity: 0.60; }
.bg-opacity-70 { --bs-bg-opacity: 0.70; }
.bg-opacity-80 { --bs-bg-opacity: 0.80; }
.bg-opacity-90 { --bs-bg-opacity: 0.90; }

/* Responsive Display */
/* Desktop */
.desktop-only { display: block; }
.mobile-only,
.tablet-only { display: none; }

/* Mobile */
@media (max-width: 768px) {
    .desktop-only,
    .tablet-only { display: none; }
    .mobile-only { display: block; }
}
/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .desktop-only,
    .mobile-only { display: none; }
    .tablet-only { display: block; }
}