/* ===== width (parent-based %) ===== */
.w-auto { width: auto; }
.w-fit { width: fit-content; }
.w-full { width: 100%; }
.w-screen { width: 100%; }
.w-1-2 { width: 50%; }
.w-1-3 { width: 33.3333%; }
.w-2-3 { width: 66.6667%; }
.w-1-4 { width: 25%; }
.w-2-4 { width: 50%; }
.w-3-4 { width: 75%; }
.w-1-5 { width: 20%; }
.w-2-5 { width: 40%; }
.w-3-5 { width: 60%; }
.w-4-5 { width: 80%; }
.w-3-10 { width: 30%; }
.w-9-10 { width: 90%; }

/* Break out of centered/max-width parent to viewport width */
.full-bleed {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

@supports (width: 100dvw) {
    .w-screen {
        width: 100dvw;
    }

    .full-bleed {
        width: 100dvw;
        margin-left: calc(50% - 50dvw);
        margin-right: calc(50% - 50dvw);
    }
}


.w-5p { width: 5%; }
.w-10p { width: 10%; }
.w-13p { width: 13%; }
.w-15p { width: 15%; }
.w-18p { width: 18%; }
.w-19p { width: 19%; }
.w-20p { width: 20%; }
.w-21p { width: 21%; }
.w-30p { width: 30%; }
.w-40p { width: 40%; }
.w-41p { width: 41%; }
.w-45p { width: 45%; }
.w-50p { width: 50%; }
.w-60p { width: 60%; }
.w-61p { width: 61%; }
.w-80p { width: 80%; }

/* ===== width (fixed rem) ===== */
.w-10 { width: 1rem; }   /* 10px */
.w-18 { width: 1.8rem; }
.w-19 { width: 1.9rem; }
.w-20 { width: 2rem; }
.w-21 { width: 2.1rem; }
.w-30 { width: 3rem; }
.w-40 { width: 4rem; }
.w-50 { width: 5rem; }
.w-60 { width: 6rem; }
.w-70 { width: 7rem; }
.w-80 { width: 8rem; }
.w-90 { width: 9rem; }
.w-93 { width: 9.3rem; }
.w-94 { width: 9.4rem; }
.w-100 { width: 10rem; }
.w-107 { width: 10.7rem; }
.w-110 { width: 11rem; }
.w-117 { width: 11.7rem; }
.w-120 { width: 12rem; }
.w-126 { width: 12.6rem; }
.w-130 { width: 13rem; }
.w-135 { width: 13.5rem; }
.w-140 { width: 14rem; }
.w-150 { width: 15rem; }
.w-155 { width: 15.5rem; }
.w-160 { width: 16rem; }
.w-170 { width: 17rem; }
.w-180 { width: 18rem; }
.w-190 { width: 19rem; }
.w-200 { width: 20rem; }
.w-204 { width: 20.4rem; }
.w-205 { width: 20.5rem; }
.w-210 { width: 21rem; }
.w-220 { width: 22rem; }
.w-230 { width: 23rem; }

.w-235 { width: 23.5rem; }
.w-250 { width: 25rem; }
.w-251 { width: 25.1rem; }
.w-260 { width: 26rem; }
.w-270 { width: 27rem; }
.w-280 { width: 28rem; }
.w-300 { width: 30rem; }
.w-310 { width: 31rem; }
.w-320 { width: 32rem; }
.w-330 { width: 33rem; }
.w-350 { width: 35rem; }
.w-400 { width: 40rem; }
.w-450 { width: 45rem; }
.w-470 { width: 47rem; }
.w-500 { width: 50rem; }
.w-600 { width: 60rem; }
.w-700 { width: 70rem; }
.w-800 { width: 80rem; }
.w-950 { width: 95rem; }
.w-1050 { width: 105rem; }



@media (min-width: 1024px) {
    .lg-w-fit { width: fit-content; }
    .lg-w-50 { width: 5rem; }
    .lg-w-60 { width: 6rem; }
    .lg-w-90 { width: 9rem; }
    .lg-w-120 { width: 12rem; }
    .lg-w-130 { width: 13rem; }
    .lg-w-150 { width: 15rem; }
    .lg-w-170 { width: 17rem; }
    .lg-w-190 { width: 19rem; }
    .lg-w-200 { width: 20rem; }
    .lg-w-204 { width: 20.4rem; }
    .lg-w-210 { width: 21rem; }
    .lg-w-220 { width: 22rem; }
    .lg-w-230 { width: 23rem; }
    .lg-w-251 { width: 25.1rem; }
    .lg-w-270 { width: 27rem; }
    .lg-w-280 { width: 28rem; }
    .lg-w-300 { width: 30rem; }
    .lg-w-320 { width: 32rem; }
    .lg-w-350 { width: 35rem; }
    .lg-w-370 { width: 37rem; }
    .lg-w-400 { width: 40rem; }
    .lg-w-420 { width: 42rem; }
    .lg-w-500 { width: 50rem; }
    .lg-w-660 { width: 66rem; }
    .lg-w-700 { width: 70rem; }
    .lg-w-730 { width: 73rem; }
    .lg-w-770 { width: 77rem; }
    .lg-w-800 { width: 80rem; }
    .lg-w-880 { width: 88rem; }
    .lg-w-900 { width: 90rem; }
    .lg-w-920 { width: 92rem; }
    .lg-w-950 { width: 95rem; }
    .lg-w-1000 { width: 100rem; }
    .lg-w-1050 { width: 105rem; }

    .lg-w-1-6 { width: 16%; }
    .lg-w-1-5 { width: 20%; }
    .lg-w-1-4{width: 25%; }
    .lg-w-1-3{width: 33.3333%; }
    .lg-w-2-3 { width: 66.6667%; }
    .lg-w-1-2{width: 50%; }
    .lg-w-3-5 { width: 60%; }
    .lg-w-3-4 { width: 75%; }
    .lg-w-4-5 { width: 80%; }

    .lg-w-5p { width: 5%; }
    .lg-w-7p { width: 7%; }
    .lg-w-9p { width: 9%; }
    .lg-w-10p { width: 10%; }
    .lg-w-15p { width: 15%; }
    .lg-w-19p { width: 19%; }
    .lg-w-20p { width: 20%; }
    .lg-w-25p { width: 25%; }
    .lg-w-30p { width: 30%; }
    .lg-w-33p { width: 33%; }
    .lg-w-35p { width: 35%; }
    .lg-w-40p { width: 40%; }
    .lg-w-50p { width: 50%; }
    .lg-w-60p { width: 60%; }
    .lg-w-70p { width: 70%; }
    .lg-w-80p { width: 80%; }
    .lg-w-90p { width: 90%; }

    .lg-w-full {
        width: 100%;
    }
}

/* ===== max-width (px) ===== */
.max-w-0    { max-width: 0; }

.max-w-50   { max-width: 50px; }
.max-w-80   { max-width: 80px; }
.max-w-100  { max-width: 100px; }
.max-w-120  { max-width: 120px; }
.max-w-130  { max-width: 130px; }
.max-w-150  { max-width: 150px; }

.max-w-200  { max-width: 200px; }
.max-w-250  { max-width: 250px; }
.max-w-257  { max-width: 257px; }
.max-w-260  { max-width: 260px; }
.max-w-280  { max-width: 280px; }
.max-w-300  { max-width: 300px; }
.max-w-320  { max-width: 320px; }
.max-w-350  { max-width: 350px; }
.max-w-380  { max-width: 380px; }
.max-w-400  { max-width: 400px; }

.max-w-500  { max-width: 500px; }
.max-w-600  { max-width: 600px; }
.max-w-630  { max-width: 630px; }
.max-w-700  { max-width: 700px; }
.max-w-770  { max-width: 770px; }
.max-w-800  { max-width: 800px; }
.max-w-900  { max-width: 900px; }
.max-w-950  { max-width: 950px; }
.max-w-1000 { max-width: 1000px; }

.max-w-1500 { max-width: 1500px; }


/* ===== max-width (%) ===== */
.max-w-10p  { max-width: 10%; }
.max-w-20p  { max-width: 20%; }
.max-w-25p  { max-width: 25%; }
.max-w-33p  { max-width: 33.3333%; }
.max-w-40p  { max-width: 40%; }
.max-w-50p  { max-width: 50%; }
.max-w-60p  { max-width: 60%; }
.max-w-66p  { max-width: 66.6667%; }
.max-w-70p  { max-width: 70%; }
.max-w-75p  { max-width: 75%; }
.max-w-80p  { max-width: 80%; }
.max-w-90p  { max-width: 90%; }
.max-w-100p { max-width: 100%; }

@media (min-width: 1024px) {

    /* ===== lg: max-width (px) ===== */
    .lg-max-w-0    { max-width: 0; }

    .lg-max-w-100  { max-width: 100px; }
    .lg-max-w-110  { max-width: 110px; }
    .lg-max-w-200  { max-width: 200px; }
    .lg-max-w-250  { max-width: 250px; }
    .lg-max-w-300  { max-width: 300px; }
    .lg-max-w-350  { max-width: 350px; }
    .lg-max-w-400  { max-width: 400px; }
    .lg-max-w-450  { max-width: 450px; }
    .lg-max-w-500  { max-width: 500px; }
    .lg-max-w-520  { max-width: 520px; }
    .lg-max-w-600  { max-width: 600px; }
    .lg-max-w-800  { max-width: 800px; }
    .lg-max-w-1280 { max-width: 1280px; }
    .lg-max-w-1500 { max-width: 1500px; }

    /* ===== lg: max-width (%) ===== */
    .lg-max-w-25p  { max-width: 25%; }
    .lg-max-w-33p  { max-width: 33.3333%; }
    .lg-max-w-40p  { max-width: 40%; }
    .lg-max-w-50p  { max-width: 50%; }
    .lg-max-w-60p  { max-width: 60%; }
    .lg-max-w-66p  { max-width: 66.6667%; }
    .lg-max-w-75p  { max-width: 75%; }
    .lg-max-w-80p  { max-width: 80%; }
    .lg-max-w-100p { max-width: 100%; }
}

/* ===== min-width (px) ===== */
.min-w-0 { min-width: 0; }
.min-w-32 { min-width: 32px; }
.min-w-auto { min-width: auto; }
.min-w-600 { min-width: 600px; }

@media (min-width: 1024px) {
    .lg-min-w-600 { min-width: 600px; }
}



/* ===== height utilities ===== */
.h-auto { height: auto; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }


/* ===== height scale (rem based) ===== */
.h-1  { height: 0.1rem; }   /* 1px */
.h-2  { height: 0.2rem; }   /* 2px */
.h-4  { height: 0.4rem; }   /* 4px */
.h-5  { height: 0.5rem; }   /* 5px */
.h-6  { height: 0.6rem; }   /* 6px */
.h-8  { height: 0.8rem; }   /* 8px */
.h-10 { height: 1rem; }     /* 10px */
.h-11 { height: 1.1rem; }
.h-12 { height: 1.2rem; }
.h-15 { height: 1.5rem; }
.h-16 { height: 1.6rem; }
.h-18 { height: 1.8rem; }
.h-20 { height: 2rem; }
.h-22 { height: 2.2rem; }
.h-24 { height: 2.4rem; }
.h-26 { height: 2.6rem; }
.h-28 { height: 2.8rem; }
.h-29 { height: 2.9rem; }
.h-30 { height: 3rem; }
.h-32 { height: 3.2rem; }
.h-33 { height: 3.3rem; }
.h-35 { height: 3.5rem; }
.h-40 { height: 4rem; }
.h-41 { height: 4.1rem; }
.h-43 { height: 4.3rem; }
.h-46 { height: 4.6rem; }
.h-48 { height: 4.8rem; }
.h-50 { height: 5rem; }
.h-56 { height: 5.6rem; }
.h-64 { height: 6.4rem; }
.h-84 { height: 8.4rem; }
.h-130 { height: 13rem; }
.h-135 { height: 13.5rem; }
.h-140 { height: 14rem; }
.h-150 { height: 15rem; }
.h-170 { height: 17rem; }
.h-190 { height: 19rem; }
.h-200 { height: 20rem; }
.h-210 { height: 21rem; }
.h-240 { height: 24rem; }
.h-250 { height: 25rem; }
.h-300 { height: 30rem; }
.h-344 { height: 34.4rem; }
.h-350 { height: 35rem; }
.h-400 { height: 40rem; }
.h-420 { height: 42rem; }

/* ===== size (percent based) ===== */
.h-1p  { height: 1%; }
.h-2p  { height: 2%; }
.h-3p  { height: 3%; }
.h-4p  { height: 4%; }
.h-5p  { height: 5%; }
.h-6p  { height: 6%; }
.h-8p  { height: 8%; }
.h-10p { height: 10%; }
.h-20p { height: 20%; }
.h-100p { height: 100%; }

/* ===== height scale (lg: min-width 1024px) ===== */
@media (min-width: 1024px) {

    .lg-h-auto { height: auto; }
    .lg-h-1   { height: 0.1rem; }   /* 1px */
    .lg-h-2   { height: 0.2rem; }   /* 2px */
    .lg-h-4   { height: 0.4rem; }   /* 4px */
    .lg-h-6   { height: 0.6rem; }   /* 6px */
    .lg-h-8   { height: 0.8rem; }   /* 8px */
    .lg-h-10  { height: 1rem; }     /* 10px */
    .lg-h-12  { height: 1.2rem; }
    .lg-h-15  { height: 1.5rem; }
    .lg-h-16  { height: 1.6rem; }
    .lg-h-20  { height: 2rem; }
    .lg-h-24  { height: 2.4rem; }
    .lg-h-27  { height: 2.7rem; }
    .lg-h-28  { height: 2.8rem; }
    .lg-h-32  { height: 3.2rem; }
    .lg-h-40  { height: 4rem; }
    .lg-h-42  { height: 4.2rem; }
    .lg-h-43  { height: 4.3rem; }
    .lg-h-46  { height: 4.6rem; }
    .lg-h-48  { height: 4.8rem; }
    .lg-h-56  { height: 5.6rem; }
    .lg-h-64  { height: 6.4rem; }
    .lg-h-72  { height: 7.2rem; }
    .lg-h-100 { height: 10rem; }
    .lg-h-150 { height: 15rem; }
    .lg-h-240 { height: 24rem; }
    .lg-h-280 { height: 28rem; }
    .lg-h-344 { height: 34.4rem; }
    .lg-h-400 { height: 40rem; }

}






/* ===== max-height (px) ===== */
.max-h-0    { max-height: 0; }

.max-h-50   { max-height: 50px; }
.max-h-80   { max-height: 80px; }
.max-h-100  { max-height: 100px; }
.max-h-120  { max-height: 120px; }
.max-h-150  { max-height: 150px; }

.max-h-200  { max-height: 200px; }
.max-h-250  { max-height: 250px; }
.max-h-300  { max-height: 300px; }
.max-h-350  { max-height: 350px; }
.max-h-400  { max-height: 400px; }

.max-h-500  { max-height: 500px; }
.max-h-600  { max-height: 600px; }
.max-h-800  { max-height: 800px; }
.max-h-1000 { max-height: 1000px; }

@media (min-width: 1024px) {
    .lg-max-h-0    { max-height: 0; }

    .lg-max-h-100  { max-height: 100px; }
    .lg-max-h-200  { max-height: 200px; }
    .lg-max-h-300  { max-height: 300px; }
    .lg-max-h-400  { max-height: 400px; }
    .lg-max-h-450  { max-height: 450px; }
    .lg-max-h-500  { max-height: 500px; }
    .lg-max-h-600  { max-height: 600px; }
    .lg-max-h-800  { max-height: 800px; }
    .lg-h-5p  { height: 5%; }
    .lg-h-6p  { height: 6%; }
    .lg-h-8p  { height: 8%; }
}





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

@media (min-width: 1024px) {
    pncg-quick-consult.only-pc {
        position: fixed;
        left: 50%;
        bottom: 5%;
        transform: translateX(-50%);
        width: min(92vw, 1180px) !important;
        z-index: 90;
        margin: 0;
    }
}


/* ===== flex layout ===== */
.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.flex-1 {
    flex: 1;
}
.flex-2 {
    flex: 2;
}


@media (min-width: 1024px) {

    .lg-flex {      display: flex;}
    .lg-flex-row {  flex-direction: row;}
    .lg-flex-col {  flex-direction: column;}

    .lg-flex-1 {flex: 1;}
    .lg-flex-2 {flex: 2;}
    

}


.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}


