/* ═══════════════════════════════════════════════════════════
   PowerBoard — common.css 
═══════════════════════════════════════════════════════════ */

/* ══ width in px (base + responsive) ══ */
.w-10px { width: 10px !important; }
.w-20px { width: 20px !important; }
.w-25px { width: 25px !important; }
.w-30px { width: 30px !important; }
.w-35px { width: 35px !important; }
.w-40px { width: 40px !important; }
.w-45px { width: 45px !important; }
.w-50px { width: 50px !important; }
.w-60px { width: 60px !important; }
.w-70px { width: 70px !important; }
.w-75px { width: 75px !important; }
.w-80px { width: 80px !important; }
.w-90px { width: 90px !important; }
.w-95px { width: 95px !important; }
.w-100px { width: 100px !important; }
.w-110px { width: 110px !important; }
.w-120px { width: 120px !important; }
.w-130px { width: 130px !important; }
.w-140px { width: 140px !important; }
.w-150px { width: 150px !important; }
.w-160px { width: 160px !important; }
.w-170px { width: 170px !important; }
.w-180px { width: 180px !important; }
.w-190px { width: 190px !important; }
.w-200px { width: 200px !important; }
.w-210px { width: 210px !important; }
.w-220px { width: 220px !important; }
.w-230px { width: 230px !important; }
.w-240px { width: 240px !important; }
.w-250px { width: 250px !important; }
.w-260px { width: 260px !important; }
.w-270px { width: 270px !important; }
.w-280px { width: 280px !important; }
.w-290px { width: 290px !important; }
.w-300px { width: 300px !important; }
.w-310px { width: 310px !important; }
.w-320px { width: 320px !important; }
.w-330px { width: 330px !important; }
.w-340px { width: 340px !important; }
.w-350px { width: 350px !important; }
.w-360px { width: 360px !important; }
.w-370px { width: 370px !important; }
.w-380px { width: 380px !important; }
.w-390px { width: 390px !important; }
.w-400px { width: 400px !important; }
.w-410px { width: 410px !important; }
.w-420px { width: 420px !important; }
.w-430px { width: 430px !important; }
.w-440px { width: 440px !important; }
.w-450px { width: 450px !important; }
.w-460px { width: 460px !important; }
.w-470px { width: 470px !important; }
.w-480px { width: 480px !important; }
.w-490px { width: 490px !important; }
.w-500px { width: 500px !important; }
@media (min-width: 576px) {
.w-sm-10px { width: 10px !important; }
.w-sm-20px { width: 20px !important; }
.w-sm-25px { width: 25px !important; }
.w-sm-30px { width: 30px !important; }
.w-sm-35px { width: 35px !important; }
.w-sm-40px { width: 40px !important; }
.w-sm-45px { width: 45px !important; }
.w-sm-50px { width: 50px !important; }
.w-sm-60px { width: 60px !important; }
.w-sm-70px { width: 70px !important; }
.w-sm-75px { width: 75px !important; }
.w-sm-80px { width: 80px !important; }
.w-sm-90px { width: 90px !important; }
.w-sm-95px { width: 95px !important; }
.w-sm-100px { width: 100px !important; }
.w-sm-110px { width: 110px !important; }
.w-sm-120px { width: 120px !important; }
.w-sm-130px { width: 130px !important; }
.w-sm-140px { width: 140px !important; }
.w-sm-150px { width: 150px !important; }
.w-sm-160px { width: 160px !important; }
.w-sm-170px { width: 170px !important; }
.w-sm-180px { width: 180px !important; }
.w-sm-190px { width: 190px !important; }
.w-sm-200px { width: 200px !important; }
.w-sm-210px { width: 210px !important; }
.w-sm-220px { width: 220px !important; }
.w-sm-230px { width: 230px !important; }
.w-sm-240px { width: 240px !important; }
.w-sm-250px { width: 250px !important; }
.w-sm-260px { width: 260px !important; }
.w-sm-270px { width: 270px !important; }
.w-sm-280px { width: 280px !important; }
.w-sm-290px { width: 290px !important; }
.w-sm-300px { width: 300px !important; }
.w-sm-310px { width: 310px !important; }
.w-sm-320px { width: 320px !important; }
.w-sm-330px { width: 330px !important; }
.w-sm-340px { width: 340px !important; }
.w-sm-350px { width: 350px !important; }
.w-sm-360px { width: 360px !important; }
.w-sm-370px { width: 370px !important; }
.w-sm-380px { width: 380px !important; }
.w-sm-390px { width: 390px !important; }
.w-sm-400px { width: 400px !important; }
.w-sm-410px { width: 410px !important; }
.w-sm-420px { width: 420px !important; }
.w-sm-430px { width: 430px !important; }
.w-sm-440px { width: 440px !important; }
.w-sm-450px { width: 450px !important; }
.w-sm-460px { width: 460px !important; }
.w-sm-470px { width: 470px !important; }
.w-sm-480px { width: 480px !important; }
.w-sm-490px { width: 490px !important; }
.w-sm-500px { width: 500px !important; }
}
@media (min-width: 768px) {
.w-md-10px { width: 10px !important; }
.w-md-20px { width: 20px !important; }
.w-md-25px { width: 25px !important; }
.w-md-30px { width: 30px !important; }
.w-md-35px { width: 35px !important; }
.w-md-40px { width: 40px !important; }
.w-md-45px { width: 45px !important; }
.w-md-50px { width: 50px !important; }
.w-md-60px { width: 60px !important; }
.w-md-70px { width: 70px !important; }
.w-md-75px { width: 75px !important; }
.w-md-80px { width: 80px !important; }
.w-md-90px { width: 90px !important; }
.w-md-95px { width: 95px !important; }
.w-md-100px { width: 100px !important; }
.w-md-110px { width: 110px !important; }
.w-md-120px { width: 120px !important; }
.w-md-130px { width: 130px !important; }
.w-md-140px { width: 140px !important; }
.w-md-150px { width: 150px !important; }
.w-md-160px { width: 160px !important; }
.w-md-170px { width: 170px !important; }
.w-md-180px { width: 180px !important; }
.w-md-190px { width: 190px !important; }
.w-md-200px { width: 200px !important; }
.w-md-210px { width: 210px !important; }
.w-md-220px { width: 220px !important; }
.w-md-230px { width: 230px !important; }
.w-md-240px { width: 240px !important; }
.w-md-250px { width: 250px !important; }
.w-md-260px { width: 260px !important; }
.w-md-270px { width: 270px !important; }
.w-md-280px { width: 280px !important; }
.w-md-290px { width: 290px !important; }
.w-md-300px { width: 300px !important; }
.w-md-310px { width: 310px !important; }
.w-md-320px { width: 320px !important; }
.w-md-330px { width: 330px !important; }
.w-md-340px { width: 340px !important; }
.w-md-350px { width: 350px !important; }
.w-md-360px { width: 360px !important; }
.w-md-370px { width: 370px !important; }
.w-md-380px { width: 380px !important; }
.w-md-390px { width: 390px !important; }
.w-md-400px { width: 400px !important; }
.w-md-410px { width: 410px !important; }
.w-md-420px { width: 420px !important; }
.w-md-430px { width: 430px !important; }
.w-md-440px { width: 440px !important; }
.w-md-450px { width: 450px !important; }
.w-md-460px { width: 460px !important; }
.w-md-470px { width: 470px !important; }
.w-md-480px { width: 480px !important; }
.w-md-490px { width: 490px !important; }
.w-md-500px { width: 500px !important; }
}
@media (min-width: 992px) {
.w-lg-10px { width: 10px !important; }
.w-lg-20px { width: 20px !important; }
.w-lg-25px { width: 25px !important; }
.w-lg-30px { width: 30px !important; }
.w-lg-35px { width: 35px !important; }
.w-lg-40px { width: 40px !important; }
.w-lg-45px { width: 45px !important; }
.w-lg-50px { width: 50px !important; }
.w-lg-60px { width: 60px !important; }
.w-lg-70px { width: 70px !important; }
.w-lg-75px { width: 75px !important; }
.w-lg-80px { width: 80px !important; }
.w-lg-90px { width: 90px !important; }
.w-lg-95px { width: 95px !important; }
.w-lg-100px { width: 100px !important; }
.w-lg-110px { width: 110px !important; }
.w-lg-120px { width: 120px !important; }
.w-lg-130px { width: 130px !important; }
.w-lg-140px { width: 140px !important; }
.w-lg-150px { width: 150px !important; }
.w-lg-160px { width: 160px !important; }
.w-lg-170px { width: 170px !important; }
.w-lg-180px { width: 180px !important; }
.w-lg-190px { width: 190px !important; }
.w-lg-200px { width: 200px !important; }
.w-lg-210px { width: 210px !important; }
.w-lg-220px { width: 220px !important; }
.w-lg-230px { width: 230px !important; }
.w-lg-240px { width: 240px !important; }
.w-lg-250px { width: 250px !important; }
.w-lg-260px { width: 260px !important; }
.w-lg-270px { width: 270px !important; }
.w-lg-280px { width: 280px !important; }
.w-lg-290px { width: 290px !important; }
.w-lg-300px { width: 300px !important; }
.w-lg-310px { width: 310px !important; }
.w-lg-320px { width: 320px !important; }
.w-lg-330px { width: 330px !important; }
.w-lg-340px { width: 340px !important; }
.w-lg-350px { width: 350px !important; }
.w-lg-360px { width: 360px !important; }
.w-lg-370px { width: 370px !important; }
.w-lg-380px { width: 380px !important; }
.w-lg-390px { width: 390px !important; }
.w-lg-400px { width: 400px !important; }
.w-lg-410px { width: 410px !important; }
.w-lg-420px { width: 420px !important; }
.w-lg-430px { width: 430px !important; }
.w-lg-440px { width: 440px !important; }
.w-lg-450px { width: 450px !important; }
.w-lg-460px { width: 460px !important; }
.w-lg-470px { width: 470px !important; }
.w-lg-480px { width: 480px !important; }
.w-lg-490px { width: 490px !important; }
.w-lg-500px { width: 500px !important; }
}
@media (min-width: 1200px) {
.w-xl-10px { width: 10px !important; }
.w-xl-20px { width: 20px !important; }
.w-xl-25px { width: 25px !important; }
.w-xl-30px { width: 30px !important; }
.w-xl-35px { width: 35px !important; }
.w-xl-40px { width: 40px !important; }
.w-xl-45px { width: 45px !important; }
.w-xl-50px { width: 50px !important; }
.w-xl-60px { width: 60px !important; }
.w-xl-70px { width: 70px !important; }
.w-xl-75px { width: 75px !important; }
.w-xl-80px { width: 80px !important; }
.w-xl-90px { width: 90px !important; }
.w-xl-95px { width: 95px !important; }
.w-xl-100px { width: 100px !important; }
.w-xl-110px { width: 110px !important; }
.w-xl-120px { width: 120px !important; }
.w-xl-130px { width: 130px !important; }
.w-xl-140px { width: 140px !important; }
.w-xl-150px { width: 150px !important; }
.w-xl-160px { width: 160px !important; }
.w-xl-170px { width: 170px !important; }
.w-xl-180px { width: 180px !important; }
.w-xl-190px { width: 190px !important; }
.w-xl-200px { width: 200px !important; }
.w-xl-210px { width: 210px !important; }
.w-xl-220px { width: 220px !important; }
.w-xl-230px { width: 230px !important; }
.w-xl-240px { width: 240px !important; }
.w-xl-250px { width: 250px !important; }
.w-xl-260px { width: 260px !important; }
.w-xl-270px { width: 270px !important; }
.w-xl-280px { width: 280px !important; }
.w-xl-290px { width: 290px !important; }
.w-xl-300px { width: 300px !important; }
.w-xl-310px { width: 310px !important; }
.w-xl-320px { width: 320px !important; }
.w-xl-330px { width: 330px !important; }
.w-xl-340px { width: 340px !important; }
.w-xl-350px { width: 350px !important; }
.w-xl-360px { width: 360px !important; }
.w-xl-370px { width: 370px !important; }
.w-xl-380px { width: 380px !important; }
.w-xl-390px { width: 390px !important; }
.w-xl-400px { width: 400px !important; }
.w-xl-410px { width: 410px !important; }
.w-xl-420px { width: 420px !important; }
.w-xl-430px { width: 430px !important; }
.w-xl-440px { width: 440px !important; }
.w-xl-450px { width: 450px !important; }
.w-xl-460px { width: 460px !important; }
.w-xl-470px { width: 470px !important; }
.w-xl-480px { width: 480px !important; }
.w-xl-490px { width: 490px !important; }
.w-xl-500px { width: 500px !important; }
}
@media (min-width: 1400px) {
.w-xxl-10px { width: 10px !important; }
.w-xxl-20px { width: 20px !important; }
.w-xxl-25px { width: 25px !important; }
.w-xxl-30px { width: 30px !important; }
.w-xxl-35px { width: 35px !important; }
.w-xxl-40px { width: 40px !important; }
.w-xxl-45px { width: 45px !important; }
.w-xxl-50px { width: 50px !important; }
.w-xxl-60px { width: 60px !important; }
.w-xxl-70px { width: 70px !important; }
.w-xxl-75px { width: 75px !important; }
.w-xxl-80px { width: 80px !important; }
.w-xxl-90px { width: 90px !important; }
.w-xxl-95px { width: 95px !important; }
.w-xxl-100px { width: 100px !important; }
.w-xxl-110px { width: 110px !important; }
.w-xxl-120px { width: 120px !important; }
.w-xxl-130px { width: 130px !important; }
.w-xxl-140px { width: 140px !important; }
.w-xxl-150px { width: 150px !important; }
.w-xxl-160px { width: 160px !important; }
.w-xxl-170px { width: 170px !important; }
.w-xxl-180px { width: 180px !important; }
.w-xxl-190px { width: 190px !important; }
.w-xxl-200px { width: 200px !important; }
.w-xxl-210px { width: 210px !important; }
.w-xxl-220px { width: 220px !important; }
.w-xxl-230px { width: 230px !important; }
.w-xxl-240px { width: 240px !important; }
.w-xxl-250px { width: 250px !important; }
.w-xxl-260px { width: 260px !important; }
.w-xxl-270px { width: 270px !important; }
.w-xxl-280px { width: 280px !important; }
.w-xxl-290px { width: 290px !important; }
.w-xxl-300px { width: 300px !important; }
.w-xxl-310px { width: 310px !important; }
.w-xxl-320px { width: 320px !important; }
.w-xxl-330px { width: 330px !important; }
.w-xxl-340px { width: 340px !important; }
.w-xxl-350px { width: 350px !important; }
.w-xxl-360px { width: 360px !important; }
.w-xxl-370px { width: 370px !important; }
.w-xxl-380px { width: 380px !important; }
.w-xxl-390px { width: 390px !important; }
.w-xxl-400px { width: 400px !important; }
.w-xxl-410px { width: 410px !important; }
.w-xxl-420px { width: 420px !important; }
.w-xxl-430px { width: 430px !important; }
.w-xxl-440px { width: 440px !important; }
.w-xxl-450px { width: 450px !important; }
.w-xxl-460px { width: 460px !important; }
.w-xxl-470px { width: 470px !important; }
.w-xxl-480px { width: 480px !important; }
.w-xxl-490px { width: 490px !important; }
.w-xxl-500px { width: 500px !important; }
}

