/* common.css */

/* Padding (Bootstrap v4 to v5 change: pl- to ps-, pr- to pe-) */
.pl-0 {
    padding-left: 0 !important;
}

.pl-1 {
    padding-left: .25rem !important;
}

.pl-2 {
    padding-left: .5rem !important;
}

.pl-3 {
    padding-left: 1rem !important;
}

.pl-4 {
    padding-left: 1.5rem !important;
}

.pl-5 {
    padding-left: 3rem !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pr-1 {
    padding-right: .25rem !important;
}

.pr-2 {
    padding-right: .5rem !important;
}

.pr-3 {
    padding-right: 1rem !important;
}

.pr-4 {
    padding-right: 1.5rem !important;
}

.pr-5 {
    padding-right: 3rem !important;
}

/* Margin (Bootstrap v4 to v5 change: mr- to me-, ml- to ms-) */
.ml-0 {
    margin-left: 0 !important;
}

.ml-1 {
    margin-left: .25rem !important;
}

.ml-2 {
    margin-left: .5rem !important;
}

.ml-3 {
    margin-left: 1rem !important;
}

.ml-4 {
    margin-left: 1.5rem !important;
}

.ml-5 {
    margin-left: 3rem !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mr-1 {
    margin-right: .25rem !important;
}

.mr-2 {
    margin-right: .5rem !important;
}

.mr-3 {
    margin-right: 1rem !important;
}

.mr-4 {
    margin-right: 1.5rem !important;
}

.mr-5 {
    margin-right: 3rem !important;
}

/* Float Classes (Bootstrap v4 to v5 change: float-left to float-start, float-right to float-end) */
.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

.float-none {
    float: none !important;
}

/* Clearfix Class (Bootstrap v4 to v5 change: clearfix remains the same) */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* Default (No breakpoint) */
.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

/* Small devices (≥576px) */
@media (min-width: 576px) {
  .text-sm-left {
    text-align: left !important;
  }

  .text-sm-center {
    text-align: center !important;
  }

  .text-sm-right {
    text-align: right !important;
  }
}

/* Medium devices (≥768px) */
@media (min-width: 768px) {
  .text-md-left {
    text-align: left !important;
  }

  .text-md-center {
    text-align: center !important;
  }

  .text-md-right {
    text-align: right !important;
  }
}

/* Large devices (≥992px) */
@media (min-width: 992px) {
  .text-lg-left {
    text-align: left !important;
  }

  .text-lg-center {
    text-align: center !important;
  }

  .text-lg-right {
    text-align: right !important;
  }
}

/* Extra large devices (≥1200px) */
@media (min-width: 1200px) {
  .text-xl-left {
    text-align: left !important;
  }

  .text-xl-center {
    text-align: center !important;
  }

  .text-xl-right {
    text-align: right !important;
  }
}


/* Positioning (Bootstrap v4 to v5 change: position-left and position-right to position-start and position-end) */
.position-left {
    left: 0 !important;
}

.position-right {
    right: 0 !important;
}

/* Sizing (Bootstrap v4 to v5 change: w-auto-left and w-auto-right) */
.w-auto-left {
    width: auto !important;
}

.w-auto-right {
    width: auto !important;
}

/* Alignment classes (for horizontal alignment in flexbox) */
.align-left {
    justify-content: flex-start !important;
}

.align-right {
    justify-content: flex-end !important;
}

/* Margin classes for start and end (Bootstrap v5 uses ms- and me-) */
.ml-md-0 {
    margin-left: 0 !important;
}

.ml-md-1 {
    margin-left: .25rem !important;
}

.ml-md-2 {
    margin-left: .5rem !important;
}

.ml-md-3 {
    margin-left: 1rem !important;
}

.ml-md-4 {
    margin-left: 1.5rem !important;
}

.ml-md-5 {
    margin-left: 3rem !important;
}

.mr-md-0 {
    margin-right: 0 !important;
}

.mr-md-1 {
    margin-right: .25rem !important;
}

.mr-md-2 {
    margin-right: .5rem !important;
}

.mr-md-3 {
    margin-right: 1rem !important;
}

.mr-md-4 {
    margin-right: 1.5rem !important;
}

.mr-md-5 {
    margin-right: 3rem !important;
}

/* Responsive Padding Classes (Bootstrap v4 to v5 change: pl-*, pr-*, ml-*, mr-*) */
.pl-sm-0 {
    padding-left: 0 !important;
}

.pl-sm-1 {
    padding-left: .25rem !important;
}

.pl-sm-2 {
    padding-left: .5rem !important;
}

.pl-sm-3 {
    padding-left: 1rem !important;
}

.pl-sm-4 {
    padding-left: 1.5rem !important;
}

.pl-sm-5 {
    padding-left: 3rem !important;
}

.pr-sm-0 {
    padding-right: 0 !important;
}

.pr-sm-1 {
    padding-right: .25rem !important;
}

.pr-sm-2 {
    padding-right: .5rem !important;
}

.pr-sm-3 {
    padding-right: 1rem !important;
}

.pr-sm-4 {
    padding-right: 1.5rem !important;
}

.pr-sm-5 {
    padding-right: 3rem !important;
}

.ml-sm-0 {
    margin-left: 0 !important;
}

.ml-sm-1 {
    margin-left: .25rem !important;
}

.ml-sm-2 {
    margin-left: .5rem !important;
}

.ml-sm-3 {
    margin-left: 1rem !important;
}

.ml-sm-4 {
    margin-left: 1.5rem !important;
}

.ml-sm-5 {
    margin-left: 3rem !important;
}

.mr-sm-0 {
    margin-right: 0 !important;
}

.mr-sm-1 {
    margin-right: .25rem !important;
}

.mr-sm-2 {
    margin-right: .5rem !important;
}

.mr-sm-3 {
    margin-right: 1rem !important;
}

.mr-sm-4 {
    margin-right: 1.5rem !important;
}

.mr-sm-5 {
    margin-right: 3rem !important;
}

.float-left {
    float: left !important
}

.float-right {
    float: right !important
}

.float-none {
    float: none !important
}

@media (min-width:576px) {
    .float-sm-left {
        float: left !important
    }

    .float-sm-right {
        float: right !important
    }

    .float-sm-none {
        float: none !important
    }
}

@media (min-width:768px) {
    .float-md-left {
        float: left !important
    }

    .float-md-right {
        float: right !important
    }

    .float-md-none {
        float: none !important
    }
}

@media (min-width:992px) {
    .float-lg-left {
        float: left !important
    }

    .float-lg-right {
        float: right !important
    }

    .float-lg-none {
        float: none !important
    }
}

@media (min-width:1200px) {
    .float-xl-left {
        float: left !important
    }

    .float-xl-right {
        float: right !important
    }

    .float-xl-none {
        float: none !important
    }
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
}

.form-control {
    appearance: auto !important;
}