/* justify */
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

@media (min-width: 1024px) {

    .lg-justify-start   { justify-content: flex-start; }
    .lg-justify-center  { justify-content: center; }
    .lg-justify-end     { justify-content: flex-end; }
    .lg-justify-between { justify-content: space-between; }
    .lg-justify-around  { justify-content: space-around; }

}



/* align */
.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.items-stretch{ align-items: stretch; }

@media (min-width: 1024px) {
    .lg-items-center { align-items: center; }
}


/* ===== gap scale ===== */
.gap-0  { gap: 0; }
.gap-4  { gap: 0.4rem; }  /* 4px */
.gap-6  { gap: 0.6rem; }  /* 6px */
.gap-8  { gap: 0.8rem; }  /* 8px */
.gap-10 { gap: 1rem; }    /* 10px */
.gap-12 { gap: 1.2rem; }
.gap-15 { gap: 1.5rem; }
.gap-16 { gap: 1.6rem; }
.gap-18 { gap: 1.8rem; }
.gap-20 { gap: 2rem; }
.gap-23 { gap: 2.3rem; }
.gap-24 { gap: 2.4rem; }
.gap-28 { gap: 2.8rem; }
.gap-30 { gap: 3rem; }
.gap-32 { gap: 3.2rem; }
.gap-36 { gap: 3.6rem; }
.gap-40 { gap: 4rem; }
.gap-50 { gap: 5rem; }
.gap-77 { gap: 7.7rem; }
.gap-90 { gap: 9rem; }