/* ══ height in px (base + responsive) ══ */
.h-2px { height: 2px !important; }
.h-3px { height: 3px !important; }
.h-10px { height: 10px !important; }
.h-20px { height: 20px !important; }
.h-25px { height: 25px !important; }
.h-28px { height: 28px !important; }
.h-30px { height: 30px !important; }
.h-35px { height: 35px !important; }
.h-40px { height: 40px !important; }
.h-45px { height: 45px !important; }
.h-50px { height: 50px !important; }
.h-60px { height: 60px !important; }
.h-70px { height: 70px !important; }
.h-75px { height: 75px !important; }
.h-80px { height: 80px !important; }
.h-90px { height: 90px !important; }
.h-95px { height: 95px !important; }
.h-100px { height: 100px !important; }
.h-110px { height: 110px !important; }
.h-120px { height: 120px !important; }
.h-130px { height: 130px !important; }
.h-140px { height: 140px !important; }
.h-150px { height: 150px !important; }
.h-160px { height: 160px !important; }
.h-170px { height: 170px !important; }
.h-180px { height: 180px !important; }
.h-190px { height: 190px !important; }
.h-200px { height: 200px !important; }
.h-210px { height: 210px !important; }
.h-220px { height: 220px !important; }
.h-230px { height: 230px !important; }
.h-240px { height: 240px !important; }
.h-250px { height: 250px !important; }
.h-260px { height: 260px !important; }
.h-270px { height: 270px !important; }
.h-280px { height: 280px !important; }
.h-290px { height: 290px !important; }
.h-300px { height: 300px !important; }
.h-310px { height: 310px !important; }
.h-320px { height: 320px !important; }
.h-330px { height: 330px !important; }
.h-340px { height: 340px !important; }
.h-350px { height: 350px !important; }
.h-360px { height: 360px !important; }
.h-370px { height: 370px !important; }
.h-380px { height: 380px !important; }
.h-390px { height: 390px !important; }
.h-400px { height: 400px !important; }
.h-410px { height: 410px !important; }
.h-420px { height: 420px !important; }
.h-430px { height: 430px !important; }
.h-440px { height: 440px !important; }
.h-450px { height: 450px !important; }
.h-460px { height: 460px !important; }
.h-470px { height: 470px !important; }
.h-480px { height: 480px !important; }
.h-490px { height: 490px !important; }
.h-500px { height: 500px !important; }
@media (min-width: 576px) {
.h-sm-10px { height: 10px !important; }
.h-sm-20px { height: 20px !important; }
.h-sm-25px { height: 25px !important; }
.h-sm-30px { height: 30px !important; }
.h-sm-35px { height: 35px !important; }
.h-sm-40px { height: 40px !important; }
.h-sm-45px { height: 45px !important; }
.h-sm-50px { height: 50px !important; }
.h-sm-60px { height: 60px !important; }
.h-sm-70px { height: 70px !important; }
.h-sm-75px { height: 75px !important; }
.h-sm-80px { height: 80px !important; }
.h-sm-90px { height: 90px !important; }
.h-sm-95px { height: 95px !important; }
.h-sm-100px { height: 100px !important; }
.h-sm-110px { height: 110px !important; }
.h-sm-120px { height: 120px !important; }
.h-sm-130px { height: 130px !important; }
.h-sm-140px { height: 140px !important; }
.h-sm-150px { height: 150px !important; }
.h-sm-160px { height: 160px !important; }
.h-sm-170px { height: 170px !important; }
.h-sm-180px { height: 180px !important; }
.h-sm-190px { height: 190px !important; }
.h-sm-200px { height: 200px !important; }
.h-sm-210px { height: 210px !important; }
.h-sm-220px { height: 220px !important; }
.h-sm-230px { height: 230px !important; }
.h-sm-240px { height: 240px !important; }
.h-sm-250px { height: 250px !important; }
.h-sm-260px { height: 260px !important; }
.h-sm-270px { height: 270px !important; }
.h-sm-280px { height: 280px !important; }
.h-sm-290px { height: 290px !important; }
.h-sm-300px { height: 300px !important; }
.h-sm-310px { height: 310px !important; }
.h-sm-320px { height: 320px !important; }
.h-sm-330px { height: 330px !important; }
.h-sm-340px { height: 340px !important; }
.h-sm-350px { height: 350px !important; }
.h-sm-360px { height: 360px !important; }
.h-sm-370px { height: 370px !important; }
.h-sm-380px { height: 380px !important; }
.h-sm-390px { height: 390px !important; }
.h-sm-400px { height: 400px !important; }
.h-sm-410px { height: 410px !important; }
.h-sm-420px { height: 420px !important; }
.h-sm-430px { height: 430px !important; }
.h-sm-440px { height: 440px !important; }
.h-sm-450px { height: 450px !important; }
.h-sm-460px { height: 460px !important; }
.h-sm-470px { height: 470px !important; }
.h-sm-480px { height: 480px !important; }
.h-sm-490px { height: 490px !important; }
.h-sm-500px { height: 500px !important; }
}
@media (min-width: 768px) {
.h-md-10px { height: 10px !important; }
.h-md-20px { height: 20px !important; }
.h-md-25px { height: 25px !important; }
.h-md-30px { height: 30px !important; }
.h-md-35px { height: 35px !important; }
.h-md-40px { height: 40px !important; }
.h-md-45px { height: 45px !important; }
.h-md-50px { height: 50px !important; }
.h-md-60px { height: 60px !important; }
.h-md-70px { height: 70px !important; }
.h-md-75px { height: 75px !important; }
.h-md-80px { height: 80px !important; }
.h-md-90px { height: 90px !important; }
.h-md-95px { height: 95px !important; }
.h-md-100px { height: 100px !important; }
.h-md-110px { height: 110px !important; }
.h-md-120px { height: 120px !important; }
.h-md-130px { height: 130px !important; }
.h-md-140px { height: 140px !important; }
.h-md-150px { height: 150px !important; }
.h-md-160px { height: 160px !important; }
.h-md-170px { height: 170px !important; }
.h-md-180px { height: 180px !important; }
.h-md-190px { height: 190px !important; }
.h-md-200px { height: 200px !important; }
.h-md-210px { height: 210px !important; }
.h-md-220px { height: 220px !important; }
.h-md-230px { height: 230px !important; }
.h-md-240px { height: 240px !important; }
.h-md-250px { height: 250px !important; }
.h-md-260px { height: 260px !important; }
.h-md-270px { height: 270px !important; }
.h-md-280px { height: 280px !important; }
.h-md-290px { height: 290px !important; }
.h-md-300px { height: 300px !important; }
.h-md-310px { height: 310px !important; }
.h-md-320px { height: 320px !important; }
.h-md-330px { height: 330px !important; }
.h-md-340px { height: 340px !important; }
.h-md-350px { height: 350px !important; }
.h-md-360px { height: 360px !important; }
.h-md-370px { height: 370px !important; }
.h-md-380px { height: 380px !important; }
.h-md-390px { height: 390px !important; }
.h-md-400px { height: 400px !important; }
.h-md-410px { height: 410px !important; }
.h-md-420px { height: 420px !important; }
.h-md-430px { height: 430px !important; }
.h-md-440px { height: 440px !important; }
.h-md-450px { height: 450px !important; }
.h-md-460px { height: 460px !important; }
.h-md-470px { height: 470px !important; }
.h-md-480px { height: 480px !important; }
.h-md-490px { height: 490px !important; }
.h-md-500px { height: 500px !important; }
}
@media (min-width: 992px) {
.h-lg-10px { height: 10px !important; }
.h-lg-20px { height: 20px !important; }
.h-lg-25px { height: 25px !important; }
.h-lg-30px { height: 30px !important; }
.h-lg-35px { height: 35px !important; }
.h-lg-40px { height: 40px !important; }
.h-lg-45px { height: 45px !important; }
.h-lg-50px { height: 50px !important; }
.h-lg-60px { height: 60px !important; }
.h-lg-70px { height: 70px !important; }
.h-lg-75px { height: 75px !important; }
.h-lg-80px { height: 80px !important; }
.h-lg-90px { height: 90px !important; }
.h-lg-95px { height: 95px !important; }
.h-lg-100px { height: 100px !important; }
.h-lg-110px { height: 110px !important; }
.h-lg-120px { height: 120px !important; }
.h-lg-130px { height: 130px !important; }
.h-lg-140px { height: 140px !important; }
.h-lg-150px { height: 150px !important; }
.h-lg-160px { height: 160px !important; }
.h-lg-170px { height: 170px !important; }
.h-lg-180px { height: 180px !important; }
.h-lg-190px { height: 190px !important; }
.h-lg-200px { height: 200px !important; }
.h-lg-210px { height: 210px !important; }
.h-lg-220px { height: 220px !important; }
.h-lg-230px { height: 230px !important; }
.h-lg-240px { height: 240px !important; }
.h-lg-250px { height: 250px !important; }
.h-lg-260px { height: 260px !important; }
.h-lg-270px { height: 270px !important; }
.h-lg-280px { height: 280px !important; }
.h-lg-290px { height: 290px !important; }
.h-lg-300px { height: 300px !important; }
.h-lg-310px { height: 310px !important; }
.h-lg-320px { height: 320px !important; }
.h-lg-330px { height: 330px !important; }
.h-lg-340px { height: 340px !important; }
.h-lg-350px { height: 350px !important; }
.h-lg-360px { height: 360px !important; }
.h-lg-370px { height: 370px !important; }
.h-lg-380px { height: 380px !important; }
.h-lg-390px { height: 390px !important; }
.h-lg-400px { height: 400px !important; }
.h-lg-410px { height: 410px !important; }
.h-lg-420px { height: 420px !important; }
.h-lg-430px { height: 430px !important; }
.h-lg-440px { height: 440px !important; }
.h-lg-450px { height: 450px !important; }
.h-lg-460px { height: 460px !important; }
.h-lg-470px { height: 470px !important; }
.h-lg-480px { height: 480px !important; }
.h-lg-490px { height: 490px !important; }
.h-lg-500px { height: 500px !important; }
}
@media (min-width: 1200px) {
.h-xl-10px { height: 10px !important; }
.h-xl-20px { height: 20px !important; }
.h-xl-25px { height: 25px !important; }
.h-xl-30px { height: 30px !important; }
.h-xl-35px { height: 35px !important; }
.h-xl-40px { height: 40px !important; }
.h-xl-45px { height: 45px !important; }
.h-xl-50px { height: 50px !important; }
.h-xl-60px { height: 60px !important; }
.h-xl-70px { height: 70px !important; }
.h-xl-75px { height: 75px !important; }
.h-xl-80px { height: 80px !important; }
.h-xl-90px { height: 90px !important; }
.h-xl-95px { height: 95px !important; }
.h-xl-100px { height: 100px !important; }
.h-xl-110px { height: 110px !important; }
.h-xl-120px { height: 120px !important; }
.h-xl-130px { height: 130px !important; }
.h-xl-140px { height: 140px !important; }
.h-xl-150px { height: 150px !important; }
.h-xl-160px { height: 160px !important; }
.h-xl-170px { height: 170px !important; }
.h-xl-180px { height: 180px !important; }
.h-xl-190px { height: 190px !important; }
.h-xl-200px { height: 200px !important; }
.h-xl-210px { height: 210px !important; }
.h-xl-220px { height: 220px !important; }
.h-xl-230px { height: 230px !important; }
.h-xl-240px { height: 240px !important; }
.h-xl-250px { height: 250px !important; }
.h-xl-260px { height: 260px !important; }
.h-xl-270px { height: 270px !important; }
.h-xl-280px { height: 280px !important; }
.h-xl-290px { height: 290px !important; }
.h-xl-300px { height: 300px !important; }
.h-xl-310px { height: 310px !important; }
.h-xl-320px { height: 320px !important; }
.h-xl-330px { height: 330px !important; }
.h-xl-340px { height: 340px !important; }
.h-xl-350px { height: 350px !important; }
.h-xl-360px { height: 360px !important; }
.h-xl-370px { height: 370px !important; }
.h-xl-380px { height: 380px !important; }
.h-xl-390px { height: 390px !important; }
.h-xl-400px { height: 400px !important; }
.h-xl-410px { height: 410px !important; }
.h-xl-420px { height: 420px !important; }
.h-xl-430px { height: 430px !important; }
.h-xl-440px { height: 440px !important; }
.h-xl-450px { height: 450px !important; }
.h-xl-460px { height: 460px !important; }
.h-xl-470px { height: 470px !important; }
.h-xl-480px { height: 480px !important; }
.h-xl-490px { height: 490px !important; }
.h-xl-500px { height: 500px !important; }
}
@media (min-width: 1400px) {
.h-xxl-10px { height: 10px !important; }
.h-xxl-20px { height: 20px !important; }
.h-xxl-25px { height: 25px !important; }
.h-xxl-30px { height: 30px !important; }
.h-xxl-35px { height: 35px !important; }
.h-xxl-40px { height: 40px !important; }
.h-xxl-45px { height: 45px !important; }
.h-xxl-50px { height: 50px !important; }
.h-xxl-60px { height: 60px !important; }
.h-xxl-70px { height: 70px !important; }
.h-xxl-75px { height: 75px !important; }
.h-xxl-80px { height: 80px !important; }
.h-xxl-90px { height: 90px !important; }
.h-xxl-95px { height: 95px !important; }
.h-xxl-100px { height: 100px !important; }
.h-xxl-110px { height: 110px !important; }
.h-xxl-120px { height: 120px !important; }
.h-xxl-130px { height: 130px !important; }
.h-xxl-140px { height: 140px !important; }
.h-xxl-150px { height: 150px !important; }
.h-xxl-160px { height: 160px !important; }
.h-xxl-170px { height: 170px !important; }
.h-xxl-180px { height: 180px !important; }
.h-xxl-190px { height: 190px !important; }
.h-xxl-200px { height: 200px !important; }
.h-xxl-210px { height: 210px !important; }
.h-xxl-220px { height: 220px !important; }
.h-xxl-230px { height: 230px !important; }
.h-xxl-240px { height: 240px !important; }
.h-xxl-250px { height: 250px !important; }
.h-xxl-260px { height: 260px !important; }
.h-xxl-270px { height: 270px !important; }
.h-xxl-280px { height: 280px !important; }
.h-xxl-290px { height: 290px !important; }
.h-xxl-300px { height: 300px !important; }
.h-xxl-310px { height: 310px !important; }
.h-xxl-320px { height: 320px !important; }
.h-xxl-330px { height: 330px !important; }
.h-xxl-340px { height: 340px !important; }
.h-xxl-350px { height: 350px !important; }
.h-xxl-360px { height: 360px !important; }
.h-xxl-370px { height: 370px !important; }
.h-xxl-380px { height: 380px !important; }
.h-xxl-390px { height: 390px !important; }
.h-xxl-400px { height: 400px !important; }
.h-xxl-410px { height: 410px !important; }
.h-xxl-420px { height: 420px !important; }
.h-xxl-430px { height: 430px !important; }
.h-xxl-440px { height: 440px !important; }
.h-xxl-450px { height: 450px !important; }
.h-xxl-460px { height: 460px !important; }
.h-xxl-470px { height: 470px !important; }
.h-xxl-480px { height: 480px !important; }
.h-xxl-490px { height: 490px !important; }
.h-xxl-500px { height: 500px !important; }
}

