/*!
 * utilities.css — JKL Info Solutions
 * Bootstrap-compatible grid + small utility set (container / row / col-*).
 * Breakpoints: sm 576px · md 768px · lg 992px · xl 1200px · xxl 1400px
 * Drop-in compatible with the team's existing utilities.css class names.
 */
*,*::before,*::after{box-sizing:border-box}

/* ---------- Container ---------- */
.container,.container-fluid{--gx:1.5rem;width:100%;padding-right:calc(var(--gx)*.5);padding-left:calc(var(--gx)*.5);margin-right:auto;margin-left:auto}
.container{max-width:1240px}
@media (min-width:576px){.container{--gx:2rem}}
@media (min-width:1200px){.container{--gx:3rem}}
.container-narrow{max-width:880px}

/* ---------- Row / Columns ---------- */
.row{--gx:1.5rem;--gy:0;display:flex;flex-wrap:wrap;margin-top:calc(-1*var(--gy));margin-right:calc(-.5*var(--gx));margin-left:calc(-.5*var(--gx))}
.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--gx)*.5);padding-left:calc(var(--gx)*.5);margin-top:var(--gy)}
.col{flex:1 0 0%}
.col-auto{flex:0 0 auto;width:auto}
.col-1{flex:0 0 auto;width:8.333333%}.col-2{flex:0 0 auto;width:16.666667%}.col-3{flex:0 0 auto;width:25%}
.col-4{flex:0 0 auto;width:33.333333%}.col-5{flex:0 0 auto;width:41.666667%}.col-6{flex:0 0 auto;width:50%}
.col-7{flex:0 0 auto;width:58.333333%}.col-8{flex:0 0 auto;width:66.666667%}.col-9{flex:0 0 auto;width:75%}
.col-10{flex:0 0 auto;width:83.333333%}.col-11{flex:0 0 auto;width:91.666667%}.col-12{flex:0 0 auto;width:100%}

.g-0,.gx-0{--gx:0}.g-0,.gy-0{--gy:0}
.g-2,.gx-2{--gx:.75rem}.g-2,.gy-2{--gy:.75rem}
.g-3,.gx-3{--gx:1rem}.g-3,.gy-3{--gy:1rem}
.g-4,.gx-4{--gx:1.5rem}.g-4,.gy-4{--gy:1.5rem}
.g-5,.gx-5{--gx:1.5rem}.g-5,.gy-5{--gy:3rem}
@media (min-width:576px){.g-5,.gx-5{--gx:2rem}}
@media (min-width:1200px){.g-5,.gx-5{--gx:3rem}}

@media (min-width:576px){
.col-sm{flex:1 0 0%}.col-sm-auto{flex:0 0 auto;width:auto}
.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.333333%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-8{flex:0 0 auto;width:66.666667%}.col-sm-12{flex:0 0 auto;width:100%}
}
@media (min-width:768px){
.col-md{flex:1 0 0%}.col-md-auto{flex:0 0 auto;width:auto}
.col-md-2{flex:0 0 auto;width:16.666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.333333%}.col-md-5{flex:0 0 auto;width:41.666667%}
.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.333333%}.col-md-8{flex:0 0 auto;width:66.666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-12{flex:0 0 auto;width:100%}
.offset-md-1{margin-left:8.333333%}
}
@media (min-width:992px){
.col-lg{flex:1 0 0%}.col-lg-auto{flex:0 0 auto;width:auto}
.col-lg-2{flex:0 0 auto;width:16.666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.333333%}.col-lg-5{flex:0 0 auto;width:41.666667%}
.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.333333%}.col-lg-8{flex:0 0 auto;width:66.666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-12{flex:0 0 auto;width:100%}
.offset-lg-1{margin-left:8.333333%}
.order-lg-first{order:-1}.order-lg-last{order:6}
}
@media (min-width:1200px){
.col-xl-2{flex:0 0 auto;width:16.666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.333333%}.col-xl-5{flex:0 0 auto;width:41.666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.333333%}
.offset-xl-1{margin-left:8.333333%}
}

/* ---------- Display / Flex ---------- */
.d-none{display:none!important}.d-block{display:block!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-grid{display:grid!important}
@media (min-width:768px){.d-md-none{display:none!important}.d-md-block{display:block!important}.d-md-flex{display:flex!important}}
@media (min-width:992px){.d-lg-none{display:none!important}.d-lg-block{display:block!important}.d-lg-flex{display:flex!important}}
.flex-column{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}
.align-items-start{align-items:flex-start!important}.align-items-center{align-items:center!important}.align-items-end{align-items:flex-end!important}
.justify-content-between{justify-content:space-between!important}.justify-content-center{justify-content:center!important}.justify-content-end{justify-content:flex-end!important}
.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}

/* ---------- Spacing ---------- */
.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}
.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}
.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}
.mx-auto{margin-left:auto!important;margin-right:auto!important}
.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}

/* ---------- Text ---------- */
.text-start{text-align:left!important}.text-center{text-align:center!important}.text-end{text-align:right!important}
@media (min-width:992px){.text-lg-start{text-align:left!important}.text-lg-end{text-align:right!important}}
.w-100{width:100%!important}.h-100{height:100%!important}
.position-relative{position:relative!important}
.overflow-hidden{overflow:hidden!important}
.visually-hidden,.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.list-unstyled{list-style:none;padding-left:0;margin:0}