@media (min-width: 1024px) {
    .lg-gap-5 { gap: 0.5rem; }
    .lg-gap-8 { gap: 0.8rem; }
    .lg-gap-10 { gap: 1rem; }
    .lg-gap-16 { gap: 1.6rem; }
    .lg-gap-50 { gap: 5rem; }
    .lg-gap-60 { gap: 6rem; }
    .lg-gap-80 { gap: 8rem; }
    .lg-gap-90 { gap: 9rem; }
    .lg-gap-120 { gap: 12rem; }
    .lg-gap-150 { gap: 15rem; }
}

/* ===== order utilities ===== */
.order-0  { order: 0; }
.order-1  { order: 1; }
.order-2  { order: 2; }
.order-3  { order: 3; }
.order-4  { order: 4; }
.order-5  { order: 5; }

.order-first { order: -9999; }
.order-last  { order: 9999; }


@media (min-width: 1024px) {
    .lg-order-0  { order: 0; }
    .lg-order-1  { order: 1; }
    .lg-order-2  { order: 2; }
    .lg-order-3  { order: 3; }
    .lg-order-4  { order: 4; }
    .lg-order-5  { order: 5; }

    .lg-order-first { order: -9999; }
    .lg-order-last  { order: 9999; }
}



.none{display: none;}
.relative{position: relative;}
.absolute{position:absolute;}

.inline{display: inline !important;}
.inline-block{display: inline-block !important;}
.block{display: block !important;}