/* ══ Font size in px ══ */
.fs-1px { font-size: 1px !important; }
.fs-2px { font-size: 2px !important; }
.fs-3px { font-size: 3px !important; }
.fs-4px { font-size: 4px !important; }
.fs-5px { font-size: 5px !important; }
.fs-6px { font-size: 6px !important; }
.fs-7px { font-size: 7px !important; }
.fs-8px { font-size: 8px !important; }
.fs-9px { font-size: 9px !important; }
.fs-10px { font-size: 10px !important; }
.fs-11px { font-size: 11px !important; }
.fs-12px { font-size: 12px !important; }
.fs-13px { font-size: 13px !important; }
.fs-14px { font-size: 14px !important; }
.fs-15px { font-size: 15px !important; }
.fs-16px { font-size: 16px !important; }
.fs-17px { font-size: 17px !important; }
.fs-18px { font-size: 18px !important; }
.fs-19px { font-size: 19px !important; }
.fs-20px { font-size: 20px !important; }
.fs-21px { font-size: 21px !important; }
.fs-22px { font-size: 22px !important; }
.fs-23px { font-size: 23px !important; }
.fs-24px { font-size: 24px !important; }
.fs-25px { font-size: 25px !important; }
.fs-26px { font-size: 26px !important; }
.fs-27px { font-size: 27px !important; }
.fs-28px { font-size: 28px !important; }
.fs-29px { font-size: 29px !important; }
.fs-30px { font-size: 30px !important; }
.fs-31px { font-size: 31px !important; }
.fs-32px { font-size: 32px !important; }
.fs-33px { font-size: 33px !important; }
.fs-34px { font-size: 34px !important; }
.fs-35px { font-size: 35px !important; }
.fs-36px { font-size: 36px !important; }
.fs-37px { font-size: 37px !important; }
.fs-38px { font-size: 38px !important; }
.fs-39px { font-size: 39px !important; }
.fs-40px { font-size: 40px !important; }
.fs-41px { font-size: 41px !important; }
.fs-42px { font-size: 42px !important; }
.fs-43px { font-size: 43px !important; }
.fs-44px { font-size: 44px !important; }
.fs-45px { font-size: 45px !important; }
.fs-46px { font-size: 46px !important; }
.fs-47px { font-size: 47px !important; }
.fs-48px { font-size: 48px !important; }
.fs-49px { font-size: 49px !important; }
.fs-50px { font-size: 50px !important; }
.fs-52px { font-size: 52px !important; }
.fs-54px { font-size: 54px !important; }
.fs-56px { font-size: 56px !important; }
.fs-58px { font-size: 58px !important; }
.fs-60px { font-size: 60px !important; }
.fs-120px { font-size: 120px !important; }

