/* ===================================================================
   UTILITIES/SIZING.CSS
   Width, Height, Min/Max Size Utilities
   =================================================================== */
/* ===== 11. WIDTH UTILITIES ===== */

/* ----- 11.1 Base Widths ----- */
.w-sm-100pct {
    width: 100% !important;
}

/* ----- 11.2 Responsive Widths ----- */

/* ----- 11.2.1 Medium Devices (≥768px) ----- */
@media (min-width: 768px) {
    .w-md-auto { width: auto !important; }
    .w-md-25pct { width: 25% !important; }
    .w-md-50pct { width: 50% !important; }
    .w-md-75pct { width: 75% !important; }
    .w-md-100pct { width: 100% !important; }
}

/* ----- 11.2.2 Large Devices (≥992px) ----- */
@media (min-width: 992px) {
    .w-lg-auto { width: auto !important; }
    .w-lg-25pct { width: 25% !important; }
    .w-lg-50pct { width: 50% !important; }
    .w-lg-75pct { width: 75% !important; }
    .w-lg-100pct { width: 100% !important; }
}

/* ----- 11.2.3 Extra Large Devices (≥1200px) ----- */
@media (min-width: 1200px) {
    .w-xl-auto { width: auto !important; }
    .w-xl-25pct { width: 25% !important; }
    .w-xl-50pct { width: 50% !important; }
    .w-xl-75pct { width: 75% !important; }
    .w-xl-100pct { width: 100% !important; }
}

/* ----- 11.3 Mobile-Specific Widths (≤991px) ----- */
@media (max-width: 991px) {
    .w-auto-mobile { width: auto !important; }
    .w-100-mobile { width: 100% !important; }
}

/* ----- 11.4 Viewport Widths ----- */
.width-50vw { width: 50vw; }
.width-100vw { width: 100vw; }

/* ----- 11.5 Minimum Width ----- */
.min-width-0 { min-width: 0 !important; }


/* ===== 87. MAX-WIDTH UTILITIES ===== */

/* ----- 87.1 Small Max-Widths ----- */
.max-w-100 {
    max-width: 100px !important;
}

.max-w-200 {
    max-width: 200px !important;
}

.max-w-300 {
    max-width: 300px !important;
}

/* ----- 87.2 Medium Max-Widths ----- */
.max-w-400 {
    max-width: 400px !important;
}

.max-w-500 {
    max-width: 500px !important;
}

/* ----- 87.3 Large Max-Widths ----- */
.max-w-600 {
    max-width: 600px !important;
}

.max-w-700 {
    max-width: 700px !important;
}

.max-w-800 {
    max-width: 800px !important;
}

.max-w-900 {
    max-width: 900px !important;
}

/* ----- 87.4 Extra Large Max-Widths ----- */
.max-w-1000 {
    max-width: 1000px !important;
}

/* ===== 88. PERCENTAGE MAX-WIDTH UTILITIES ===== */

/* ----- 88.1 Small Percentage Max-Widths ----- */
.max-w-25-percent {
    max-width: 25% !important;
}

/* ----- 88.2 Medium Percentage Max-Widths ----- */
.max-w-50-percent {
    max-width: 50% !important;
}

/* ----- 88.3 Large Percentage Max-Widths ----- */
.max-w-75-percent {
    max-width: 75% !important;
}

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

/* ===== 89. MIN-WIDTH UTILITIES ===== */

/* ----- 89.1 Small Min-Widths ----- */
.min-w-100 {
    min-width: 100px !important;
}

.min-w-200 {
    min-width: 200px !important;
}

/* ----- 89.2 Medium Min-Widths ----- */
.min-w-300 {
    min-width: 300px !important;
}

.min-w-400 {
    min-width: 400px !important;
}

/* ----- 89.3 Large Min-Widths ----- */
.min-w-500 {
    min-width: 500px !important;
}

/* ===== 90. PERCENTAGE MIN-WIDTH UTILITIES ===== */

/* ----- 90.1 Small Percentage Min-Widths ----- */
.min-w-25-percent {
    min-width: 25% !important;
}

/* ----- 90.2 Medium Percentage Min-Widths ----- */
.min-w-50-percent {
    min-width: 50% !important;
}

/* ----- 90.3 Large Percentage Min-Widths ----- */
.min-w-75-percent {
    min-width: 75% !important;
}

.min-w-100-percent {
    min-width: 100% !important;
}




/* ===== BOOTSTRAP SIZING REPLACEMENTS ===== */

/* Width */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

/* Height */
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

/* Max Width */
.mw-100 { max-width: 100% !important; }

/* Max Height */
.mh-100 { max-height: 100% !important; }

/* Viewport Width */
.vw-100 { width: 100vw !important; }

/* Viewport Height */
.vh-100 { height: 100vh !important; }

/* Min Viewport Width */
.min-vw-100 { min-width: 100vw !important; }

/* Min Viewport Height */
.min-vh-100 { min-height: 100vh !important; }