.overflow-visible { overflow: visible; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

@media (min-width: 1024px) {
    .lg-overflow-visible { overflow: visible; }
    .lg-overflow-hidden { overflow: hidden; }
    .lg-overflow-auto { overflow: auto; }
}

@media (min-width: 1024px) {
    .lg-block{display: block !important;}

}
.top-32  { top: 3.2rem; }

/* ===== x-axis position (rem) ===== */
.left-auto  { left: auto; }
.right-auto { right: auto; }

.left-0  { left: 0; }
.right-0 { right: 0; }
.left-1  { left: 0.1rem; }
.left-2  { left: 0.2rem; }
.left-3  { left: 0.3rem; }
.left-4  { left: 0.4rem; }
.left-5  { left: 0.5rem; }
.left-6  { left: 0.6rem; }
.left-7  { left: 0.7rem; }
.left-8  { left: 0.8rem; }
.left-9  { left: 0.9rem; }
.left-10  { left: 1rem; }
.left-11  { left: 1.1rem; }
.left-12  { left: 1.2rem; }
.left-13  { left: 1.3rem; }
.left-14  { left: 1.4rem; }
.left-15  { left: 1.5rem; }
.left-16  { left: 1.6rem; }
.left-17  { left: 1.7rem; }
.left-18  { left: 1.8rem; }
.left-19  { left: 1.9rem; }
.left-20  { left: 2rem; }
.left-21  { left: 2.1rem; }
.left-22  { left: 2.2rem; }
.left-23  { left: 2.3rem; }
.left-24  { left: 2.4rem; }
.left-25  { left: 2.5rem; }
.left-26  { left: 2.6rem; }
.left-27  { left: 2.7rem; }
.left-28  { left: 2.8rem; }
.left-29  { left: 2.9rem; }
.left-30  { left: 3rem; }
.left-31  { left: 3.1rem; }
.left-32  { left: 3.2rem; }
.left-33  { left: 3.3rem; }
.left-34  { left: 3.4rem; }
.left-35  { left: 3.5rem; }
.left-36  { left: 3.6rem; }
.left-37  { left: 3.7rem; }
.left-38  { left: 3.8rem; }
.left-39  { left: 3.9rem; }
.left-40  { left: 4rem; }
.left-41  { left: 4.1rem; }
.left-42  { left: 4.2rem; }
.left-43  { left: 4.3rem; }
.left-44  { left: 4.4rem; }
.left-45  { left: 4.5rem; }
.left-46  { left: 4.6rem; }
.left-47  { left: 4.7rem; }
.left-48  { left: 4.8rem; }
.left-49  { left: 4.9rem; }
.left-50  { left: 5rem; }
.left-70  { left: 7rem; }
.left-90  { left: 9rem; }

.right-1 { right: 0.1rem; }
.right-2 { right: 0.2rem; }
.right-3 { right: 0.3rem; }
.right-4 { right: 0.4rem; }
.right-5 { right: 0.5rem; }
.right-6 { right: 0.6rem; }
.right-7 { right: 0.7rem; }
.right-8 { right: 0.8rem; }
.right-9 { right: 0.9rem; }
.right-10 { right: 1rem; }
.right-11 { right: 1.1rem; }
.right-12 { right: 1.2rem; }
.right-13 { right: 1.3rem; }
.right-14 { right: 1.4rem; }
.right-15 { right: 1.5rem; }
.right-16 { right: 1.6rem; }
.right-17 { right: 1.7rem; }
.right-18 { right: 1.8rem; }
.right-19 { right: 1.9rem; }
.right-20 { right: 2rem; }
.right-21 { right: 2.1rem; }
.right-22 { right: 2.2rem; }
.right-23 { right: 2.3rem; }
.right-24 { right: 2.4rem; }
.right-25 { right: 2.5rem; }
.right-26 { right: 2.6rem; }
.right-27 { right: 2.7rem; }
.right-28 { right: 2.8rem; }
.right-29 { right: 2.9rem; }
.right-30 { right: 3rem; }
.right-31 { right: 3.1rem; }
.right-32 { right: 3.2rem; }
.right-33 { right: 3.3rem; }
.right-34 { right: 3.4rem; }
.right-35 { right: 3.5rem; }
.right-36 { right: 3.6rem; }
.right-37 { right: 3.7rem; }
.right-38 { right: 3.8rem; }
.right-39 { right: 3.9rem; }
.right-40 { right: 4rem; }
.right-41 { right: 4.1rem; }
.right-42 { right: 4.2rem; }
.right-43 { right: 4.3rem; }
.right-44 { right: 4.4rem; }
.right-45 { right: 4.5rem; }
.right-46 { right: 4.6rem; }
.right-47 { right: 4.7rem; }
.right-48 { right: 4.8rem; }
.right-49 { right: 4.9rem; }
.right-50 { right: 5rem; }
.right-70  { right: 7rem; }
.right-90  { right: 9rem; }
.right-110 { right: 11rem; }

.-left-1  { left: -0.1rem; }
.-left-2  { left: -0.2rem; }
.-left-3  { left: -0.3rem; }
.-left-4  { left: -0.4rem; }
.-left-5  { left: -0.5rem; }
.-left-6  { left: -0.6rem; }
.-left-7  { left: -0.7rem; }
.-left-8  { left: -0.8rem; }
.-left-9  { left: -0.9rem; }
.-left-10  { left: -1rem; }
.-left-11  { left: -1.1rem; }
.-left-12  { left: -1.2rem; }
.-left-13  { left: -1.3rem; }
.-left-14  { left: -1.4rem; }
.-left-15  { left: -1.5rem; }
.-left-16  { left: -1.6rem; }
.-left-17  { left: -1.7rem; }
.-left-18  { left: -1.8rem; }
.-left-19  { left: -1.9rem; }
.-left-20  { left: -2rem; }
.-left-21  { left: -2.1rem; }
.-left-22  { left: -2.2rem; }
.-left-23  { left: -2.3rem; }
.-left-24  { left: -2.4rem; }
.-left-25  { left: -2.5rem; }
.-left-26  { left: -2.6rem; }
.-left-27  { left: -2.7rem; }
.-left-28  { left: -2.8rem; }
.-left-29  { left: -2.9rem; }
.-left-30  { left: -3rem; }
.-left-31  { left: -3.1rem; }
.-left-32  { left: -3.2rem; }
.-left-33  { left: -3.3rem; }
.-left-34  { left: -3.4rem; }
.-left-35  { left: -3.5rem; }
.-left-36  { left: -3.6rem; }
.-left-37  { left: -3.7rem; }
.-left-38  { left: -3.8rem; }
.-left-39  { left: -3.9rem; }
.-left-40  { left: -4rem; }
.-left-41  { left: -4.1rem; }
.-left-42  { left: -4.2rem; }
.-left-43  { left: -4.3rem; }
.-left-44  { left: -4.4rem; }
.-left-45  { left: -4.5rem; }
.-left-46  { left: -4.6rem; }
.-left-47  { left: -4.7rem; }
.-left-48  { left: -4.8rem; }
.-left-49  { left: -4.9rem; }
.-left-50  { left: -5rem; }
.-left-70  { left: -7rem; }
.-left-90  { left: -9rem; }
.-left-130  { left: -13rem; }

.-right-1 { right: -0.1rem; }
.-right-2 { right: -0.2rem; }
.-right-3 { right: -0.3rem; }
.-right-4 { right: -0.4rem; }
.-right-5 { right: -0.5rem; }
.-right-6 { right: -0.6rem; }
.-right-7 { right: -0.7rem; }
.-right-8 { right: -0.8rem; }
.-right-9 { right: -0.9rem; }
.-right-10 { right: -1rem; }
.-right-11 { right: -1.1rem; }
.-right-12 { right: -1.2rem; }
.-right-13 { right: -1.3rem; }
.-right-14 { right: -1.4rem; }
.-right-15 { right: -1.5rem; }
.-right-16 { right: -1.6rem; }
.-right-17 { right: -1.7rem; }
.-right-18 { right: -1.8rem; }
.-right-19 { right: -1.9rem; }
.-right-20 { right: -2rem; }
.-right-21 { right: -2.1rem; }
.-right-22 { right: -2.2rem; }
.-right-23 { right: -2.3rem; }
.-right-24 { right: -2.4rem; }
.-right-25 { right: -2.5rem; }
.-right-26 { right: -2.6rem; }
.-right-27 { right: -2.7rem; }
.-right-28 { right: -2.8rem; }
.-right-29 { right: -2.9rem; }
.-right-30 { right: -3rem; }
.-right-31 { right: -3.1rem; }
.-right-32 { right: -3.2rem; }
.-right-33 { right: -3.3rem; }
.-right-34 { right: -3.4rem; }
.-right-35 { right: -3.5rem; }
.-right-36 { right: -3.6rem; }
.-right-37 { right: -3.7rem; }
.-right-38 { right: -3.8rem; }
.-right-39 { right: -3.9rem; }
.-right-40 { right: -4rem; }
.-right-41 { right: -4.1rem; }
.-right-42 { right: -4.2rem; }
.-right-43 { right: -4.3rem; }
.-right-44 { right: -4.4rem; }
.-right-45 { right: -4.5rem; }
.-right-46 { right: -4.6rem; }
.-right-47 { right: -4.7rem; }
.-right-48 { right: -4.8rem; }
.-right-49 { right: -4.9rem; }
.-right-50 { right: -5rem; }
.-right-70  { right: -7rem; }
.-right-90  { right: -9rem; }
.-right-110 { right: -11rem; }

/* ===== x-axis position (%) ===== */
.-left-2p  { left: -2%; }
.-left-5p  { left: -5%; }
.-left-10p { left: -10%; }
.-left-20p { left: -20%; }
.-left-21p { left: -21%; }
.-left-25p { left: -25%; }
.-left-30p { left: -30%; }
.-left-33p { left: -33%; }
.-left-35p { left: -35%; }
.-left-50p { left: -50%; }

.left-2p  { left: 2%; }
.left-5p  { left: 5%; }
.left-7p  { left: 7%; }
.left-8p  { left: 8%; }
.left-9p  { left: 9%; }
.left-10p { left: 10%; }
.left-12p { left: 12%; }
.left-13p { left: 13%; }
.left-15p { left: 15%; }
.left-16p { left: 16%; }
.left-20p { left: 20%; }
.left-25p { left: 25%; }
.left-30p { left: 30%; }
.left-35p { left: 35%; }
.left-40p { left: 40%; }
.left-44p { left: 44%; }
.left-50p { left: 50%; }

.-right-2p  { right: -2%; }
.-right-5p  { right: -5%; }
.-right-10p { right: -10%; }
.-right-15p { right: -15%; }
.-right-18p { right: -18%; }
.-right-20p { right: -20%; }
.-right-25p { right: -25%; }
.-right-30p { right: -30%; }
.-right-35p { right: -35%; }
.-right-40p { right: -40%; }
.-right-44p { right: -44%; }
.-right-50p { right: -50%; }
.-right-70p { right: -70%; }

.right-2p  { right: 2%; }
.right-5p  { right: 5%; }
.right-8p  { right: 8%; }
.right-10p { right: 10%; }
.right-15p { right: 15%; }
.right-20p { right: 20%; }
.right-25p { right: 25%; }
.right-30p { right: 30%; }
.right-40p { right: 40%; }

/* ===== bottom position (rem) ===== */
.bottom-0   { bottom: 0; }
.bottom-5   { bottom: 0.5rem; }
.bottom-10  { bottom: 1rem; }
.bottom-15  { bottom: 1.5rem; }
.bottom-20  { bottom: 2rem; }
.bottom-30  { bottom: 3rem; }
.bottom-40  { bottom: 4rem; }
.bottom-50  { bottom: 5rem; }
.bottom-130 { bottom: 13rem; }
.bottom-150 { bottom: 15rem; }
.bottom-190 { bottom: 19rem; }
.bottom-200 { bottom: 20rem; }
.bottom-210 { bottom: 21rem; }

/* ===== bottom negative (rem) ===== */
.-bottom-1  { bottom: -0.1rem; }
.-bottom-2  { bottom: -0.2rem; }
.-bottom-3  { bottom: -0.3rem; }
.-bottom-4  { bottom: -0.4rem; }
.-bottom-5  { bottom: -0.5rem; }
.-bottom-6  { bottom: -0.6rem; }
.-bottom-7  { bottom: -0.7rem; }
.-bottom-8  { bottom: -0.8rem; }
.-bottom-9  { bottom: -0.9rem; }
.-bottom-10 { bottom: -1rem; }
.-bottom-11 { bottom: -1.1rem; }
.-bottom-12 { bottom: -1.2rem; }
.-bottom-13 { bottom: -1.3rem; }
.-bottom-14 { bottom: -1.4rem; }
.-bottom-15 { bottom: -1.5rem; }
.-bottom-16 { bottom: -1.6rem; }
.-bottom-17 { bottom: -1.7rem; }
.-bottom-18 { bottom: -1.8rem; }
.-bottom-19 { bottom: -1.9rem; }
.-bottom-20 { bottom: -2rem; }
.-bottom-21 { bottom: -2.1rem; }
.-bottom-22 { bottom: -2.2rem; }
.-bottom-23 { bottom: -2.3rem; }
.-bottom-24 { bottom: -2.4rem; }
.-bottom-25 { bottom: -2.5rem; }
.-bottom-26 { bottom: -2.6rem; }
.-bottom-27 { bottom: -2.7rem; }
.-bottom-28 { bottom: -2.8rem; }
.-bottom-29 { bottom: -2.9rem; }
.-bottom-30 { bottom: -3rem; }
.-bottom-31 { bottom: -3.1rem; }
.-bottom-32 { bottom: -3.2rem; }
.-bottom-33 { bottom: -3.3rem; }
.-bottom-34 { bottom: -3.4rem; }
.-bottom-35 { bottom: -3.5rem; }
.-bottom-36 { bottom: -3.6rem; }
.-bottom-37 { bottom: -3.7rem; }
.-bottom-38 { bottom: -3.8rem; }
.-bottom-39 { bottom: -3.9rem; }
.-bottom-40 { bottom: -4rem; }
.-bottom-41 { bottom: -4.1rem; }
.-bottom-42 { bottom: -4.2rem; }
.-bottom-43 { bottom: -4.3rem; }
.-bottom-44 { bottom: -4.4rem; }
.-bottom-45 { bottom: -4.5rem; }
.-bottom-46 { bottom: -4.6rem; }
.-bottom-47 { bottom: -4.7rem; }
.-bottom-48 { bottom: -4.8rem; }
.-bottom-49 { bottom: -4.9rem; }
.-bottom-50 { bottom: -5rem; }
.-bottom-80 { bottom: -8rem; }
.-bottom-100 { bottom: -10rem; }
.-bottom-110 { bottom: -11rem; }

@media (min-width: 1024px) {
    .lg-bottom-50  { bottom: 5rem; }
    .lg-bottom-90  { bottom: 9rem; }
    .lg-bottom-130 { bottom: 13rem; }
    .lg-bottom-200 { bottom: 20rem; }

    .lg-left-30  { left: 3rem; }
    .lg-left-70  { left: 7rem; }
    .lg-left-280 { left: 28rem; }
    .lg-left-380 { left: 38rem; }
    .lg--left-30  { left: -3rem; }
    .lg--left-70  { left: -7rem; }
    .lg--left-280 { left: -28rem; }
    .lg--left-380 { left: -38rem; }

    .lg--right-5p  { right: -5%; }
    .lg--right-10p { right: -10%; }
    .lg--right-15p { right: -15%; }
    .lg--right-18p { right: -18%; }
    .lg--right-20p { right: -20%; }
    .lg--right-44p { right: -44%; }
}

.-top-1p   { top: -1%; }
.-top-2p   { top: -2%; }
.-top-3p   { top: -3%; }
.-top-4p   { top: -4%; }
.-top-10p   { top: -10%; }
.-top-13p   { top: -13%; }
.-top-14p   { top: -14%; }
.-top-20p   { top: -20%; }
.-top-23p   { top: -23%; }
.-top-30p   { top: -30%; }
.-top-40p   { top: -40%; }
.-top-50p   { top: -50%; }
.-top-60p   { top: -60%; }
.-top-63p   { top: -63%; }
.-top-70p   { top: -70%; }
.-top-80p   { top: -80%; }
.-top-90p   { top: -90%; }
.top-0   { top: 0; }

.top-7p   { top: 7%; }
.top-9p   { top: 9%; }
.top-10p   { top: 10%; }
.top-11p   { top: 11%; }
.top-15p   { top: 15%; }
.top-20p   { top: 20%; }
.top-22p   { top: 22%; }
.top-23p   { top: 23%; }
.top-24p   { top: 24%; }
.top-25p   { top: 25%; }
.top-30p   { top: 30%; }
.top-33p   { top: 33%; }
.top-35p   { top: 35%; }
.top-40p   { top: 40%; }
.top-45p   { top: 45%; }
.top-47p   { top: 47%; }
.top-50p   { top: 50%; }
.top-55p   { top: 55%; }
.top-59p   { top: 59%; }
.top-60p   { top: 60%; }
.top-62p   { top: 62%; }
.top-67p   { top: 67%; }
.top-68p   { top: 68%; }
.top-69p   { top: 69%; }
.top-70p   { top: 70%; }
.top-75p   { top: 75%; }
.top-77p   { top: 77%; }
.top-80p   { top: 80%; }
.top-86p   { top: 86%; }
.top-87p   { top: 87%; }
.top-88p   { top: 88%; }
.top-90p   { top: 90%; }


.bottom-1p { bottom: 1%; }
.bottom-2p { bottom: 2%; }
.bottom-3p { bottom: 3%; }
.bottom-5p { bottom: 5%; }
.bottom-8p { bottom: 8%; }
.bottom-9p { bottom: 9%; }
.bottom-10p { bottom: 10%; }
.bottom-14p { bottom: 14%; }
.bottom-15p { bottom: 15%; }
.bottom-20p { bottom: 20%; }
.bottom-22p { bottom: 22%; }
.bottom-23p { bottom: 23%; }
.bottom-25p { bottom: 25%; }
.bottom-30p { bottom: 30%; }
.bottom-40p { bottom: 40%; }
.bottom-41p { bottom: 41%; }
.bottom-42p { bottom: 42%; }
.bottom-45p { bottom: 45%; }


/* ===== bottom negative (%) ===== */
.-bottom-1p  { bottom: -1%; }
.-bottom-3p  { bottom: -3%; }
.-bottom-5p  { bottom: -5%; }
.-bottom-8p  { bottom: -8%; }
.-bottom-9p  { bottom: -9%; }
.-bottom-10p { bottom: -10%; }
.-bottom-14p { bottom: -14%; }
.-bottom-15p { bottom: -15%; }
.-bottom-20p { bottom: -20%; }
.-bottom-25p { bottom: -25%; }
.-bottom-30p { bottom: -30%; }
.-bottom-35p { bottom: -35%; }


@media (min-width: 1024px) {

    .lg--top-4p   { top: -4%; }
    .lg--top-3p   { top: -3%; }
    .lg--top-2p   { top: -2%; }
    .lg--top-10p   { top: -10%; }
    .lg--top-13p   { top: -13%; }
    .lg--top-14p   { top: -14%; }
    .lg--top-17p   { top: -17%; }
    .lg--top-20p   { top: -20%; }
    .lg--top-30p   { top: -30%; }
    .lg--top-40p   { top: -40%; }
    .lg--top-42p   { top: -42%; }
    .lg--top-50p   { top: -50%; }
    .lg--top-80p   { top: -80%; }



    /* ===== lg position ===== */
    .lg-left-auto  { left: auto; }
    .lg-left-0  { left: 0; }
    .lg-left-7p  { left: 7%; }
    .lg-left-9p  { left: 9%; }
    .lg-left-10p  { left: 10%; }
    .lg-left-12p  { left: 12%; }
    .lg-left-13p  { left: 13%; }
    .lg-left-14p  { left: 14%; }
    .lg-left-16p  { left: 16%; }
    .lg-left-18p  { left: 18%; }
    .lg-left-20p  { left: 20%; }
    .lg-left-25p  { left: 25%; }
    .lg-left-28p  { left: 28%; }
    .lg-left-29p  { left: 29%; }
    .lg-left-30p  { left: 30%; }
    .lg-left-36p  { left: 36%; }
    .lg-left-39p  { left: 39%; }
    .lg-left-40p  { left: 40%; }
    .lg-left-41p  { left: 41%; }
    .lg-left-42p  { left: 42%; }
    .lg-left-45p  { left: 45%; }
    .lg-left-47p  { left: 47%; }
    .lg-left-50p  { left: 50%; }
    .lg-left-59p  { left: 59%; }
    .lg-left-60p  { left: 60%; }

    .lg-bottom-0 { bottom: 0; }
    .lg-bottom-1p { bottom: 1; }
    .lg-bottom-3p { bottom: 3%; }
    .lg-bottom-5p { bottom: 5%; }
    .lg-bottom-10p { bottom: 10%; }
    .lg-bottom-14p { bottom: 14%; }
    .lg-bottom-15p { bottom: 15%; }
    .lg-bottom-16p { bottom: 16%; }
    .lg-bottom-18p { bottom: 18%; }
    .lg-bottom-19p { bottom: 19%; }
    .lg-bottom-20p { bottom: 20%; }
    .lg-bottom-21p { bottom: 21%; }
    .lg-bottom-25p { bottom: 25%; }
    .lg-bottom-40p { bottom: 40%; }


    /* ===== bottom negative (%) ===== */
    .lg--bottom-1p  { bottom: -1%; }
    .lg--bottom-3p  { bottom: -3%; }
    .lg--bottom-5p  { bottom: -5%; }
    .lg--bottom-8p  { bottom: -8%; }
    .lg--bottom-9p  { bottom: -9%; }
    .lg--bottom-10p { bottom: -10%; }
    .lg--bottom-14p { bottom: -14%; }
    .lg--bottom-15p { bottom: -15%; }
    .lg--bottom-20p { bottom: -20%; }
    .lg--bottom-25p { bottom: -25%; }
    .lg--bottom-30p { bottom: -30%; }

    .lg-top-auto { top: auto; }
    .lg-top-0 { top: 0; }
    .lg-top-1p { top: 1%; }
    .lg-top-7p { top: 7%; }
    .lg-top-10p { top: 10%; }
    .lg-top-15p { top: 15%; }
    .lg-top-17p { top: 17%; }
    .lg-top-19p { top: 19%; }
    .lg-top-20p { top: 20%; }
    .lg-top-25p { top: 25%; }
    .lg-top-30p { top: 30%; }
    .lg-top-32p { top: 32%; }
    .lg-top-35p { top: 35%; }
    .lg-top-40p { top: 40%; }
    .lg-top-42p { top: 42%; }
    .lg-top-43p { top: 43%; }
    .lg-top-45p { top: 45%; }
    .lg-top-47p { top: 47%; }
    .lg-top-48p { top: 48%; }
    .lg-top-50p { top: 50%; }
    .lg-top-55p { top: 55%; }
    .lg-top-60p { top: 60%; }
    .lg-top-65p { top: 65%; }
    .lg-top-67p { top: 67%; }
    .lg-top-70p { top: 70%; }
    .lg-top-72p { top: 72%; }
    .lg-top-80p { top: 80%; }
    .lg-right-auto { right: auto; }
    .lg-right-0 { right: 0; }
    .lg-right-3p { right: 3%; }
    .lg-right-5p { right: 5%; }
    .lg-right-8p { right: 8%; }
    .lg-right-10p { right: 10%; }
    .lg-right-12p { right: 12%; }
    .lg-right-13p { right: 13%; }
    .lg-right-15p { right: 15%; }
    .lg-right-18p { right: 18%; }
    .lg-right-20p { right: 20%; }
    .lg-right-22p { right: 22%; }
    .lg-right-25p { right: 25%; }
    .lg-right-28p { right: 28%; }
    .lg-right-29p { right: 29%; }
    .lg-right-30p { right: 30%; }
    .lg-right-35p { right: 35%; }
    .lg-right-40p { right: 40%; }
    .lg-right-50p { right: 50%; }
    .lg-right-60p { right: 60%; }
    .lg-right-70p { right: 70%; }
    .lg-right-80p { right: 80%; }
    .lg-right-90p { right: 90%; }
    .lg-right-100p { right: 100%; }

    .lg-right-35 {
        right: 3.5rem;
    }
    .lg--right-35 { right: -3.5rem; }


}


/* ===============================
   Z-Index Utilities (Tailwind-style)
   =============================== */
.z--10    { z-index: -10; }
.z-0    { z-index: 0; }
.z-10   { z-index: 10; }
.z-20   { z-index: 20; }
.z-30   { z-index: 30; }
.z-40   { z-index: 40; }
.z-50   { z-index: 50; }

.z-auto { z-index: auto; }




/* ===== grid layout ===== */
.grid {
    display: grid;
}

.inline-grid {
    display: inline-grid;
}

@media (min-width: 1024px) {
    .lg-grid {
        display: grid;
    }
    .lg-inline-grid {
        display: inline-grid;
    }
}


/* ===== grid columns ===== */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }


@media (min-width: 1024px) {
    .lg-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}



/* ===== grid rows ===== */
.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }

@media (min-width: 1024px) {
    .lg-grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
    .lg-grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
    .lg-grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
}



/* ===== grid column span ===== */
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }

@media (min-width: 1024px) {
    .lg-col-span-1 { grid-column: span 1 / span 1; }
    .lg-col-span-2 { grid-column: span 2 / span 2; }
    .lg-col-span-3 { grid-column: span 3 / span 3; }
    .lg-col-span-4 { grid-column: span 4 / span 4; }
}


/* ===== grid row span ===== */
.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }

@media (min-width: 1024px) {
    .lg-row-span-1 { grid-row: span 1 / span 1; }
    .lg-row-span-2 { grid-row: span 2 / span 2; }
    .lg-row-span-3 { grid-row: span 3 / span 3; }
    .lg-row-span-4 { grid-row: span 4 / span 4; }
}


/* ===== grid align ===== */
.place-items-start  { place-items: start; }
.place-items-center { place-items: center; }
.place-items-end    { place-items: end; }

.justify-self-auto    { justify-self: auto; }
.justify-self-start   { justify-self: start; }
.justify-self-center  { justify-self: center; }
.justify-self-end     { justify-self: end; }
.justify-self-stretch { justify-self: stretch; }