/* ══ Font weight utilities ══ */
.fw-100 { font-weight: 100 !important; }
.fw-200 { font-weight: 200 !important; }
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fw-900 { font-weight: 900 !important; }

/* ══ Padding in px ══ */
.p-1px { padding: 1px !important; }
.p-2px { padding: 2px !important; }
.p-3px { padding: 3px !important; }
.p-4px { padding: 4px !important; }
.p-5px { padding: 5px !important; }
.p-6px { padding: 6px !important; }
.p-7px { padding: 7px !important; }
.p-8px { padding: 8px !important; }
.p-9px { padding: 9px !important; }
.p-10px { padding: 10px !important; }
.p-12px { padding: 12px !important; }
.p-14px { padding: 14px !important; }
.p-16px { padding: 16px !important; }
.p-18px { padding: 18px !important; }
.p-20px { padding: 20px !important; }
.p-24px { padding: 24px !important; }
.p-30px { padding: 30px !important; }
.p-40px { padding: 40px !important; }

/* ══ Padding-top in px ══ */
.pt-1px  { padding-top: 1px !important; }
.pt-2px  { padding-top: 2px !important; }
.pt-3px  { padding-top: 3px !important; }
.pt-4px  { padding-top: 4px !important; }
.pt-5px  { padding-top: 5px !important; }
.pt-6px  { padding-top: 6px !important; }
.pt-7px  { padding-top: 7px !important; }
.pt-8px  { padding-top: 8px !important; }
.pt-9px  { padding-top: 9px !important; }
.pt-10px { padding-top: 10px !important; }
.pt-12px { padding-top: 12px !important; }
.pt-14px { padding-top: 14px !important; }
.pt-16px { padding-top: 16px !important; }
.pt-18px { padding-top: 18px !important; }
.pt-20px { padding-top: 20px !important; }
.pt-22px { padding-top: 22px !important; }
.pt-24px { padding-top: 24px !important; }
.pt-26px { padding-top: 26px !important; }
.pt-30px { padding-top: 30px !important; }
.pt-40px { padding-top: 40px !important; }

