/* 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;
}

/* Text Alignment (Bootstrap v4 to v5 change: text-left, text-right) */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !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 Classes for Responsive (Bootstrap v4 to v5 change: float-left and float-right) */
.float-left-sm { float: left !important; }
.float-right-sm { float: right !important; }
.float-none-sm { float: none !important; }

.float-left-md { float: left !important; }
.float-right-md { float: right !important; }
.float-none-md { float: none !important; }

.float-left-lg { float: left !important; }
.float-right-lg { float: right !important; }
.float-none-lg { float: none !important; }
select.form-control{ appearance: auto !important; }



/* Postin relatives for bootstrap grids */
/* Bootstrap Grid Classes with position: relative */

/* Generic column class */
[class*="col-"] {
  position: relative;
}

/* Specific breakpoint classes */
.col { position: relative; }
.col-1 { position: relative; }
.col-2 { position: relative; }
.col-3 { position: relative; }
.col-4 { position: relative; }
.col-5 { position: relative; }
.col-6 { position: relative; }
.col-7 { position: relative; }
.col-8 { position: relative; }
.col-9 { position: relative; }
.col-10 { position: relative; }
.col-11 { position: relative; }
.col-12 { position: relative; }

/* Breakpoint-specific classes */
/* Extra small (sm) */
.col-sm { position: relative; }
.col-sm-1 { position: relative; }
.col-sm-2 { position: relative; }
.col-sm-3 { position: relative; }
.col-sm-4 { position: relative; }
.col-sm-5 { position: relative; }
.col-sm-6 { position: relative; }
.col-sm-7 { position: relative; }
.col-sm-8 { position: relative; }
.col-sm-9 { position: relative; }
.col-sm-10 { position: relative; }
.col-sm-11 { position: relative; }
.col-sm-12 { position: relative; }

/* Medium (md) */
.col-md { position: relative; }
.col-md-1 { position: relative; }
.col-md-2 { position: relative; }
.col-md-3 { position: relative; }
.col-md-4 { position: relative; }
.col-md-5 { position: relative; }
.col-md-6 { position: relative; }
.col-md-7 { position: relative; }
.col-md-8 { position: relative; }
.col-md-9 { position: relative; }
.col-md-10 { position: relative; }
.col-md-11 { position: relative; }
.col-md-12 { position: relative; }

/* Large (lg) */
.col-lg { position: relative; }
.col-lg-1 { position: relative; }
.col-lg-2 { position: relative; }
.col-lg-3 { position: relative; }
.col-lg-4 { position: relative; }
.col-lg-5 { position: relative; }
.col-lg-6 { position: relative; }
.col-lg-7 { position: relative; }
.col-lg-8 { position: relative; }
.col-lg-9 { position: relative; }
.col-lg-10 { position: relative; }
.col-lg-11 { position: relative; }
.col-lg-12 { position: relative; }

/* Extra large (xl) */
.col-xl { position: relative; }
.col-xl-1 { position: relative; }
.col-xl-2 { position: relative; }
.col-xl-3 { position: relative; }
.col-xl-4 { position: relative; }
.col-xl-5 { position: relative; }
.col-xl-6 { position: relative; }
.col-xl-7 { position: relative; }
.col-xl-8 { position: relative; }
.col-xl-9 { position: relative; }
.col-xl-10 { position: relative; }
.col-xl-11 { position: relative; }
.col-xl-12 { position: relative; }

/* Extra extra large (xxl) */
.col-xxl { position: relative; }
.col-xxl-1 { position: relative; }
.col-xxl-2 { position: relative; }
.col-xxl-3 { position: relative; }
.col-xxl-4 { position: relative; }
.col-xxl-5 { position: relative; }
.col-xxl-6 { position: relative; }
.col-xxl-7 { position: relative; }
.col-xxl-8 { position: relative; }
.col-xxl-9 { position: relative; }
.col-xxl-10 { position: relative; }
.col-xxl-11 { position: relative; }
.col-xxl-12 { position: relative; }