.place-content-start  { place-content: start; }
.place-content-center { place-content: center; }
.place-content-end    { place-content: end; }

@media (min-width: 1024px) {
    .lg-place-items-start  { place-items: start; }
    .lg-place-items-center { place-items: center; }
    .lg-place-items-end    { place-items: end; }

    .lg-justify-self-auto    { justify-self: auto; }
    .lg-justify-self-start   { justify-self: start; }
    .lg-justify-self-center  { justify-self: center; }
    .lg-justify-self-end     { justify-self: end; }
    .lg-justify-self-stretch { justify-self: stretch; }
}


/* ===== grid start utilities ===== */
.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }

.row-start-1 { grid-row-start: 1; }
.row-start-2 { grid-row-start: 2; }
.row-start-3 { grid-row-start: 3; }
.row-start-4 { grid-row-start: 4; }

@media (min-width: 1024px) {
  .lg-col-start-1 { grid-column-start: 1; }
  .lg-col-start-2 { grid-column-start: 2; }
  .lg-col-start-3 { grid-column-start: 3; }
  .lg-col-start-4 { grid-column-start: 4; }

  .lg-row-start-1 { grid-row-start: 1; }
  .lg-row-start-2 { grid-row-start: 2; }
  .lg-row-start-3 { grid-row-start: 3; }
  .lg-row-start-4 { grid-row-start: 4; }
}