/* ══ Padding-bottom in px ══ */
.pb-1px  { padding-bottom: 1px !important; }
.pb-2px  { padding-bottom: 2px !important; }
.pb-3px  { padding-bottom: 3px !important; }
.pb-4px  { padding-bottom: 4px !important; }
.pb-5px  { padding-bottom: 5px !important; }
.pb-6px  { padding-bottom: 6px !important; }
.pb-7px  { padding-bottom: 7px !important; }
.pb-8px  { padding-bottom: 8px !important; }
.pb-9px  { padding-bottom: 9px !important; }
.pb-10px { padding-bottom: 10px !important; }
.pb-12px { padding-bottom: 12px !important; }
.pb-14px { padding-bottom: 14px !important; }
.pb-16px { padding-bottom: 16px !important; }
.pb-18px { padding-bottom: 18px !important; }
.pb-20px { padding-bottom: 20px !important; }
.pb-22px { padding-bottom: 22px !important; }
.pb-24px { padding-bottom: 24px !important; }
.pb-26px { padding-bottom: 26px !important; }
.pb-30px { padding-bottom: 30px !important; }
.pb-40px { padding-bottom: 40px !important; }

/* ══ Directional padding in py ══ */
.py-1px  { padding-top: 1px !important;  padding-bottom: 1px !important; }
.py-2px  { padding-top: 2px !important;  padding-bottom: 2px !important; }
.py-3px  { padding-top: 3px !important;  padding-bottom: 3px !important; }
.py-4px  { padding-top: 4px !important;  padding-bottom: 4px !important; }
.py-5px  { padding-top: 5px !important;  padding-bottom: 5px !important; }
.py-6px  { padding-top: 6px !important;  padding-bottom: 6px !important; }
.py-7px  { padding-top: 7px !important;  padding-bottom: 7px !important; }
.py-8px  { padding-top: 8px !important;  padding-bottom: 8px !important; }
.py-9px  { padding-top: 9px !important;  padding-bottom: 9px !important; }
.py-10px { padding-top: 10px !important; padding-bottom: 10px !important; }
.py-12px { padding-top: 12px !important; padding-bottom: 12px !important; }
.py-14px { padding-top: 14px !important; padding-bottom: 14px !important; }
.py-16px { padding-top: 16px !important; padding-bottom: 16px !important; }
.py-18px { padding-top: 18px !important; padding-bottom: 18px !important; }
.py-20px { padding-top: 20px !important; padding-bottom: 20px !important; }
.py-22px { padding-top: 22px !important; padding-bottom: 22px !important; }
.py-24px { padding-top: 24px !important; padding-bottom: 24px !important; }
.py-26px { padding-top: 26px !important; padding-bottom: 26px !important; }
.py-30px { padding-top: 30px !important; padding-bottom: 30px !important; }
.py-40px { padding-top: 40px !important; padding-bottom: 40px !important; }

