/* ======= ROW ======= */
.bs4-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.bs4-mt-0 {
  margin-top: 0 !important;
}

.bs4-mt-1 {
  margin-top: 0.25rem !important;
}

.bs4-mt-2 {
  margin-top: 0.5rem !important;
}

.bs4-mt-3 {
  margin-top: 1rem !important;
}

.bs4-mt-4 {
  margin-top: 1.5rem !important;
}

.bs4-mt-5 {
  margin-top: 3rem !important;
}

.bs4-mt-auto {
  margin-top: auto !important;
}

/* ======= COMMON COL SETUP ======= */
[class*="bs4-col-"],
[class*="bs4-col-sm-"],
[class*="bs4-col-md-"],
[class*="bs4-col-lg-"],
[class*="bs4-col-xl-"] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* ======= DEFAULT (xs) ======= */
.bs4-col-1   { flex: 0 0 8.333333%;   max-width: 8.333333%; }
.bs4-col-2   { flex: 0 0 16.666667%;  max-width: 16.666667%; }
.bs4-col-3   { flex: 0 0 25%;         max-width: 25%; }
.bs4-col-4   { flex: 0 0 33.333333%;  max-width: 33.333333%; }
.bs4-col-5   { flex: 0 0 41.666667%;  max-width: 41.666667%; }
.bs4-col-6   { flex: 0 0 50%;         max-width: 50%; }
.bs4-col-7   { flex: 0 0 58.333333%;  max-width: 58.333333%; }
.bs4-col-8   { flex: 0 0 66.666667%;  max-width: 66.666667%; }
.bs4-col-9   { flex: 0 0 75%;         max-width: 75%; }
.bs4-col-10  { flex: 0 0 83.333333%;  max-width: 83.333333%; }
.bs4-col-11  { flex: 0 0 91.666667%;  max-width: 91.666667%; }
.bs4-col-12  { flex: 0 0 100%;        max-width: 100%; }

/* ======= RESPONSIVE BREAKPOINTS ======= */
@media (min-width: 576px) {
  .bs4-col-sm-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
  .bs4-col-sm-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .bs4-col-sm-3  { flex: 0 0 25%;        max-width: 25%; }
  .bs4-col-sm-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .bs4-col-sm-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .bs4-col-sm-6  { flex: 0 0 50%;        max-width: 50%; }
  .bs4-col-sm-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .bs4-col-sm-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .bs4-col-sm-9  { flex: 0 0 75%;        max-width: 75%; }
  .bs4-col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .bs4-col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .bs4-col-sm-12 { flex: 0 0 100%;       max-width: 100%; }
}
@media (min-width: 768px) {
  .bs4-col-md-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
  .bs4-col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .bs4-col-md-3  { flex: 0 0 25%;        max-width: 25%; }
  .bs4-col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .bs4-col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .bs4-col-md-6  { flex: 0 0 50%;        max-width: 50%; }
  .bs4-col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .bs4-col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .bs4-col-md-9  { flex: 0 0 75%;        max-width: 75%; }
  .bs4-col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .bs4-col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .bs4-col-md-12 { flex: 0 0 100%;       max-width: 100%; }
}
@media (min-width: 992px) {
  .bs4-col-lg-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
  .bs4-col-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .bs4-col-lg-3  { flex: 0 0 25%;        max-width: 25%; }
  .bs4-col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .bs4-col-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .bs4-col-lg-6  { flex: 0 0 50%;        max-width: 50%; }
  .bs4-col-lg-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .bs4-col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .bs4-col-lg-9  { flex: 0 0 75%;        max-width: 75%; }
  .bs4-col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .bs4-col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .bs4-col-lg-12 { flex: 0 0 100%;       max-width: 100%; }
}
@media (min-width: 1200px) {
  .bs4-col-xl-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
  .bs4-col-xl-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .bs4-col-xl-3  { flex: 0 0 25%;        max-width: 25%; }
  .bs4-col-xl-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .bs4-col-xl-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .bs4-col-xl-6  { flex: 0 0 50%;        max-width: 50%; }
  .bs4-col-xl-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .bs4-col-xl-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .bs4-col-xl-9  { flex: 0 0 75%;        max-width: 75%; }
  .bs4-col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .bs4-col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .bs4-col-xl-12 { flex: 0 0 100%;       max-width: 100%; }
}