/* Header menu layout utilities */
.w-min-1280 { width: min(100%, 1280px); }
.w-104 { width: 10.4rem; }
.w-128 { width: 12.8rem; }

.max-w-none { max-width: none; }
.max-w-32vw { max-width: 32vw; }

.min-h-0 { min-height: 0; }
.min-h-31 { min-height: 31px; }
.min-h-38 { min-height: 38px; }
.min-h-48 { min-height: 48px; }
.min-h-63 { min-height: 63px; }
.min-h-64 { min-height: 64px; }
.min-h-68 { min-height: 68px; }
.min-h-78 { min-height: 78px; }
.min-h-84 { min-height: 84px; }

.max-h-1100 { max-height: 1100px; }

.gap-22 { gap: 2.2rem; }

.px-135 {
    padding-left: 135px;
    padding-right: 135px;
}

.overflow-x-auto { overflow-x: auto; }

.cursor-pointer { cursor: pointer; }
.shrink-0 { flex-shrink: 0; }

.top-full { top: 100%; }

.visible { visibility: visible; }
.invisible { visibility: hidden; }

.appearance-none {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.outline-none { outline: none; }

.resize-none { resize: none; }

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

.transition-color-150 { transition: color 0.15s ease; }
.transition-mobile-menu {
    transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0.25s ease;
}
.transition-depth2-menu {
    transition: opacity 0.24s ease, transform 0.3s ease, visibility 0.24s ease;
}

.z-920 { z-index: 920; }

@media (min-width: 768px) {
    .md-none { display: none !important; }
    .md-block { display: block !important; }
    .md-flex { display: flex !important; }
    .md-inline { display: inline !important; }
    .md-items-center { align-items: center !important; }

    .md-left-1p { left: 1%; }
    .md-left-2p { left: 2%; }
    .md-left-3p { left: 3%; }
    .md-left-4p { left: 4%; }
    .md-left-5p { left: 5%; }
    .md-left-6p { left: 6%; }
    .md-left-7p { left: 7%; }
    .md-left-8p { left: 8%; }
    .md-left-9p { left: 9%; }
    .md-left-10p { left: 10%; }
    .md-left-11p { left: 11%; }
    .md-left-12p { left: 12%; }
    .md-left-13p { left: 13%; }
    .md-left-14p { left: 14%; }
    .md-left-15p { left: 15%; }
    .md-left-16p { left: 16%; }
    .md-left-17p { left: 17%; }
    .md-left-18p { left: 18%; }
    .md-left-19p { left: 19%; }
    .md-left-20p { left: 20%; }
    .md-left-21p { left: 21%; }
    .md-left-22p { left: 22%; }
    .md-left-23p { left: 23%; }
    .md-left-24p { left: 24%; }
    .md-left-25p { left: 25%; }
    .md-left-26p { left: 26%; }
    .md-left-27p { left: 27%; }
    .md-left-28p { left: 28%; }
    .md-left-29p { left: 29%; }
    .md-left-30p { left: 30%; }
    .md-left-31p { left: 31%; }
    .md-left-32p { left: 32%; }
    .md-left-33p { left: 33%; }
    .md-left-34p { left: 34%; }
    .md-left-35p { left: 35%; }
    .md-left-36p { left: 36%; }
    .md-left-37p { left: 37%; }
    .md-left-38p { left: 38%; }
    .md-left-39p { left: 39%; }
    .md-left-40p { left: 40%; }
    .md-left-41p { left: 41%; }
    .md-left-42p { left: 42%; }
    .md-left-43p { left: 43%; }
    .md-left-44p { left: 44%; }
    .md-left-45p { left: 45%; }
    .md-left-46p { left: 46%; }
    .md-left-47p { left: 47%; }
    .md-left-48p { left: 48%; }
    .md-left-49p { left: 49%; }
    .md-left-50p { left: 50%; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .md-max-w-768 { max-width: 768px; }
}

@media (min-width: 1024px) {
    .lg-w-auto { width: auto; }
    .lg-max-w-32vw { max-width: 32vw; }

    .lg-min-h-64 { min-height: 64px; }
    .lg-min-h-48 { min-height: 48px; }
    .lg-min-h-84 { min-height: 84px; }
    .lg-min-h-120 { min-height: 120px; }

    .lg-gap-20 { gap: 2rem; }
    .lg-gap-22 { gap: 2.2rem; }
    .lg-gap-24 { gap: 2.4rem; }
    .lg-gap-50 { gap: 5rem; }

    .lg-px-0 {
        padding-left: 0;
        padding-right: 0;
    }

    .lg-py-0 {
        padding-top: 0;
        padding-bottom: 0;
    }
}

@media (min-width: 1600px) {
    .xl-w-128 { width: 12.8rem; }

    .xl-min-h-78 { min-height: 78px; }

    .xl-gap-28 { gap: 2.8rem; }
    .xl-gap-36 { gap: 3.6rem; }

    .xl-px-135 {
        padding-left: 135px;
        padding-right: 135px;
    }
}