/* ══ Directional padding in px ══ */
.px-1px  { padding-left: 1px !important;  padding-right: 1px !important; }
.px-2px  { padding-left: 2px !important;  padding-right: 2px !important; }
.px-3px  { padding-left: 3px !important;  padding-right: 3px !important; }
.px-4px  { padding-left: 4px !important;  padding-right: 4px !important; }
.px-5px  { padding-left: 5px !important;  padding-right: 5px !important; }
.px-6px  { padding-left: 6px !important;  padding-right: 6px !important; }
.px-7px  { padding-left: 7px !important;  padding-right: 7px !important; }
.px-8px  { padding-left: 8px !important;  padding-right: 8px !important; }
.px-9px  { padding-left: 9px !important;  padding-right: 9px !important; }
.px-10px { padding-left: 10px !important; padding-right: 10px !important; }
.px-11px { padding-left: 11px !important; padding-right: 11px !important; }
.px-12px { padding-left: 12px !important; padding-right: 12px !important; }
.px-14px { padding-left: 14px !important; padding-right: 14px !important; }
.px-16px { padding-left: 16px !important; padding-right: 16px !important; }
.px-18px { padding-left: 18px !important; padding-right: 18px !important; }
.px-20px { padding-left: 20px !important; padding-right: 20px !important; }
.px-22px { padding-left: 22px !important; padding-right: 22px !important; }
.px-24px { padding-left: 24px !important; padding-right: 24px !important; }
.px-26px { padding-left: 26px !important; padding-right: 26px !important; }
.px-30px { padding-left: 30px !important; padding-right: 30px !important; }
.px-40px { padding-left: 40px !important; padding-right: 40px !important; }

/* ══ Responsive px padding (max-width: 575.98px) ══ */
@media (max-width: 575.98px) {
  .py-xs-18px { padding-top: 18px !important; padding-bottom: 18px !important; }
  .py-xs-22px { padding-top: 22px !important; padding-bottom: 22px !important; }
  .px-xs-18px { padding-left: 18px !important; padding-right: 18px !important; }
  .px-xs-22px { padding-left: 22px !important; padding-right: 22px !important; }
}

/* ══ Responsive font-size (max-width: 575.98px) ══ */
@media (max-width: 575.98px) {
  .fs-xs-38px { font-size: 38px !important; }
}

/* ══ Gap in px ══ */
.gap-2px { gap: 2px !important; }
.gap-4px { gap: 4px !important; }
.gap-6px { gap: 6px !important; }
.gap-7px { gap: 7px !important; }
.gap-8px { gap: 8px !important; }
.gap-10px { gap: 10px !important; }
.gap-12px { gap: 12px !important; }
.gap-14px { gap: 14px !important; }
.gap-16px { gap: 16px !important; }
.gap-20px { gap: 20px !important; }
.gap-24px { gap: 24px !important; }
.gap-30px { gap: 30px !important; }

/* ══ Border radius in px ══ */
.rounded-2px { border-radius: 2px !important; }
.rounded-4px { border-radius: 4px !important; }
.rounded-6px { border-radius: 6px !important; }
.rounded-8px { border-radius: 8px !important; }
.rounded-10px { border-radius: 10px !important; }
.rounded-12px { border-radius: 12px !important; }
.rounded-14px { border-radius: 14px !important; }
.rounded-16px { border-radius: 16px !important; }
.rounded-20px { border-radius: 20px !important; }
.rounded-24px { border-radius: 24px !important; }
.rounded-full { border-radius: 9999px !important; }

/* ══ Margin-top in px ══ */
.mt-1px  { margin-top: 1px !important; }
.mt-2px  { margin-top: 2px !important; }
.mt-3px  { margin-top: 3px !important; }
.mt-4px  { margin-top: 4px !important; }
.mt-5px  { margin-top: 5px !important; }
.mt-6px  { margin-top: 6px !important; }
.mt-7px  { margin-top: 7px !important; }
.mt-8px  { margin-top: 8px !important; }
.mt-10px { margin-top: 10px !important; }
.mt-12px { margin-top: 12px !important; }
.mt-14px { margin-top: 14px !important; }
.mt-16px { margin-top: 16px !important; }
.mt-18px { margin-top: 18px !important; }
.mt-20px { margin-top: 20px !important; }
.mt-24px { margin-top: 24px !important; }
.mt-30px { margin-top: 30px !important; }
.mt-40px { margin-top: 40px !important; }

/* ══ Margin-bottom in px ══ */
.mb-1px  { margin-bottom: 1px !important; }
.mb-2px  { margin-bottom: 2px !important; }
.mb-3px  { margin-bottom: 3px !important; }
.mb-4px  { margin-bottom: 4px !important; }
.mb-5px  { margin-bottom: 5px !important; }
.mb-6px  { margin-bottom: 6px !important; }
.mb-7px  { margin-bottom: 7px !important; }
.mb-8px  { margin-bottom: 8px !important; }
.mb-10px { margin-bottom: 10px !important; }
.mb-12px { margin-bottom: 12px !important; }
.mb-14px { margin-bottom: 14px !important; }
.mb-16px { margin-bottom: 16px !important; }
.mb-18px { margin-bottom: 18px !important; }
.mb-20px { margin-bottom: 20px !important; }
.mb-24px { margin-bottom: 24px !important; }
.mb-30px { margin-bottom: 30px !important; }
.mb-40px { margin-bottom: 40px !important; }

