.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.top { top: 0; }
.bottom { bottom: 0; }
.left { left: 0; }
.right { right: 0; }
.inset { inset: 0; }
.center { left: 50%; translate: -50% 0; }
.middle { top: 50%; translate: 0 -50%; }
.center.middle { translate: -50% -50%; }

.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }
.z-4 { z-index: 4; }
.z-5 { z-index: 5; }
.z-6 { z-index: 6; }
.z-7 { z-index: 7; }
.z-8 { z-index: 8; }
.z-9 { z-index: 9; }
.z-10 { z-index: 10; }
.z-11 { z-index: 11; }
.z-12 { z-index: 12; }
.z-13 { z-index: 13; }
.z-14 { z-index: 14; }
.z-15 { z-index: 15; }
.z-16 { z-index: 16; }
.z-17 { z-index: 17; }
.z-18 { z-index: 18; }
.z-19 { z-index: 19; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }
.z-200 { z-index: 200; }
.z-300 { z-index: 300; }
.z-400 { z-index: 400; }
.z-500 { z-index: 500; }
.z-600 { z-index: 600; }
.z-700 { z-index: 700; }
.z-800 { z-index: 800; }
.z-900 { z-index: 900; }
.z-1000 { z-index: 1000; }


@media (min-width: 576px) { 
    .sm\:relative { position: relative; }
    .sm\:absolute { position: absolute; }
    .sm\:fixed { position: fixed; }
    .sm\:sticky { position: sticky; }

    .sm\:top { top: 0; }
    .sm\:bottom { bottom: 0; }
    .sm\:left { left: 0; }
    .sm\:right { right: 0; }
    .sm\:inset { inset: 0; }
    .sm\:center { left: 50%; translate: -50% 0; }
    .sm\:middle { top: 50%; translate: 0 -50%; }
    .sm\:center.middle { translate: -50% -50%; }
}

@media (min-width: 768px) {
    .md\:relative { position: relative; }
    .md\:absolute { position: absolute; }
    .md\:fixed { position: fixed; }
    .md\:sticky { position: sticky; }

    .md\:top { top: 0; }
    .md\:bottom { bottom: 0; }
    .md\:left { left: 0; }
    .md\:right { right: 0; }
    .md\:inset { inset: 0; }
    .md\:center { left: 50%; translate: -50% 0; }
    .md\:middle { top: 50%; translate: 0 -50%; }
    .md\:center.middle { translate: -50% -50%; }
}

@media (min-width: 1024px) {
    .lg\:relative { position: relative; }
    .lg\:absolute { position: absolute; }
    .lg\:fixed { position: fixed; }
    .lg\:sticky { position: sticky; }

    .lg\:top { top: 0; }
    .lg\:bottom { bottom: 0; }
    .lg\:left { left: 0; }
    .lg\:right { right: 0; }
    .lg\:inset { inset: 0; }
    .lg\:center { left: 50%; translate: -50% 0; }
    .lg\:middle { top: 50%; translate: 0 -50%; }
    .lg\:center.middle { translate: -50% -50%; }
}

@media (min-width: 1280px) {
    .xl\:relative { position: relative; }
    .xl\:absolute { position: absolute; }
    .xl\:fixed { position: fixed; }
    .xl\:sticky { position: sticky; }

    .xl\:top { top: 0; }
    .xl\:bottom { bottom: 0; }
    .xl\:left { left: 0; }
    .xl\:right { right: 0; }
    .xl\:inset { inset: 0; }
    .xl\:center { left: 50%; translate: -50% 0; }
    .xl\:middle { top: 50%; translate: 0 -50%; }
    .xl\:center.middle { translate: -50% -50%; }
}

@media (min-width: 1540px) {
    .xxl\:relative { position: relative; }
    .xxl\:absolute { position: absolute; }
    .xxl\:fixed { position: fixed; }
    .xxl\:sticky { position: sticky; }

    .xxl\:top { top: 0; }
    .xxl\:bottom { bottom: 0; }
    .xxl\:left { left: 0; }
    .xxl\:right { right: 0; }
    .xxl\:inset { inset: 0; }
    .xxl\:center { left: 50%; translate: -50% 0; }
    .xxl\:middle { top: 50%; translate: 0 -50%; }
    .xxl\:center.middle { translate: -50% -50%; }
}