@for $i from 0 through 100 {
  .font-size-#{$i} {
    font-size: $i + px + ' !important';
  }
}

// Width PX Sizes
@for $i from 0 through 1000 {
  .w-#{$i}-px {
    width: $i + px + ' !important';
  }
}

// Min Width PX Sizes
@for $i from 0 through 1000 {
  .min-w-#{$i}-px {
    min-width: $i + px + ' !important';
  }
}

// Max Width PX Sizes
@for $i from 0 through 1000 {
  .max-w-#{$i}-px {
    max-width: $i + px + ' !important';
  }
}

// Width Rem Sizes
@for $i from 0 through 100 {
  .w-#{$i}-rem {
    width: $i + rem + ' !important';
  }
}

// Min Width Rem Sizes
@for $i from 0 through 100 {
  .min-w-#{$i}-rem {
    min-width: $i + rem + ' !important';
  }
}

// Max Width Rem Sizes
@for $i from 0 through 100 {
  .max-w-#{$i}-rem {
    max-width: $i + rem + ' !important';
  }
}

// Height PX Sizes
@for $i from 0 through 1000 {
  .h-#{$i}-px {
    height: $i + px + ' !important';
  }
}

// Min Height PX Sizes
@for $i from 0 through 1000 {
  .min-h-#{$i}-px {
    min-height: $i + px + ' !important';
  }
}

@for $i from 0 through 100 {
  .vh-#{$i} {
    height: $i + vh + ' !important';
  }
}

@for $i from 0 through 100 {
  .min-vh-#{$i} {
    min-height: $i + vh + ' !important';
  }
}

// Max Height PX Sizes
@for $i from 0 through 1000 {
  .max-h-#{$i}-px {
    max-height: $i + px + ' !important';
  }
}

// Height Rem Sizes
@for $i from 0 through 100 {
  .h-#{$i}-rem {
    height: $i + rem + ' !important';
  }
}

// Min Height Rem Sizes
@for $i from 0 through 100 {
  .min-h-#{$i}-rem {
    min-height: $i + rem + ' !important';
  }
}

// Max Height Rem Sizes
@for $i from 0 through 100 {
  .max-h-#{$i}-rem {
    max-height: $i + rem + ' !important';
  }
}

// Top PX Sizes
@for $i from 0 through 1000 {
  .top-#{$i}-px {
    top: $i + px + ' !important';
  }
}

// Left PX Sizes
@for $i from 0 through 1000 {
  .left-#{$i}-px {
    left: $i + px + ' !important';
  }
}

// Right PX Sizes
@for $i from 0 through 1000 {
  .right-#{$i}-px {
    right: $i + px + ' !important';
  }
}

// Bottom PX Sizes
@for $i from 0 through 1000 {
  .bottom-#{$i}-px {
    bottom: $i + px + ' !important';
  }
}

// Margin Top PX Sizes
@for $i from 0 through 1000 {
  .mt-#{$i}-px {
    margin-top: $i + px + ' !important';
  }
}

// Margin Bottom PX Sizes
@for $i from 0 through 1000 {
  .mb-#{$i}-px {
    margin-bottom: $i + px + ' !important';
  }
}

// Margin Right PX Sizes
@for $i from 0 through 1000 {
  .me-#{$i}-px {
    margin-right: $i + px + ' !important';
  }
}

// Margin Left PX Sizes
@for $i from 0 through 1000 {
  .ms-#{$i}-px {
    margin-left: $i + px + ' !important';
  }
}




// Padding Top PX Sizes
@for $i from 0 through 1000 {
  .pt-#{$i}-px {
    padding-top: $i + px + ' !important';
  }
}

// Padding Bottom PX Sizes
@for $i from 0 through 1000 {
  .pb-#{$i}-px {
    padding-bottom: $i + px + ' !important';
  }
}

// Padding Right PX Sizes
@for $i from 0 through 1000 {
  .pe-#{$i}-px {
    padding-right: $i + px + ' !important';
  }
}

// Padding Left PX Sizes
@for $i from 0 through 1000 {
  .ps-#{$i}-px {
    padding-left: $i + px + ' !important';
  }
}