/* ══ My (margin-top + margin-bottom) px utilities ══ */
.my-0px  { margin-top: 0px !important; margin-bottom: 0px !important; }
.my-2px  { margin-top: 2px !important; margin-bottom: 2px !important; }
.my-4px  { margin-top: 4px !important; margin-bottom: 4px !important; }
.my-6px  { margin-top: 6px !important; margin-bottom: 6px !important; }
.my-8px  { margin-top: 8px !important; margin-bottom: 8px !important; }
.my-10px { margin-top: 10px !important; margin-bottom: 10px !important; }
.my-11px { margin-top: 11px !important; margin-bottom: 11px !important; }
.my-12px { margin-top: 12px !important; margin-bottom: 12px !important; }
.my-14px { margin-top: 14px !important; margin-bottom: 14px !important; }
.my-16px { margin-top: 16px !important; margin-bottom: 16px !important; }
.my-18px { margin-top: 18px !important; margin-bottom: 18px !important; }
.my-20px { margin-top: 20px !important; margin-bottom: 20px !important; }

/* ══ Negative position offsets — for positioned elements (position-absolute/relative) ══ */
.top-n5px     { top: -5px !important; }
.top-n10px    { top: -10px !important; }
.top-n15px    { top: -15px !important; }
.top-n20px    { top: -20px !important; }
.top-n25px    { top: -25px !important; }
.top-n30px    { top: -30px !important; }

.bottom-n5px  { bottom: -5px !important; }
.bottom-n10px { bottom: -10px !important; }
.bottom-n15px { bottom: -15px !important; }
.bottom-n20px { bottom: -20px !important; }
.bottom-n25px { bottom: -25px !important; }
.bottom-n30px { bottom: -30px !important; }

.left-n5px    { left: -5px !important; }
.left-n10px   { left: -10px !important; }
.left-n15px   { left: -15px !important; }
.left-n20px   { left: -20px !important; }
.left-n25px   { left: -25px !important; }
.left-n30px   { left: -30px !important; }

.right-n5px   { right: -5px !important; }
.right-n10px  { right: -10px !important; }
.right-n15px  { right: -15px !important; }
.right-n20px  { right: -20px !important; }
.right-n25px  { right: -25px !important; }
.right-n30px  { right: -30px !important; }

/* ══ Negative margins — for pulling elements in normal flow ══ */
.mt-n5px  { margin-top: -5px !important; }
.mt-n10px { margin-top: -10px !important; }
.mt-n15px { margin-top: -15px !important; }
.mt-n20px { margin-top: -20px !important; }
.mt-n25px { margin-top: -25px !important; }
.mt-n30px { margin-top: -30px !important; }

.mb-n5px  { margin-bottom: -5px !important; }
.mb-n10px { margin-bottom: -10px !important; }
.mb-n15px { margin-bottom: -15px !important; }
.mb-n20px { margin-bottom: -20px !important; }
.mb-n25px { margin-bottom: -25px !important; }
.mb-n30px { margin-bottom: -30px !important; }

.ml-n5px  { margin-left: -5px !important; }
.ml-n10px { margin-left: -10px !important; }
.ml-n15px { margin-left: -15px !important; }
.ml-n20px { margin-left: -20px !important; }
.ml-n25px { margin-left: -25px !important; }
.ml-n30px { margin-left: -30px !important; }

.mr-n5px  { margin-right: -5px !important; }
.mr-n10px { margin-right: -10px !important; }
.mr-n15px { margin-right: -15px !important; }
.mr-n20px { margin-right: -20px !important; }
.mr-n25px { margin-right: -25px !important; }
.mr-n30px { margin-right: -30px !important; }

/* ══ Font family ══ */
.font-display { font-family: var(--font-display) !important; }
.font-body    { font-family: var(--font-body) !important; }

/* ══ Line height ══ */
.lh-1    { line-height: 1 !important; }
.lh-1-2  { line-height: 1.2 !important; }
.lh-1-3  { line-height: 1.3 !important; }
.lh-1-4  { line-height: 1.4 !important; }
.lh-1-5  { line-height: 1.5 !important; }
.lh-1-55 { line-height: 1.55 !important; }
.lh-1-6  { line-height: 1.6 !important; }
.lh-1-7  { line-height: 1.7 !important; }

/* ══ Min-height in px ══ */
.min-h-20px  { min-height: 20px !important; }
.min-h-30px  { min-height: 30px !important; }
.min-h-40px  { min-height: 40px !important; }
.min-h-50px  { min-height: 50px !important; }
.min-h-60px  { min-height: 60px !important; }
.min-h-70px  { min-height: 70px !important; }
.min-h-80px  { min-height: 80px !important; }
.min-h-100px { min-height: 100px !important; }

/* ══ Max-width (Tailwind scale) ══ */
.max-w-xs   { max-width: 20rem !important; }   /* 320px */
.max-w-sm   { max-width: 24rem !important; }   /* 384px */
.max-w-md   { max-width: 28rem !important; }   /* 448px */
.max-w-lg   { max-width: 32rem !important; }   /* 512px */
.max-w-xl   { max-width: 36rem !important; }   /* 576px */
.max-w-2xl  { max-width: 42rem !important; }   /* 672px */
.max-w-3xl  { max-width: 48rem !important; }   /* 768px */
.max-w-4xl  { max-width: 56rem !important; }   /* 896px */
.max-w-5xl  { max-width: 64rem !important; }   /* 1024px */
.max-w-6xl  { max-width: 72rem !important; }   /* 1152px */
.max-w-7xl  { max-width: 80rem !important; }   /* 1280px */
.max-w-full { max-width: 100% !important; }

.max-w-92 {
  max-width: 92% !important;
}

/* ══ Border style utilities (Tailwind-style) ══ */
.border-solid-style  { border-style: solid !important; }
.border-dashed-style { border-style: dashed !important; }
.border-dotted-style  { border-style: dotted !important; }
.border-none-style    { border-style: none !important; }

/* ══ Dashed border — all sides ══ */
.border-dashed {
  border-style: dashed !important;
  border-width: 1px !important;
}

/* ══ Dashed border — directional ══ */
.border-dashed-top {
  border-top-style: dashed !important;
  border-top-width: 1px !important;
}
.border-dashed-right {
  border-right-style: dashed !important;
  border-right-width: 1px !important;
}
.border-dashed-bottom {
  border-bottom-style: dashed !important;
  border-bottom-width: 1px !important;
}
.border-dashed-left {
  border-left-style: dashed !important;
  border-left-width: 1px !important;
}

/* ══ Letter spacing ══ */
.tracking-tight  { letter-spacing: -0.02em !important; }
.tracking-normal { letter-spacing: 0 !important; }
.tracking-wide   { letter-spacing: 0.05em !important; }
.tracking-wider  { letter-spacing: 0.1em !important; }
.tracking-widest { letter-spacing: 0.14em !important; }

/* ══ Z-index ══ */
.z-1000 { z-index: 1000 !important; }
.z-1030 { z-index: 1030 !important; }  /* sticky header */
.z-1040 { z-index: 1040 !important; }
.z-1050 { z-index: 1050 !important; }  /* modal */
.z-1100 { z-index: 1100 !important; }  /* toast */
.z-2000 { z-index: 2000 !important; }

