@media (max-width: 575px) {
  /* Extra small (XS) */
  .w-sm-25 {
    width: 25% !important;
  }
  .w-sm-50 {
    width: 50% !important;
  }
  .w-sm-75 {
    width: 75% !important;
  }
  .w-sm-100 {
    width: 100% !important;
  }

  .modal-dialog {
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - var(--bs-modal-margin) * 2) !important;
  }
}

@media (min-width: 576px) {
  /* Small (SM) */
  .w-md-25 {
    width: 25% !important;
  }
  .w-md-50 {
    width: 50% !important;
  }
  .w-md-75 {
    width: 75% !important;
  }
  .w-md-100 {
    width: 100% !important;
  }
}

@media (min-width: 768px) {
  /* Medium (MD) */
  .w-lg-25 {
    width: 25% !important;
  }
  .w-lg-50 {
    width: 50% !important;
  }
  .w-lg-75 {
    width: 75% !important;
  }
  .w-lg-100 {
    width: 100% !important;
  }

  .border-md {
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }

  .border-md-top {
    border-top: var(--bs-border-width) var(--bs-border-style)
      var(--bs-border-color) !important;
  }

  .border-md-end {
    border-right: var(--bs-border-width) var(--bs-border-style)
      var(--bs-border-color) !important;
  }

  .border-md-start {
    border-left: var(--bs-border-width) var(--bs-border-style)
      var(--bs-border-color) !important;
  }

  .border-md-bottom {
    border-bottom: var(--bs-border-width) var(--bs-border-style)
      var(--bs-border-color) !important;
  }
}

@media (min-width: 992px) {
  /* Large (LG) */
  .w-xl-25 {
    width: 25% !important;
  }
  .w-xl-50 {
    width: 50% !important;
  }
  .w-xl-75 {
    width: 75% !important;
  }
  .w-xl-100 {
    width: 100% !important;
  }
}

@media (min-width: 1200px) {
  /* Extra Large (XL) */
  .w-xxl-25 {
    width: 25% !important;
  }
  .w-xxl-50 {
    width: 50% !important;
  }
  .w-xxl-75 {
    width: 75% !important;
  }
  .w-xxl-100 {
    width: 100% !important;
  }
}