/*!
* Responsive Utility Stylesheet
*
* This stylesheet dynamically generates utility classes for the CSS property `width`.
* Variables use the prefix `--bs-width-`, and class names use the prefix `w-`.
* Responsive variants are created based on Bootstrap 5 breakpoints.
*
* Author: Uchenna Ajah
* Repository: https://github.com/ucscode/bs5-utility-generator
* Version: 2.0.0
* License: MIT
*/
:root {
    --bs-width-10: 10%;
    --bs-width-20: 20%;
    --bs-width-30: 30%;
    --bs-width-40: 40%;
    --bs-width-50: 50%;
    --bs-width-60: 60%;
    --bs-width-70: 70%;
    --bs-width-80: 80%;
    --bs-width-90: 90%;
    --bs-width-100: 100%;
    --bs-width-auto: auto;
}

.w-10 { width: var(--bs-width-10) !important; }
.w-20 { width: var(--bs-width-20) !important; }
.w-30 { width: var(--bs-width-30) !important; }
.w-40 { width: var(--bs-width-40) !important; }
.w-50 { width: var(--bs-width-50) !important; }
.w-60 { width: var(--bs-width-60) !important; }
.w-70 { width: var(--bs-width-70) !important; }
.w-80 { width: var(--bs-width-80) !important; }
.w-90 { width: var(--bs-width-90) !important; }
.w-100 { width: var(--bs-width-100) !important; }
.w-auto { width: var(--bs-width-auto) !important; }

@media (min-width:576px) {
    .w-sm-10 { width: var(--bs-width-10) !important; }
    .w-sm-20 { width: var(--bs-width-20) !important; }
    .w-sm-30 { width: var(--bs-width-30) !important; }
    .w-sm-40 { width: var(--bs-width-40) !important; }
    .w-sm-50 { width: var(--bs-width-50) !important; }
    .w-sm-60 { width: var(--bs-width-60) !important; }
    .w-sm-70 { width: var(--bs-width-70) !important; }
    .w-sm-80 { width: var(--bs-width-80) !important; }
    .w-sm-90 { width: var(--bs-width-90) !important; }
    .w-sm-100 { width: var(--bs-width-100) !important; }
    .w-sm-auto { width: var(--bs-width-auto) !important; }
}

@media (min-width:768px) {
    .w-md-10 { width: var(--bs-width-10) !important; }
    .w-md-20 { width: var(--bs-width-20) !important; }
    .w-md-30 { width: var(--bs-width-30) !important; }
    .w-md-40 { width: var(--bs-width-40) !important; }
    .w-md-50 { width: var(--bs-width-50) !important; }
    .w-md-60 { width: var(--bs-width-60) !important; }
    .w-md-70 { width: var(--bs-width-70) !important; }
    .w-md-80 { width: var(--bs-width-80) !important; }
    .w-md-90 { width: var(--bs-width-90) !important; }
    .w-md-100 { width: var(--bs-width-100) !important; }
    .w-md-auto { width: var(--bs-width-auto) !important; }
}

@media (min-width:992px) {
    .w-lg-10 { width: var(--bs-width-10) !important; }
    .w-lg-20 { width: var(--bs-width-20) !important; }
    .w-lg-30 { width: var(--bs-width-30) !important; }
    .w-lg-40 { width: var(--bs-width-40) !important; }
    .w-lg-50 { width: var(--bs-width-50) !important; }
    .w-lg-60 { width: var(--bs-width-60) !important; }
    .w-lg-70 { width: var(--bs-width-70) !important; }
    .w-lg-80 { width: var(--bs-width-80) !important; }
    .w-lg-90 { width: var(--bs-width-90) !important; }
    .w-lg-100 { width: var(--bs-width-100) !important; }
    .w-lg-auto { width: var(--bs-width-auto) !important; }
}

@media (min-width:1200px) {
    .w-xl-10 { width: var(--bs-width-10) !important; }
    .w-xl-20 { width: var(--bs-width-20) !important; }
    .w-xl-30 { width: var(--bs-width-30) !important; }
    .w-xl-40 { width: var(--bs-width-40) !important; }
    .w-xl-50 { width: var(--bs-width-50) !important; }
    .w-xl-60 { width: var(--bs-width-60) !important; }
    .w-xl-70 { width: var(--bs-width-70) !important; }
    .w-xl-80 { width: var(--bs-width-80) !important; }
    .w-xl-90 { width: var(--bs-width-90) !important; }
    .w-xl-100 { width: var(--bs-width-100) !important; }
    .w-xl-auto { width: var(--bs-width-auto) !important; }
}

@media (min-width:1400px) {
    .w-xxl-10 { width: var(--bs-width-10) !important; }
    .w-xxl-20 { width: var(--bs-width-20) !important; }
    .w-xxl-30 { width: var(--bs-width-30) !important; }
    .w-xxl-40 { width: var(--bs-width-40) !important; }
    .w-xxl-50 { width: var(--bs-width-50) !important; }
    .w-xxl-60 { width: var(--bs-width-60) !important; }
    .w-xxl-70 { width: var(--bs-width-70) !important; }
    .w-xxl-80 { width: var(--bs-width-80) !important; }
    .w-xxl-90 { width: var(--bs-width-90) !important; }
    .w-xxl-100 { width: var(--bs-width-100) !important; }
    .w-xxl-auto { width: var(--bs-width-auto) !important; }
}