/* ══ Low-opacity helpers (Bootstrap only ships 0/25/50/75/100) ══ */
.opacity-5  { opacity: .05 !important; }
.opacity-10 { opacity: .10 !important; }
.opacity-15 { opacity: .15 !important; }
.opacity-20 { opacity: .20 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-30 { opacity: .30 !important; }
.opacity-35 { opacity: .35 !important; }
.opacity-40 { opacity: .40 !important; }
.opacity-45 { opacity: .45 !important; }
.opacity-50 { opacity: .50 !important; }
.opacity-55 { opacity: .55 !important; }
.opacity-60 { opacity: .60 !important; }
.opacity-65 { opacity: .65 !important; }
.opacity-70 { opacity: .70 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-80 { opacity: .80 !important; }
.opacity-85 { opacity: .85 !important; }
.opacity-90 { opacity: .90 !important; }
.opacity-95 { opacity: .95 !important; }
.opacity-100 { opacity: 1 !important; }

/* ══ Zinc / gray scale ══ */
.text-zinc-50 { color:#fafafa !important; } .text-zinc-100{ color:#f4f4f5 !important; }
.text-zinc-200{ color:#e4e4e7 !important; } .text-zinc-300{ color:#d4d4d8 !important; }
.text-zinc-400{ color:#a1a1aa !important; } .text-zinc-500{ color:#71717a !important; }
.text-zinc-600{ color:#52525b !important; } .text-zinc-700{ color:#3f3f46 !important; }
.text-zinc-800{ color:#27272a !important; } .text-zinc-900{ color:#18181b !important; }
.text-zinc-950{ color:#09090b !important; }
.bg-zinc-100  { background-color:#f4f4f5 !important; }
.bg-zinc-200  { background-color:#e4e4e7 !important; }

/* ══ Amber scale (generic) ══ */
.text-amber-50{ color:#fffbeb !important; } .bg-amber-50{ background-color:#fffbeb !important; } .border-amber-50{ border-color:#fffbeb !important; }
.text-amber-100{ color:#fef3c7 !important; } .bg-amber-100{ background-color:#fef3c7 !important; } .border-amber-100{ border-color:#fef3c7 !important; }
.text-amber-200{ color:#fde68a !important; } .bg-amber-200{ background-color:#fde68a !important; } .border-amber-200{ border-color:#fde68a !important; }
.text-amber-300{ color:#fcd34d !important; } .bg-amber-300{ background-color:#fcd34d !important; } .border-amber-300{ border-color:#fcd34d !important; }
.text-amber-400{ color:#fbbf24 !important; } .bg-amber-400{ background-color:#fbbf24 !important; } .border-amber-400{ border-color:#fbbf24 !important; }
.text-amber-500{ color:#f59e0b !important; } .bg-amber-500{ background-color:#f59e0b !important; } .border-amber-500{ border-color:#f59e0b !important; }
.text-amber-600{ color:#d97706 !important; } .bg-amber-600{ background-color:#d97706 !important; } .border-amber-600{ border-color:#d97706 !important; }
.text-amber-700{ color:#b45309 !important; } .bg-amber-700{ background-color:#b45309 !important; } .border-amber-700{ border-color:#b45309 !important; }
.text-amber-800{ color:#92400e !important; } .bg-amber-800{ background-color:#92400e !important; } .border-amber-800{ border-color:#92400e !important; }
.text-amber-900{ color:#78350f !important; } .bg-amber-900{ background-color:#78350f !important; } .border-amber-900{ border-color:#78350f !important; }

/* ══ PowerBoard brand helpers (use the tokens from style.css) ══ */
.text-brand        { color: var(--color-text-tertiary) !important; }   /* #004275 */
.text-azure        { color: var(--color-azure) !important; }           /* #0078D4 */
.text-azure-dark   { color: var(--color-azure-dark) !important; }
.text-amber-brand  { color: var(--color-amber-dark) !important; }      /* #D4880C */
.text-primary-token { color: var(--color-text-primary) !important; }
.text-secondary-token { color: var(--color-text-secondary) !important; }
.text-muted-token { color: var(--color-text-muted) !important; }
.bg-brand          { background-color: var(--color-text-tertiary) !important; }
.bg-azure          { background-color: var(--color-azure) !important; }
.bg-azure-tint     { background-color: var(--color-azure-tint) !important; }
.bg-surface        { background-color: var(--color-surface-3) !important; }
.bg-surface-1      {background: var(--color-surface-1) !important;
}
.bg-amber-brand { background-color: var(--color-amber-dark) !important; }   /* #D4880C */
.border-brand      { border-color: var(--color-text-tertiary) !important; }
.border-azure-light{ border-color: var(--color-azure-light) !important; }
.border-amber-brand{ border-color: var(--color-amber-dark) !important; }
.text-success-token   { color: var(--color-success) !important; }        /* #12A150 */
.bg-success-token     { background-color: var(--color-success) !important; }
.border-success-token { border-color: var(--color-success) !important; }

/* ══ Misc background helpers (original values preserved) ══ */
.bg-light-yellow      { background-color:#fef8e9; }
.bg-light-brown       { background-color:#efede6; }
.bg-light-pink        { background-color:#fef0f1; }
.bg-light-amber       { background-color:#FFFBF2; }
.bg-solid-turquoise   { background-color:#339CB7; }
.border-pastel-light-blue { border-color:#CCE6ED; }
.border-light-amber   { border-color:#fef3c7 !important; }

/* ══ Handy extras ══ */
.cursor-pointer  { cursor: pointer !important; }
.cursor-default  { cursor: default !important; }
.transition-base { transition: all .3s ease !important; }
.object-cover    { object-fit: cover !important; }
.object-contain  { object-fit: contain !important; }
.text-truncate-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.text-truncate-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Full-bleed background section (breaks out of a centered container) */
.full-width-bg {
  width: 100vw;
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  padding-left: 0; padding-right: 0;
}

/* Required by common.js */
.hidden { display: none !important; }
.translate-x-5 { transform: translateX(1.25rem) !important; }

/* Card hover lift */
.hover-lift {
    transition: transform .25s ease, box-shadow .25s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 66, 117, .12);
}

/* Hover border color */
.hover-border:hover {
  border-color: var(--color-azure) !important;
}

/* Hover box shadow */
.hover-shadow:hover {
  box-shadow: 0 16px 34px rgba(0, 66, 117, .12);
}
@media (prefers-reduced-motion: reduce) {
    .hover-lift,
    .hover-lift:hover {
        transition: none;
        transform: none;
    }
}

/* ══ Directional border width — left accent ══ */
.border-left-2 { border-left-width: 2px !important; }
.border-left-3 { border-left-width: 3px !important; }
.border-left-4 { border-left-width: 4px !important; }

/* ══ Left-side border color only ══ */
.border-left-azure   { border-left-color: var(--color-azure) !important; }        /* #0078D4 */
.border-left-amber   { border-left-color: var(--color-amber-dark) !important; }   /* #D4880C */
.border-left-success { border-left-color: var(--color-success) !important; }      /* #12A150 */
.border-left-brand   { border-left-color: var(--color-text-tertiary) !important; }/* #004275 */