/*================== README ================== updated 5/10/2024

Table of Contents
  1. Variables
  2. Global components
  3. Custom classes
  4. Bootstrap 5 overrides
  5. Default Bootstrap 5 utilities

1. Variables: Translated from the design system and defined in :root{} (design system: https://www.figma.com/file/qp2t6MZwp4aYKf04g4ibsY/Design-System?type=design&node-id=0-1&mode=design&t=wsIFdvj3msPELczP-0)

2. Global components: Components translated from the design system (e.g. card, input).

3. Custom classes: Custom classes defined by us.

4. Bootstrap 5 overrides: Classes with same names to Bootstrap 5 but with our own definitions

5. Default Bootstrap 5 utilities: Classes derived from Bootstrap 5. To search for class usage, use the Bootstrap 5 docs (https://getbootstrap.com/docs/5.0/getting-started/introduction/).

USAGE: All classes in this file need to be a descendant of the class ".b5-active", so in your code, wrap the area with Bootstrap 5 classes in a <div> with class="b5-active". Then, use classes freely.

NOTE: Classes in this file may be overridden by the rizeen, gtsamheader, or julie stylesheets.

Example usage:
<div class="b5-active">
	<h1 class="text-primary">This is text</h1>
</div>

================== END README ==================
*/

/* Variables ------------------------------------------------------------------------------- */
:root {
	--base-h1: 38px;
	--base-h2: 31px;
	--base-h3: 26px;
	--base-h4: 23px;
	--base-h5: 19px;
	--base-h6: 16px;
	--base-font-size: 16px;
	--base-font-size-sm: 13px;
	--base-font-size-xs: 11px;
	--base-line-height: 1.25;

  /* Mobile */
  --base-mobile-h1: 34px;
	--base-mobile-h2: 30px;
	--base-mobile-h3: 26px;
	--base-mobile-h4: 22px;
	--base-mobile-h5: 18px;
	--base-mobile-h6: 16px;
  --base-mobile-font-size: 16px;
	--base-mobile-font-size-sm: 14px;
	--base-mobile-font-size-xs: 12px;

	/* Line Height */
	--line-height-tight: 1.0;
	--line-height-small: 1.15;
	--line-height-base: 1.25;
	--line-height-large: 1.5;

  /* Default */
  --base-default-bg: #f7f7f7;
  --base-default-bgSecondary: #ffffff;
  --base-default-text: #000000;
  --base-default-textSecondary: #616161;
  --base-default-border: #e3e3e3;
  --base-default-icon: #4a4a4a;

  /* Brand */
  --base-brand-bg: #e3e3e3;
  --base-brand-text: #4a4a4a;
  --base-brand-fill: #303030;
  --base-brand-onFill: #ffffff;

  /* Info */
  --base-info-bg: #eaf4ff;
  --base-info-text: #00527c;
  --base-info-fill: #91d0ff;
  --base-info-onFill: #002133;
  --base-info-border: #a8d8ff;
  --base-info-icon: #0094d5;

  /* Success */
  --base-success-bg: #cdfee1;
  --base-success-text: #0c5132;
  --base-success-fill: #29845a;
  --base-success-onFill: #f8fffb;
  --base-success-border: #92fec2;
  --base-success-icon: #29845a;

  /* Caution */
  --base-caution-bg: #fff8db;
  --base-caution-text: #4f4700;
  --base-caution-fill: #ffe600;
  --base-caution-onFill: #332e00;
  --base-caution-border: #ffeb78;
  --base-caution-icon: #998a00;

  /* Warning */
  --base-warning-bg: #fff1e3;
  --base-warning-text: #5e4200;
  --base-warning-fill: #ffb800;
  --base-warning-onFill: #251a00;
  --base-warning-border: #ffc879;
  --base-warning-icon: #b28400;

  /* Critical */
  --base-critical-bg: #fee9e8;
  --base-critical-text: #8e1f0b;
  --base-critical-fill: #e51c00;
  --base-critical-onFill: #fffafb;
  --base-critical-border: #fec3c1;
  --base-critical-icon: #ef4d2f;

  /* Input */
  --base-input-bg: #fdfdfd;
  --base-input-border: #8a8a8a;

  /* Nav */
  --base-nav-bg: #ececec;
  --base-nav-bgHover: #f1f1f1;
  --base-nav-bgActive: #fafafa;

	/* Gutter */
	--bs-gutter-x: 1.5rem;
}

/* Global Components ------------------------------------------------------------------------------- */

/*====== FORMS / INPUTS ======*/
.b5-active .form-label {
	display: inline-block;
	font-weight: bold;
	color: var(--base-default-text);
}

.b5-active .form-label:focus {
	outline: none;
	box-shadow: none;
}

/*====== BUTTONS ======*/
.b5-active .btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
	text-align: center;
	text-transform: capitalize;
	line-height: var(--base-line-height);
	padding: 9px 18px;
	letter-spacing: 0;
  font-size: 16px;
}

.b5-active .btn:hover {
	cursor: pointer;
}

.btn:active,
.btn.active,
.btn.focus,
.btn:focus {
  outline: 0 !important;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.b5-active .icon-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
	line-height: var(--base-line-height);
	padding: 9px;
}

@media (max-width: 992px) {
  .b5-active .icon-btn {
    padding: 8px;
  }
}

/*====== BUTTON SIZES ======*/
.b5-active .btn-sm {
  padding: 6px 12px;
  font-size: 14px;
}

.b5-active .btn-md {
  padding: 9px 18px;
  font-size: 16px;
}

.b5-active .btn-lg {
  padding: 12px 24px;
  font-size: 18px;
}

@media (min-width: 768px) {
  .b5-active .btn-md-md {
    padding: 9px 18px;
    font-size: 16px;
  }

  .b5-active .btn-md-lg {
    padding: 12px 24px;
    font-size: 18px;
  }
}

.b5-active .btn-with-icon-sm {
  padding: 8px;
}
.b5-active .btn-with-icon-lg {
  padding: 12px;
}

/*====== PRIMARY BUTTONS ======*/
.b5-active .btn-primary {
	color: #ffffff;
	background-color: var(--base-brand-fill);
	border: 1px solid var(--base-brand-fill);
}

/* Hover state for non-disabled buttons */
.b5-active .btn-primary:not(:disabled):not(.btn-disabled):hover {
	background-color: var(--base-brand-fill);
	border: 1px solid var(--base-brand-fill);
	color: #FFF;
}

/* Active state for non-disabled buttons */
.b5-active .btn-primary:not(:disabled):not(.btn-disabled):active {
	background-color: var(--base-brand-fill);
	border: 1px solid var(--base-brand-fill);
	color: #FFF;
	opacity: 0.8;
}

/* Disabled buttons */
.b5-active .btn-primary:disabled,
.b5-active .btn-primary.btn-disabled,
.samASC_Button.btn-disabled {
	cursor: not-allowed !important;
	opacity: 0.5;
}

/* Styles for disabled buttons when hovered, focused, or within disabled fieldsets */
.b5-active .btn-primary:disabled:hover,
.b5-active .btn-primary:disabled:focus,
.b5-active .btn-primary:disabled.focus,
.b5-active .btn-primary.btn-disabled:hover,
.b5-active .btn-primary.btn-disabled:focus,
.b5-active .btn-primary.btn-disabled.focus,
.b5-active fieldset[disabled] .btn-primary:hover,
.b5-active fieldset[disabled] .btn-primary:focus,
.b5-active fieldset[disabled] .btn-primary {
	background-color: var(--base-brand-fill);
	border: 1px solid var(--base-brand-fill);
	color: #FFF;
	cursor: not-allowed;
}

/*====== INVERTED BTNS / PRIMARY BUTTONS WITH DARK BACKGROUNDS - USE .btn-primary-inverted ======*/
.b5-active .btn-inverted,
.b5-active .btn-primary-inverted {
  color: var(--base-default-text);
  background-color: #FFF;
  border-color: #FFF;
}

.b5-active .btn-secondary-inverted {
  color: #FFF;
  background-color: var(--base-brand-fill);
  border: 1px solid #FFF;
}

.b5-active .btn-secondary-inverted:hover {
  color: var(--base-brand-fill);
	background-color: #ffffff;
	border: 1px solid var(--base-brand-fill);
}

/*====== SECONDARY BUTTONS ======*/
.b5-active .btn-secondary {
	color: var(--base-brand-fill);
	background-color: #ffffff;
	border: 1px solid var(--base-brand-fill);
}

/* Hover state for non-disabled buttons */
.b5-active .btn-secondary:not(:disabled):not(.btn-disabled):hover {
	background-color: var(--base-brand-fill);
	border: 1px solid var(--base-brand-fill);
	color: #FFF;
}

/* Active state for non-disabled buttons */
.b5-active .btn-secondary:not(:disabled):not(.btn-disabled):active {
	background-color: var(--base-brand-fill);
	border: 1px solid var(--base-brand-fill);
	color: #FFF;
  opacity: 1;
}

/* Disabled buttons */
.b5-active .btn-secondary:disabled,
.b5-active .btn-secondary.btn-disabled {
	cursor: not-allowed !important;
}

/* Styles for disabled buttons when hovered, focused, or within disabled fieldsets */
.b5-active .btn-secondary:disabled:hover,
.b5-active .btn-secondary:disabled:focus,
.b5-active .btn-secondary:disabled.focus,
.b5-active .btn-secondary.btn-disabled:hover,
.b5-active .btn-secondary.btn-disabled:focus,
.b5-active .btn-secondary.btn-disabled.focus,
.b5-active fieldset[disabled] .btn-secondary:hover,
.b5-active fieldset[disabled] .btn-secondary:focus,
.b5-active fieldset[disabled] .btn-secondary {
	background-color: #FFF;
	color: var(--base-brand-fill);
	border: 1px solid var(--base-brand-fill);
	cursor: not-allowed;
  opacity: 0.5;
}

/*====== TERTIARY BUTTONS ======*/
.b5-active .btn-tertiary {
  color: var(--base-brand-fill);
  background-color: rgba(48, 48, 48, 0.05);
  border: 1px solid rgba(48, 48, 48, 0.05);
}

/* Hover state for non-disabled buttons */
.b5-active .btn-tertiary:not(:disabled):not(.btn-disabled):hover {
  border: 1px solid rgba(48, 48, 48, 0.00);
  background-color: rgba(48, 48, 48, 0.10);
}

/* Active state for non-disabled buttons */
.b5-active .btn-tertiary:not(:disabled):not(.btn-disabled):active {
  border: 1px solid var(rgba(48, 48, 48, 0.20));
  background-color: var(rgba(48, 48, 48, 0.20));
  box-shadow: none;
  -webkit-box-shadow: none;
}

/* Disabled buttons */
.b5-active .btn-tertiary:disabled,
.b5-active .btn-tertiary.btn-disabled {
  cursor: not-allowed !important;
  opacity: 0.5;
}

/* Styles for disabled buttons when hovered, focused, or within disabled fieldsets */
.b5-active .btn-tertiary:disabled:hover,
.b5-active .btn-tertiary:disabled:focus,
.b5-active .btn-tertiary:disabled.focus,
.b5-active .btn-tertiary.btn-disabled:hover,
.b5-active .btn-tertiary.btn-disabled:focus,
.b5-active .btn-tertiary.btn-disabled.focus,
.b5-active fieldset[disabled] .btn-tertiary:hover,
.b5-active fieldset[disabled] .btn-tertiary:focus,
.b5-active fieldset[disabled] .btn-tertiary {
  background-color: rgba(48, 48, 48, 0.05);
  border: 1px solid rgba(48, 48, 48, 0.05);
  color: var(--base-brand-fill);
  cursor: not-allowed;
}

.b5-active .btn-clear {
  border: 1px solid #000;
  color: #000;
}

/*====== BUTTON GROUPS ======*/
.b5-active .btn-group {
  display: flex;
  justify-content: center;
  align-items: center;
}

.b5-active .btn-group .btn {
  padding: 9px 18px;
  color: var(--base-brand-fill);
  text-align: center;
  font-family: var(--galls-font-body);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  background: #FFF;
  border-top: 1px solid var(--base-brand-fill);
  border-bottom: 1px solid var(--base-brand-fill);
}

.b5-active .btn-group .btn:first-child {
  border-left: 1px solid var(--base-brand-fill);
}

.b5-active .btn-group .btn:last-child {
  border-right: 1px solid var(--base-brand-fill);
}

.b5-active .btn-group .btn.active {
  background-color: var(--base-default-bg);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25) inset;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25) inset;
}

.b5-active .btn-group .btn.active:not(:last-child) {
  border-right: 1px solid var(--base-brand-fill);
}

.b5-active .btn-group .btn.active:last-child {
  border-left: 1px solid var(--base-brand-fill);
}

.b5-active .btn-group .btn:focus {
	outline: 0;
}

/*====== FORMS / INPUTS / SELECTS / DROPDOWNS ======*/
.form-control,
.b5-active input.form-control,
.b5-active textarea.form-control,
.b5-active select.form-control,
.b5-active select.form__select,
.b5-active select.form-select,
.b5-active input.form__input {
	display: flex;
  align-items: center;
  gap: 10px;
	width: 100%;
  height: unset;
	padding: 9px 18px;
	color: var(--base-default-text);
	background-color: var(--base-input-bg);
	border: solid 1px var(--base-input-border);
	line-height: var(--base-line-height);
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	background-clip: padding-box;
  font-size: var(--base-font-size);
  -webkit-box-shadow: unset;
  box-shadow: unset;
}

/*====== CARD ======*/
.b5-active .card {
  font-size: var(--base-font-size);
	display: flex;
  flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	color: #000000;
	border: 1px solid #e3e3e3;
	box-shadow: 0px 20px 20px -8px #00000033;
	padding: 40px;
	background-color: #ffffff;
	background-clip: border-box;
  line-height: var(--base-line-height);
}

@media (max-width: 768px) {
  .b5-active .card {
    padding: 20px;
  }
}

.b5-active .card-default {
  font-size: var(--base-font-size);
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  color: #000000;
  border: 1px solid #e3e3e3;
  box-shadow: 0px 20px 20px -8px #00000033;
  background-color: #ffffff;
  background-clip: border-box;
  line-height: var(--base-line-height);
  width: 536px;
}

.b5-active .card-title {
	display: flex;
	align-items: center;
	padding: 12px 12px 12px 16px;
	border-bottom: 1px solid #E3E3E3;
}

.b5-active .card-body {
	display: flex;
	padding: 7px 16px 16px 16px;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 6px;
}

.b5-active .card-content {
	color: #000;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 19.2px; /* 120% */
}

.b5-active .card-sm {
	box-shadow: 0px 10px 10px -4px #00000020;
	padding: 10px;
}

/*====== NOTIFICATIONS / ALERTS ======*/
.b5-active .alert {
  display: inline-flex;
  width: fit-content;
  padding: 12px;
  align-items: flex-start;
  align-content: flex-start;
  gap: 10px;
  border: 0.657px solid;
  line-height: var(--base-line-height);
  flex-grow: 0;
  color: var(--base-default-textSecondary);
  border-color: var(--base-default-border);
  background: var(--base-default-bg);
}

.b5-active .alert-primary {
  color: var(--base-default-textSecondary);
  border-color: var(--base-default-border);
  background: var(--base-default-bg);
}

.b5-active .alert-info {
  color: var(--base-info-text);
  border-color: var(--base-info-border);
  background: var(--base-info-bg);
}

.b5-active .alert-success {
  color: var(--base-success-text);
  background-color: var(--base-success-bg);
  border-color: var(--base-success-border);
}

.b5-active .alert-caution {
  color: var(--base-caution-text);
  background-color: var(--base-caution-bg);
  border-color: var(--base-caution-border);
}

.b5-active .alert-warning {
  color: var(--base-warning-text);
  background-color: var(--base-warning-bg);
  border-color: var(--base-warning-border);
}

.b5-active .alert-danger {
  color: var(--base-critical-text);
  background-color: var(--base-critical-bg);
  border-color: var(--base-critical-border);
}

.alert-icon,
.feather-icon {
	width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .feather-icon {
    width: 20px;
    height: 20px;
  }
}

/*====== BUTTON STATES ======*/
.btn-success {
  color: var(--base-success-text);
  background-color: var(--base-success-bg);
  border-color: var(--base-success-border);
}

.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success {
  background-color: var(--base-success-bg);
  border-color: var(--base-success-border);
  opacity: 0.65;
}

.btn-success:hover,
.btn-success:focus {
  color: var(--base-success-text);
  background-color: var(--base-success-bg);
  border-color: var(--base-success-border);
}

.btn-success:active,
.btn-success.active {
  color: var(--base-success-text);
  background-color: var(--base-success-bg);
  border-color: var(--base-success-border);
}

/* Ensure active state overrides hover */
.btn-success:active:hover,
.btn-success.active:hover {
  color: var(--base-success-text);
  background-color: var(--base-success-bg) !important;
  border-color: var(--base-success-border);
}

/* Fix: Prevent hover from overriding active when mouse moves off */
.btn-success:active:not(:hover) {
  color: var(--base-success-text);
  background-color: var(--base-success-bg) !important;
  border-color: var(--base-success-border);
}

/*====== BADGES ======*/
.b5-active .badge {
  color: var(--base-default-textSecondary);
  display: inline-flex;
  padding: 3px 12px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background-color: var(--base-default-bg);
  border: 1px solid var(--base-default-border);
  background: rgba(0, 0, 0, 0.06);
  line-height: 125%;
}

.b5-active .badge-sm {
  padding: 0px 10px;
}

.b5-active .badge.bg-info {
  color: var(--base-info-text);
  border: ipx solid var(--base-info-border);
}

.b5-active .badge.bg-success {
  color: var(--base-success-text);
  border: ipx solid var(--base-success-border);
}

.b5-active .badge.bg-caution {
  color: var(--base-caution-text);
  border: 1px solid var(--base-caution-border);
}

.b5-active .badge.bg-warning {
  color: var(--base-warning-text);
  border: 1px solid var(--base-warning-border);
}

.b5-active .badge.bg-critical {
  color: var(--base-critical-text);
  border: 1px solid var(--base-critical-border);
}

/*====== TOOLTIP ======*/
.tooltip__container {
  position: relative;
  display: inline-block;
  padding: 6px;
  cursor: pointer;
}

/* text that displays tooltip */
.tooltip__text {
  color: #FFF;
  font-family: var(--galls-font-body);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  background-color: var(--base-brand-fill);

  visibility: hidden;
  text-align: left;
  padding: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Position the tooltip above the text */
  left: 100%;
  /* width: 200px; Adjust the width to make the tooltip longer */
  margin-left: -100px; /* Adjust to center the tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip__text::after {
  content: '';
  position: absolute;
  top: 100%; /* Position the arrow at the bottom of the tooltip */
  left: 50%;
  margin-left: -10px; /* Adjust to center the arrow */
  border-width: 8px; /* Size of the arrow */
  border-style: solid;
  border-color: var(--base-brand-fill) transparent transparent transparent;
}

/* Show the tooltip text when hovering over the tooltip container or the tooltip itself */
.tooltip__container:hover .tooltip__text,
.tooltip__text:hover {
  visibility: visible;
  opacity: 1;
}

/* Extend the hover area to cover the gap */
.tooltip__container::before {
  content: '';
  position: absolute;
  bottom: 100%; /* Position the element just above the container */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 10px; /* Height to cover the gap */
  pointer-events: auto; /* Allow mouse events to be captured */
  visibility: visible; /* Ensure it’s always visible to maintain hover state */
}

.tooltip__container:hover::before {
  visibility: visible;
}


/* Custom Classes ------------------------------------------------------------------------------- */

/* body {
  background: #F7F7F7;
} */

body .b5-active {
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
}

.b5-active h1.text-transform-none,
.b5-active h2.text-transform-none,
.b5-active h3.text-transform-none,
.b5-active h4.text-transform-none,
.b5-active h5.text-transform-none,
.b5-active h6.text-transform-none {
  text-transform: none !important;
}

.b5-active .pointer {
  cursor: pointer;
}

.b5-active .cursor-default {
  cursor: default;
}

.b5-active .text-normal {
  text-transform: none !important;
}

.b5-active .no-letter-spacing {
  letter-spacing: 0;
}

.b5-active .br-6 {
  border-radius: 6px;
}

.b5-active .br-12 {
  border-radius: 12px;
}

.b5-active .section-divider {
  border-right: 1px solid #dcdcdc;
}

@media (max-width: 768px) {
  .b5-active .section-divider {
    border-bottom: 1px solid #dcdcdc;
    border-right: 0;
  }
}

/* Gap Classes */
.b5-active .gap-3px { gap: 3px; }
.b5-active .gap-6 { gap: 6px; }
.b5-active .gap-10 { gap: 10px; }
.b5-active .gap-12 { gap: 12px; }
.b5-active .gap-24 { gap: 24px; }

@media (min-width: 768px) {
  .b5-active .gap-md-12 { gap: 12px; }
  .b5-active .gap-md-24 { gap: 24px; }
}
@media (min-width: 992px) {
  .b5-active .gap-lg-12 { gap: 12px; }
  .b5-active .gap-lg-24 { gap: 24px; }
}

/* Max Width Classes */
.b5-active .mw-400 { max-width: 400px; }
.b5-active .mw-500 { max-width: 500px; }
.b5-active .mw-1000 { max-width: 1000px; }

/* Padding Classes */
.b5-active .p-3px { padding-top: 3px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; }
.b5-active .p-6 { padding-top: 6px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; }
.b5-active .p-10 { padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; }
.b5-active .p-12 { padding-top: 12px; padding-bottom: 12px; padding-left: 12px; padding-right: 12px; }
.b5-active .p-24 { padding-top: 24px; padding-bottom: 24px; padding-left: 24px; padding-right: 24px; }
.b5-active .p-30 { padding-top: 30px; padding-bottom: 30px; padding-left: 30px; padding-right: 30px; }
.b5-active .p-40 { padding-top: 40px; padding-bottom: 40px; padding-left: 40px; padding-right: 40px; }
.b5-active .p-48 { padding-top: 48px; padding-bottom: 48px; padding-left: 48px; padding-right: 48px; }

.b5-active .pt-3px { padding-top: 3px; }
.b5-active .pb-3px { padding-bottom: 3px; }
.b5-active .pl-3px { padding-left: 3px; }
.b5-active .pr-3px { padding-right: 3px; }

.b5-active .pt-6 { padding-top: 6px; }
.b5-active .pb-6 { padding-bottom: 6px; }
.b5-active .pl-6 { padding-left: 6px; }
.b5-active .pr-6 { padding-right: 6px; }

.b5-active .pt-10 { padding-top: 10px; }
.b5-active .pb-10 { padding-bottom: 10px; }
.b5-active .pl-10 { padding-left: 10px; }
.b5-active .pr-10 { padding-right: 10px; }

.b5-active .pt-12 { padding-top: 12px; }
.b5-active .pb-12 { padding-bottom: 12px; }
.b5-active .pl-12 { padding-left: 12px; }
.b5-active .pr-12 { padding-right: 12px; }

.b5-active .pt-24 { padding-top: 24px; }
.b5-active .pb-24 { padding-bottom: 24px; }
.b5-active .pl-24 { padding-left: 24px; }
.b5-active .pr-24 { padding-right: 24px; }

.b5-active .pt-30 { padding-top: 30px; }
.b5-active .pb-30 { padding-bottom: 30px; }
.b5-active .pl-30 { padding-left: 30px; }
.b5-active .pr-30 { padding-right: 30px; }

.b5-active .pt-48 { padding-top: 48px; }
.b5-active .pb-48 { padding-bottom: 48px; }
.b5-active .pl-48 { padding-left: 48px; }
.b5-active .pr-48 { padding-right: 48px; }

.b5-active .px-6 { padding-left: 6px; padding-right: 6px; }
.b5-active .px-10 { padding-left: 10px; padding-right: 10px; }
.b5-active .px-12 { padding-left: 12px; padding-right: 12px; }
.b5-active .px-24 { padding-left: 24px; padding-right: 24px; }
.b5-active .px-30 { padding-left: 30px; padding-right: 30px; }
.b5-active .px-48 { padding-left: 48px; padding-right: 48px; }

.b5-active .py-6 { padding-top: 6px; padding-bottom: 6px; }
.b5-active .py-10 { padding-top: 10px; padding-bottom: 10px; }
.b5-active .py-12 { padding-top: 12px; padding-bottom: 12px; }
.b5-active .py-24 { padding-top: 24px; padding-bottom: 24px; }
.b5-active .py-30 { padding-top: 30px; padding-bottom: 30px; }
.b5-active .py-48 { padding-top: 48px; padding-bottom: 48px; }

@media (min-width: 768px) {
  .b5-active .p-md-6 { padding-top: 6px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; }
  .b5-active .p-md-10 { padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; }
  .b5-active .p-md-12 { padding-top: 12px; padding-bottom: 12px; padding-left: 12px; padding-right: 12px; }
  .b5-active .p-md-24 { padding-top: 24px; padding-bottom: 24px; padding-left: 24px; padding-right: 24px; }
  .b5-active .p-md-30 { padding-top: 30px; padding-bottom: 30px; padding-left: 30px; padding-right: 30px; }
  .b5-active .p-md-48 { padding-top: 48px; padding-bottom: 48px; padding-left: 48px; padding-right: 48px; }

  .b5-active .pt-md-6 { padding-top: 6px; }
  .b5-active .pb-md-6 { padding-bottom: 6px; }
  .b5-active .pl-md-6 { padding-left: 6px; }
  .b5-active .pr-md-6 { padding-right: 6px; }

  .b5-active .pt-md-10 { padding-top: 10px; }
  .b5-active .pb-md-10 { padding-bottom: 10px; }
  .b5-active .pl-md-10 { padding-left: 10px; }
  .b5-active .pr-md-10 { padding-right: 10px; }

  .b5-active .pt-md-12 { padding-top: 12px; }
  .b5-active .pb-md-12 { padding-bottom: 12px; }
  .b5-active .pl-md-12 { padding-left: 12px; }
  .b5-active .pr-md-12 { padding-right: 12px; }

  .b5-active .pt-md-24 { padding-top: 24px; }
  .b5-active .pb-md-24 { padding-bottom: 24px; }
  .b5-active .pl-md-24 { padding-left: 24px; }
  .b5-active .pr-md-24 { padding-right: 24px; }

  .b5-active .pt-md-30 { padding-top: 30px; }
  .b5-active .pb-md-30 { padding-bottom: 30px; }
  .b5-active .pl-md-30 { padding-left: 30px; }
  .b5-active .pr-md-30 { padding-right: 30px; }

  .b5-active .pt-md-48 { padding-top: 48px; }
  .b5-active .pb-md-48 { padding-bottom: 48px; }
  .b5-active .pl-md-48 { padding-left: 48px; }
  .b5-active .pr-md-48 { padding-right: 48px; }

  .b5-active .px-md-6 { padding-left: 6px; padding-right: 6px; }
  .b5-active .px-md-10 { padding-left: 10px; padding-right: 10px; }
  .b5-active .px-md-12 { padding-left: 12px; padding-right: 12px; }
  .b5-active .px-md-24 { padding-left: 24px; padding-right: 24px; }
  .b5-active .px-md-30 { padding-left: 30px; padding-right: 30px; }
  .b5-active .px-md-48 { padding-left: 48px; padding-right: 48px; }

  .b5-active .py-md-6 { padding-top: 6px; padding-bottom: 6px; }
  .b5-active .py-md-10 { padding-top: 10px; padding-bottom: 10px; }
  .b5-active .py-md-12 { padding-top: 12px; padding-bottom: 12px; }
  .b5-active .py-md-24 { padding-top: 24px; padding-bottom: 24px; }
  .b5-active .py-md-30 { padding-top: 30px; padding-bottom: 30px; }
  .b5-active .py-md-48 { padding-top: 48px; padding-bottom: 48px; }
}

@media (min-width: 992px) {
  .b5-active .p-lg-6 { padding-top: 6px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; }
  .b5-active .p-lg-10 { padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; }
  .b5-active .p-lg-12 { padding-top: 12px; padding-bottom: 12px; padding-left: 12px; padding-right: 12px; }
  .b5-active .p-lg-24 { padding-top: 24px; padding-bottom: 24px; padding-left: 24px; padding-right: 24px; }
  .b5-active .p-lg-30 { padding-top: 30px; padding-bottom: 30px; padding-left: 30px; padding-right: 30px; }
  .b5-active .p-lg-48 { padding-top: 48px; padding-bottom: 48px; padding-left: 48px; padding-right: 48px; }

  .b5-active .pt-lg-6 { padding-top: 6px; }
  .b5-active .pb-lg-6 { padding-bottom: 6px; }
  .b5-active .pl-lg-6 { padding-left: 6px; }
  .b5-active .pr-lg-6 { padding-right: 6px; }

  .b5-active .pt-lg-10 { padding-top: 10px; }
  .b5-active .pb-lg-10 { padding-bottom: 10px; }
  .b5-active .pl-lg-10 { padding-left: 10px; }
  .b5-active .pr-lg-10 { padding-right: 10px; }

  .b5-active .pt-lg-12 { padding-top: 12px; }
  .b5-active .pb-lg-12 { padding-bottom: 12px; }
  .b5-active .pl-lg-12 { padding-left: 12px; }
  .b5-active .pr-lg-12 { padding-right: 12px; }

  .b5-active .pt-lg-24 { padding-top: 24px; }
  .b5-active .pb-lg-24 { padding-bottom: 24px; }
  .b5-active .pl-lg-24 { padding-left: 24px; }
  .b5-active .pr-lg-24 { padding-right: 24px; }

  .b5-active .pt-lg-30 { padding-top: 30px; }
  .b5-active .pb-lg-30 { padding-bottom: 30px; }
  .b5-active .pl-lg-30 { padding-left: 30px; }
  .b5-active .pr-lg-30 { padding-right: 30px; }

  .b5-active .pt-lg-48 { padding-top: 48px; }
  .b5-active .pb-lg-48 { padding-bottom: 48px; }
  .b5-active .pl-lg-48 { padding-left: 48px; }
  .b5-active .pr-lg-48 { padding-right: 48px; }

  .b5-active .px-lg-6 { padding-left: 6px; padding-right: 6px; }
  .b5-active .px-lg-10 { padding-left: 10px; padding-right: 10px; }
  .b5-active .px-lg-12 { padding-left: 12px; padding-right: 12px; }
  .b5-active .px-lg-24 { padding-left: 24px; padding-right: 24px; }
  .b5-active .px-lg-30 { padding-left: 30px; padding-right: 30px; }
  .b5-active .px-lg-48 { padding-left: 48px; padding-right: 48px; }

  .b5-active .py-lg-6 { padding-top: 6px; padding-bottom: 6px; }
  .b5-active .py-lg-10 { padding-top: 10px; padding-bottom: 10px; }
  .b5-active .py-lg-12 { padding-top: 12px; padding-bottom: 12px; }
  .b5-active .py-lg-24 { padding-top: 24px; padding-bottom: 24px; }
  .b5-active .py-lg-30 { padding-top: 30px; padding-bottom: 30px; }
  .b5-active .py-lg-48 { padding-top: 48px; padding-bottom: 48px; }
}

/* Margin Classes */
.b5-active .mt-3px { margin-top: 3px; }
.b5-active .mb-3px { margin-bottom: 3px; }
.b5-active .ml-3px { margin-left: 3px; }
.b5-active .mr-3px { margin-right: 3px; }

.b5-active .mt-6 { margin-top: 6px; }
.b5-active .mb-6 { margin-bottom: 6px; }
.b5-active .ml-6 { margin-left: 6px; }
.b5-active .mr-6 { margin-right: 6px; }

.b5-active .mt-10 { margin-top: 10px; }
.b5-active .mb-10 { margin-bottom: 10px; }
.b5-active .ml-10 { margin-left: 10px; }
.b5-active .mr-10 { margin-right: 10px; }

.b5-active .mt-12 { margin-top: 12px; }
.b5-active .mb-12 { margin-bottom: 12px; }
.b5-active .ml-12 { margin-left: 12px; }
.b5-active .mr-12 { margin-right: 12px; }

.b5-active .mt-24 { margin-top: 24px; }
.b5-active .mb-24 { margin-bottom: 24px; }
.b5-active .ml-24 { margin-left: 24px; }
.b5-active .mr-24 { margin-right: 24px; }

.b5-active .mt-30 { margin-top: 30px; }
.b5-active .mb-30 { margin-bottom: 30px; }
.b5-active .ml-30 { margin-left: 30px; }
.b5-active .mr-30 { margin-right: 30px; }

.b5-active .mt-48 { margin-top: 48px; }
.b5-active .mb-48 { margin-bottom: 48px; }
.b5-active .ml-48 { margin-left: 48px; }
.b5-active .mr-48 { margin-right: 48px; }

@media (min-width: 768px) {
  .b5-active .mt-md-6 { margin-top: 6px; }
  .b5-active .mb-md-6 { margin-bottom: 6px; }
  .b5-active .ml-md-6 { margin-left: 6px; }
  .b5-active .mr-md-6 { margin-right: 6px; }

  .b5-active .mt-md-10 { margin-top: 10px; }
  .b5-active .mb-md-10 { margin-bottom: 10px; }
  .b5-active .ml-md-10 { margin-left: 10px; }
  .b5-active .mr-md-10 { margin-right: 10px; }

  .b5-active .mt-md-12 { margin-top: 12px; }
  .b5-active .mb-md-12 { margin-bottom: 12px; }
  .b5-active .ml-md-12 { margin-left: 12px; }
  .b5-active .mr-md-12 { margin-right: 12px; }

  .b5-active .mt-md-24 { margin-top: 24px; }
  .b5-active .mb-md-24 { margin-bottom: 24px; }
  .b5-active .ml-md-24 { margin-left: 24px; }
  .b5-active .mr-md-24 { margin-right: 24px; }

  .b5-active .mt-md-30 { margin-top: 30px; }
  .b5-active .mb-md-30 { margin-bottom: 30px; }
  .b5-active .ml-md-30 { margin-left: 30px; }
  .b5-active .mr-md-30 { margin-right: 30px; }

  .b5-active .mt-md-48 { margin-top: 48px; }
  .b5-active .mb-md-48 { margin-bottom: 48px; }
  .b5-active .ml-md-48 { margin-left: 48px; }
  .b5-active .mr-md-48 { margin-right: 48px; }
}

@media (min-width: 992px) {
  .b5-active .mt-lg-6 { margin-top: 6px; }
  .b5-active .mb-lg-6 { margin-bottom: 6px; }
  .b5-active .ml-lg-6 { margin-left: 6px; }
  .b5-active .mr-lg-6 { margin-right: 6px; }

  .b5-active .mt-lg-10 { margin-top: 10px; }
  .b5-active .mb-lg-10 { margin-bottom: 10px; }
  .b5-active .ml-lg-10 { margin-left: 10px; }
  .b5-active .mr-lg-10 { margin-right: 10px; }

  .b5-active .mt-lg-12 { margin-top: 12px; }
  .b5-active .mb-lg-12 { margin-bottom: 12px; }
  .b5-active .ml-lg-12 { margin-left: 12px; }
  .b5-active .mr-lg-12 { margin-right: 12px; }

  .b5-active .mt-lg-24 { margin-top: 24px; }
  .b5-active .mb-lg-24 { margin-bottom: 24px; }
  .b5-active .ml-lg-24 { margin-left: 24px; }
  .b5-active .mr-lg-24 { margin-right: 24px; }

  .b5-active .mt-lg-30 { margin-top: 30px; }
  .b5-active .mb-lg-30 { margin-bottom: 30px; }
  .b5-active .ml-lg-30 { margin-left: 30px; }
  .b5-active .mr-lg-30 { margin-right: 30px; }

  .b5-active .mt-lg-48 { margin-top: 48px; }
  .b5-active .mb-lg-48 { margin-bottom: 48px; }
  .b5-active .ml-lg-48 { margin-left: 48px; }
  .b5-active .mr-lg-48 { margin-right: 48px; }
}

.b5-active .p-modal {
  font-size: 16px !important;
}

.pages__remove-top-gap {
  margin-top: -40px;
}

 @media (max-width: 992px) {
  .pages__remove-top-gap {
    margin-top: -10px;
  }
 }

.pages__full-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

/*====== VALIDATIONS (overriding backend validation styles) ======*/
.b5-active .valid {
  color: var(--base-success-text) !important;
}

.b5-active .invalid {
  color: var(--base-critical-text) !important;
}

.b5-active .fldError {
  color: var(--base-critical-text) !important;
  font-weight: 400 !important;
}

/* Create Account Date Picker - move calendar to right side*/
.position-relative input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 18px;
}

/* Bootstrap 5 overrides ------------------------------------------------------------------------------- */

/*====== LINE HEIGHT ======*/
.b5-active .lh-1 { line-height: var(--line-height-tight); }
.b5-active .lh-sm { line-height: var(--line-height-small); }
.b5-active .lh-base { line-height: var(--line-height-base); }
.b5-active .lh-lg { line-height: var(--line-height-large); }

/*====== HEADING TAGS ======*/
.b5-active h1,
.b5-active .h1 {
    font-size: var(--base-h1) !important;
}

.b5-active h2,
.b5-active .h2 {
    font-size: var(--base-h2) !important;
}

.b5-active h3,
.b5-active .h3 {
    font-size: var(--base-h3) !important;
}

.b5-active h4,
.b5-active .h4 {
    font-size: var(--base-h4) !important;
}

.b5-active h5,
.b5-active .h5 {
    font-size: var(--base-h5) !important;
    color: unset;
}

.b5-active h6,
.b5-active .h6 {
    font-size: var(--base-h6) !important;
}

/*====== Change link color ======*/
.b5-active a.text-primary:hover,
.b5-active a.text-primary:focus {
  color: var(--base-default-text);
}

.b5-active .list-unstyled {
  margin-bottom: 0;
}

/*====== Remove underline quirk ======*/
.b5-active a, .b5-active a * { text-decoration: none; }

.b5-active a:hover, .b5-active a:focus, .b5-active a:active,
.b5-active a:hover *, .b5-active a:focus *, .b5-active a:active * { text-decoration: none; }

/*====== SHADOWS ======*/
.b5-active .shadow-none { box-shadow: none; }
.b5-active .shadow-sm { box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.20); }
.b5-active .shadow { box-shadow: 0px 10px 10px -4px rgba(0, 0, 0, 0.20); }
.b5-active .shadow-lg { box-shadow: 0px 20px 20px -8px rgba(0, 0, 0, 0.20); }
.b5-active .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }

@media (max-width: 768px) {
  .b5-active .shadow-xl { box-shadow: 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
}

/*====== BORDER ======*/
.b5-active .border { border: 1px solid #e3e3e3 !important; }
.b5-active .border-0 { border: 0 !important; }
.b5-active .border-top { border-top: 1px solid #e3e3e3 !important; }
.b5-active .border-top-0 { border-top: 0 !important; }
.b5-active .border-end { border-right: 1px solid #e3e3e3 !important; }
.b5-active .border-end-0 { border-right: 0 !important; }
.b5-active .border-bottom { border-bottom: 1px solid #e3e3e3 !important; }
.b5-active .border-bottom-0 { border-bottom: 0 !important; }
.b5-active .border-start { border-left: 1px solid #e3e3e3 !important; }
.b5-active .border-start-0 { border-left: 0 !important; }
.b5-active .border-primary { border-color: var(--base-default-text) !important; }
.b5-active .border-secondary { border-color: var(--base-default-textSecondary) !important; }
.b5-active .border-success { border-color: var(--base-success-text) !important; }
.b5-active .border-info { border-color: var(--base-info-text) !important; }
.b5-active .border-warning { border-color: var(--base-warning-text) !important; }
.b5-active .border-danger { border-color: var(--base-critical-text) !important; }
.b5-active .border-light { border-color: #ffffff !important; }
.b5-active .border-dark { border-color: var(--base-default-text) !important; }
.b5-active .border-white { border-color: #ffffff !important; }

.b5-active .rounded { border-radius: 6px !important; }
.b5-active .rounded-circle { border-radius: 50% !important; }
.b5-active .rounded-0 { border-radius: 0 !important; }
.b5-active .rounded-sm { border-radius: 6px !important; }
.b5-active .rounded-md { border-radius: 12px !important; }
.b5-active .rounded-lg { border-radius: 18px !important; }
.b5-active .rounded-xl { border-radius: 24px !important; }
.b5-active .rounded-pill { border-radius: 50rem !important; }
.b5-active .rounded-top { border-top-left-radius: 6px !important; border-top-right-radius: 6px !important; border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; }
.b5-active .rounded-end { border-top-right-radius: 6px !important; border-bottom-right-radius: 6px !important; border-top-left-radius: 0px !important; border-bottom-left-radius: 0px !important;}
.b5-active .rounded-bottom { border-bottom-left-radius: 6px !important; border-bottom-right-radius: 6px !important; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important;}
.b5-active .rounded-start { border-top-left-radius: 6px !important; border-bottom-left-radius: 6px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important;}
.b5-active .rounded-top-left { border-top-left-radius: 6px !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.b5-active .rounded-top-right { border-top-left-radius: 0 !important; border-top-right-radius: 6px !important; border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; }


/*====== TEXT TRANSFORM ======*/
.b5-active .fs-1 { font-size: var(--base-h1) !important; }
.b5-active .fs-2 { font-size: var(--base-h2) !important; }
.b5-active .fs-3 { font-size: var(--base-h3) !important; }
.b5-active .fs-4 { font-size: var(--base-h4) !important; }
.b5-active .fs-5 { font-size: var(--base-h5) !important; }
.b5-active .fs-6 { font-size: var(--base-h6) !important; }
.b5-active .fs-14 {font-size: var(--base-mobile-font-size-sm) !important; }
.b5-active .fs-15 {font-size: 15px !important; }


@media (max-width: 576px) {
  .b5-active .fs-1 { font-size: var(--base-mobile-h1) !important; }
  .b5-active .fs-2 { font-size: var(--base-mobile-h2) !important; }
  .b5-active .fs-3 { font-size: var(--base-mobile-h3) !important; }
  .b5-active .fs-4 { font-size: var(--base-mobile-h4) !important; }
  .b5-active .fs-5 { font-size: var(--base-mobile-h5) !important; }
  .b5-active .fs-6 { font-size: var(--base-mobile-h6) !important; }
}

@media (min-width: 768px) {
  .b5-active .fs-md-1 { font-size: var(--base-h1) !important; }
  .b5-active .fs-md-2 { font-size: var(--base-h2) !important; }
  .b5-active .fs-md-3 { font-size: var(--base-h3) !important; }
  .b5-active .fs-md-4 { font-size: var(--base-h4) !important; }
  .b5-active .fs-md-5 { font-size: var(--base-h5) !important; }
  .b5-active .fs-md-6 { font-size: var(--base-h6) !important; }
}

@media (min-width: 992px) {
  .b5-active .fs-lg-1 { font-size: var(--base-h1) !important; }
  .b5-active .fs-lg-2 { font-size: var(--base-h2) !important; }
  .b5-active .fs-lg-3 { font-size: var(--base-h3) !important; }
  .b5-active .fs-lg-4 { font-size: var(--base-h4) !important; }
  .b5-active .fs-lg-5 { font-size: var(--base-h5) !important; }
  .b5-active .fs-lg-6 { font-size: var(--base-h6) !important; }
}

@media (min-width: 1200px) {
  .b5-active .fs-xl-1 { font-size: var(--base-h1) !important; }
  .b5-active .fs-xl-2 { font-size: var(--base-h2) !important; }
  .b5-active .fs-xl-3 { font-size: var(--base-h3) !important; }
  .b5-active .fs-xl-4 { font-size: var(--base-h4) !important; }
  .b5-active .fs-xl-5 { font-size: var(--base-h5) !important; }
  .b5-active .fs-xl-6 { font-size: var(--base-h6) !important; }
}

@media (min-width: 1400px) {
  .b5-active .fs-xxl-1 { font-size: var(--base-h1) !important; }
  .b5-active .fs-xxl-2 { font-size: var(--base-h2) !important; }
  .b5-active .fs-xxl-3 { font-size: var(--base-h3) !important; }
  .b5-active .fs-xxl-4 { font-size: var(--base-h4) !important; }
  .b5-active .fs-xxl-5 { font-size: var(--base-h5) !important; }
  .b5-active .fs-xxl-6 { font-size: var(--base-h6) !important; }
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings' !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

/* Default Bootstrap 5 utilities ------------------------------------------------------------------------------- */

/*====== OVERIDDEN BOOTSTRAP 3 STYLES ======*/
.b5-active h1, .b5-active .h1 { margin: 0; line-height: var(--base-line-height);}
.b5-active h2, .b5-active .h2 { margin: 0; line-height: var(--base-line-height);}
.b5-active h3, .b5-active .h3 { margin: 0; line-height: var(--base-line-height);}
.b5-active h4, .b5-active .h4 { margin: 0; line-height: var(--base-line-height);}
.b5-active h5, .b5-active .h5 { margin: 0; line-height: var(--base-line-height);}
.b5-active h6, .b5-active .h6 { margin: 0; line-height: var(--base-line-height);}

.b5-active p { margin: 0;}
.b5-active a { margin: 0;}
.b5-active label { margin: 0;}
.b5-active .alert { margin-bottom: 0;}

/*====== FONT SIZES ======*/
.b5-active .text-uppercase {
	text-transform: uppercase !important;
}

/*====== TEXTS ======*/
.b5-active .text-primary { color: var(--base-default-text); }
.b5-active .text-secondary { color: var(--base-default-textSecondary); }
.b5-active .text-success { color: var(--base-success-text); }
.b5-active .text-danger { color: var(--base-critical-text); }
.b5-active .text-warning { color: var(--base-warning-text); }
.b5-active .text-info { color: var(--base-info-text); }
.b5-active .text-light { color: #ffffff; }
.b5-active .text-dark { color: #000000; }

/*====== TEXT DECORATION======*/
.b5-active .text-decoration-underline { text-decoration: underline !important; }
.b5-active .text-decoration-none { text-decoration: none !important; }
.b5-active .text-decoration-line-through { text-decoration: line-through !important; }
.b5-active .text-decoration-overline { text-decoration: overline !important; }

.underline-on-hover:hover {
  text-decoration: underline !important;
}

/*====== BACKGROUND ======*/
.b5-active .bg-primary { background-color: var(--base-default-bg); }
.b5-active .bg-secondary { background-color: var(--base-default-bgSecondary); }
.b5-active .bg-success { background-color: var(--base-success-bg); }
.b5-active .bg-danger { background-color: var(--base-critical-bg); }
.b5-active .bg-caution { background-color: var(--base-caution-bg); }
.b5-active .bg-warning { background-color: var(--base-warning-bg); }
.b5-active .bg-critical { background-color: var(--base-critical-bg); }
.b5-active .bg-info { background-color: var(--base-info-bg); }
.b5-active .bg-light { background-color: #ffffff; }
.b5-active .bg-dark { background-color: #000000; }

/*====== TEXT ALIGNMENT (CSS with Breakpoints) ======*/
.b5-active .text-start { text-align: left; }
.b5-active .text-center { text-align: center; }
.b5-active .text-end { text-align: right; }

/* Small devices (≥ 576px) */
@media (min-width: 576px) {
  .b5-active .text-sm-start { text-align: left; }
  .b5-active .text-sm-center { text-align: center; }
  .b5-active .text-sm-end { text-align: right; }
}

/* Medium devices (≥ 768px) */
@media (min-width: 768px) {
  .b5-active .text-md-start { text-align: left; }
  .b5-active .text-md-center { text-align: center; }
  .b5-active .text-md-end { text-align: right; }
}

/* Large devices (≥ 992px) */
@media (min-width: 992px) {
  .b5-active .text-lg-start { text-align: left; }
  .b5-active .text-lg-center { text-align: center; }
  .b5-active .text-lg-end { text-align: right; }
}

/* Extra large devices (≥ 1200px) */
@media (min-width: 1200px) {
  .b5-active .text-xl-start { text-align: left; }
  .b5-active .text-xl-center { text-align: center; }
  .b5-active .text-xl-end { text-align: right; }
}

/* Extra extra large devices (≥ 1400px) */
@media (min-width: 1400px) {
  .b5-active .text-xxl-start { text-align: left; }
  .b5-active .text-xxl-center { text-align: center; }
  .b5-active .text-xxl-end { text-align: right; }
}

/*====== TEXT WRAPPING AND OVERFLOW ======*/
.b5-active .text-wrap { white-space: normal !important; }
.b5-active .text-nowrap { white-space: nowrap !important; }
.b5-active .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b5-active .text-break { overflow-wrap: break-word !important; }

/*====== TEXT TRANSFORMATION ======*/
.b5-active .text-lowercase { text-transform: lowercase !important; }
.b5-active .text-uppercase { text-transform: uppercase !important; }
.b5-active .text-capitalize { text-transform: capitalize !important; }

/*====== TEXT WEIGHT FONT AND STYLE ======*/
.b5-active .fw-bold { font-weight: 700 !important; }
.b5-active .fw-bolder { font-weight: bolder !important; }
.b5-active .fw-normal { font-weight: 400 !important; }
.b5-active .fw-regular { font-weight: 500 !important; }
.b5-active .fw-light { font-weight: 300 !important; }
.b5-active .fw-lighter { font-weight: lighter !important; }
.b5-active .font-italic { font-style: italic !important; }

/*====== VERTICAL ALIGN ======*/
.b5-active .align-baseline { vertical-align: baseline !important; }
.b5-active .align-top { vertical-align: top !important; }
.b5-active .align-middle { vertical-align: middle !important; }
.b5-active .align-bottom { vertical-align: bottom !important; }
.b5-active .align-text-top { vertical-align: text-top !important; }
.b5-active .align-text-bottom { vertical-align: text-bottom !important; }

/*====== POSITION ======*/
.b5-active .position-relative { position: relative; }
.b5-active .position-absolute { position: absolute; }
.b5-active .position-fixed { position: fixed; }
.b5-active .position-sticky { position: sticky; top: 0; }

.b5-active .top-0 { top: 0; }
.b5-active .top-50 { top: 50%; }
.b5-active .top-100 { top: 100%; }
.b5-active .top-auto { top: auto; }

.b5-active .right-0 { right: 0; }
.b5-active .right-50 { right: 50%; }
.b5-active .right-100 { right: 100%; }
.b5-active .right-auto { right: auto; }

.b5-active .bottom-0 { bottom: 0; }
.b5-active .bottom-50 { bottom: 50%; }
.b5-active .bottom-100 { bottom: 100%; }
.b5-active .bottom-auto { bottom: auto; }

.b5-active .left-0 { left: 0; }
.b5-active .left-50 { left: 50%; }
.b5-active .left-100 { left: 100%; }
.b5-active .left-auto { left: auto; }

/*====== PADDING ======*/
.b5-active .p-0 { padding: 0;}
.b5-active .p-1 { padding: 0.25rem !important; }
.b5-active .p-2 { padding: 0.5rem !important; }
.b5-active .p-3 { padding: 1rem !important; }
.b5-active .p-4 { padding: 1.5rem !important; }
.b5-active .p-5 { padding: 3rem !important; }

.b5-active .pt-0 { padding-top: 0 !important; }
.b5-active .pt-1 { padding-top: 0.25rem !important; }
.b5-active .pt-2 { padding-top: 0.5rem !important; }
.b5-active .pt-3 { padding-top: 1rem !important; }
.b5-active .pt-4 { padding-top: 1.5rem !important; }
.b5-active .pt-5 { padding-top: 3rem !important; }

.b5-active .pb-0 { padding-bottom: 0 !important; }
.b5-active .pb-1 { padding-bottom: 0.25rem !important; }
.b5-active .pb-2 { padding-bottom: 0.5rem !important; }
.b5-active .pb-3 { padding-bottom: 1rem !important; }
.b5-active .pb-4 { padding-bottom: 1.5rem !important; }
.b5-active .pb-5 { padding-bottom: 3rem !important; }

.b5-active .pl-0 { padding-left: 0 !important; }
.b5-active .pl-1 { padding-left: 0.25rem !important; }
.b5-active .pl-2 { padding-left: 0.5rem !important; }
.b5-active .pl-3 { padding-left: 1rem !important; }
.b5-active .pl-4 { padding-left: 1.5rem !important; }
.b5-active .pl-5 { padding-left: 3rem !important; }

.b5-active .pr-0 { padding-right: 0 !important; }
.b5-active .pr-1 { padding-right: 0.25rem !important; }
.b5-active .pr-2 { padding-right: 0.5rem !important; }
.b5-active .pr-3 { padding-right: 1rem !important; }
.b5-active .pr-4 { padding-right: 1.5rem !important; }
.b5-active .pr-5 { padding-right: 3rem !important; }

.b5-active .pe-0 { padding-right: 0 !important; } /* LTR */
.b5-active .pe-1 { padding-right: 0.25rem !important; }
.b5-active .pe-2 { padding-right: 0.5rem !important; }
.b5-active .pe-3 { padding-right: 1rem !important; }
.b5-active .pe-4 { padding-right: 1.5rem !important; }
.b5-active .pe-5 { padding-right: 3rem !important; }

.b5-active .ps-0 { padding-left: 0 !important; } /* LTR */
.b5-active .ps-1 { padding-left: 0.25rem !important; }
.b5-active .ps-2 { padding-left: 0.5rem !important; }
.b5-active .ps-3 { padding-left: 1rem !important; }
.b5-active .ps-4 { padding-left: 1.5rem !important; }
.b5-active .ps-5 { padding-left: 3rem !important; }

.b5-active .px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.b5-active .px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.b5-active .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.b5-active .px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.b5-active .px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.b5-active .px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

.b5-active .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.b5-active .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.b5-active .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.b5-active .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.b5-active .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.b5-active .py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/*====== MARGIN ======*/
.b5-active .m-0 { margin: 0 !important; }
.b5-active .m-1 { margin: 0.25rem !important; }
.b5-active .m-2 { margin: 0.5rem !important; }
.b5-active .m-3 { margin: 1rem !important; }
.b5-active .m-4 { margin: 1.5rem !important; }
.b5-active .m-5 { margin: 3rem !important; }

.b5-active .mt-0 { margin-top: 0 !important; }
.b5-active .mt-1 { margin-top: 0.25rem !important; }
.b5-active .mt-2 { margin-top: 0.5rem !important; }
.b5-active .mt-3 { margin-top: 1rem !important; }
.b5-active .mt-4 { margin-top: 1.5rem !important; }
.b5-active .mt-5 { margin-top: 3rem !important; }

.b5-active .mb-0 { margin-bottom: 0 !important; }
.b5-active .mb-1 { margin-bottom: 0.25rem !important; }
.b5-active .mb-2 { margin-bottom: 0.5rem !important; }
.b5-active .mb-3 { margin-bottom: 1rem !important; }
.b5-active .mb-4 { margin-bottom: 1.5rem !important; }
.b5-active .mb-5 { margin-bottom: 3rem !important; }

.b5-active .ml-0 { margin-left: 0 !important; }
.b5-active .ml-1 { margin-left: 0.25rem !important; }
.b5-active .ml-2 { margin-left: 0.5rem !important; }
.b5-active .ml-3 { margin-left: 1rem !important; }
.b5-active .ml-4 { margin-left: 1.5rem !important; }
.b5-active .ml-5 { margin-left: 3rem !important; }

.b5-active .mr-0 { margin-right: 0 !important; }
.b5-active .mr-1 { margin-right: 0.25rem !important; }
.b5-active .mr-2 { margin-right: 0.5rem !important; }
.b5-active .mr-3 { margin-right: 1rem !important; }
.b5-active .mr-4 { margin-right: 1.5rem !important; }
.b5-active .mr-5 { margin-right: 3rem !important; }

.b5-active .me-0 { margin-right: 0 !important; } /* LTR  */
.b5-active .me-1 { margin-right: 0.25rem !important; }
.b5-active .me-2 { margin-right: 0.5rem !important; }
.b5-active .me-3 { margin-right: 1rem !important; }
.b5-active .me-4 { margin-right: 1.5rem !important; }
.b5-active .me-5 { margin-right: 3rem !important; }

.b5-active .ms-0 { margin-left: 0 !important; } /* LTR */
.b5-active .ms-1 { margin-left: 0.25rem !important; }
.b5-active .ms-2 { margin-left: 0.5rem !important; }
.b5-active .ms-3 { margin-left: 1rem !important; }
.b5-active .ms-4 { margin-left: 1.5rem !important; }
.b5-active .ms-5 { margin-left: 3rem !important; }

.b5-active .mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.b5-active .mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.b5-active .mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.b5-active .mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.b5-active .mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.b5-active .mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }

.b5-active .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.b5-active .my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.b5-active .my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.b5-active .my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.b5-active .my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.b5-active .my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

/*====== AUTO MARGIN ======*/
.b5-active .me-auto { margin-right: auto !important; }
.b5-active .ms-auto { margin-left: auto !important; }
.b5-active .mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.b5-active .my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.b5-active .m-auto {
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

/*====== VISIBILITY ======*/
.b5-active .visible { visibility: visible; }
.b5-active .invisible { visibility: hidden; }

/*====== IMAGES ======*/
.b5-active .img-fluid {
  max-width: 100%;
  height: auto;
}

/*====== OBJECT FIT ======*/
.b5-active .object-fit-cover { object-fit: cover !important; }
.b5-active .object-fit-fill { object-fit: fill !important; }
.b5-active .object-fit-contain { object-fit: contain !important; }
.b5-active .object-fit-none { object-fit: none !important; }
.b5-active .object-fit-scale-down { object-fit: scale-down !important; }

/*====== FLOAT ======*/
.b5-active .float-start { float: left !important; }
.b5-active .float-end { float: right !important; }
.b5-active .float-none { float: none !important; }

@media (min-width: 576px) {
  .b5-active .float-sm-start { float: left !important; }
  .b5-active .float-sm-end { float: right !important; }
  .b5-active .float-sm-none { float: none !important; }
}
@media (min-width: 768px) {
  .b5-active .float-md-start { float: left !important; }
  .b5-active .float-md-end { float: right !important; }
  .b5-active .float-md-none { float: none !important; }
}
@media (min-width: 992px) {
  .b5-active .float-lg-start { float: left !important; }
  .b5-active .float-lg-end { float: right !important; }
  .b5-active .float-lg-none { float: none !important; }
}
@media (min-width: 1200px) {
  .b5-active .float-xl-start { float: left !important; }
  .b5-active .float-xl-end { float: right !important; }
  .b5-active .float-xl-none { float: none !important; }
}
@media (min-width: 1400px) {
  .b5-active .float-xxl-start { float: left !important; }
  .b5-active .float-xxl-end { float: right !important; }
  .b5-active .float-xxl-none { float: none !important; }
}

/*====== TEXT SELECTION ======*/
.b5-active .user-select-all { user-select: all !important; }
.b5-active .user-select-auto { user-select: auto !important; }
.b5-active .user-select-none { user-select: none !important; }

/*====== POINTER EVENTS ======*/
.b5-active .pe-none { pointer-events: none !important; }
.b5-active .pe-auto { pointer-events: auto !important; }

/*====== OVERFLOW ======*/
.b5-active .overflow-auto { overflow: auto !important; }
.b5-active .overflow-hidden { overflow: hidden !important; }
.b5-active .overflow-visible { overflow: visible !important; }
.b5-active .overflow-scroll { overflow: scroll !important; }
.b5-active .overflow-x-scroll { overflow-x: scroll !important; }
.b5-active .overflow-y-scroll { overflow-y: scroll !important; }

/*====== DISPLAY NONE ======*/
.b5-active .d-none { display: none; }

@media (min-width: 576px) { .b5-active .d-sm-none { display: none; } }
@media (min-width: 768px) { .b5-active .d-md-none { display: none; } }
@media (min-width: 992px) { .b5-active .d-lg-none { display: none; } }
@media (min-width: 1200px) { .b5-active .d-xl-none { display: none; } }
@media (min-width: 1400px) { .b5-active .d-xxl-none { display: none; } }

/*====== MAX-WIDTH ======*/
.b5-active .mw-100 { max-width: 100%; }
.b5-active .mw-75 { max-width: 75%; }
.b5-active .mw-50 { max-width: 50%; }
.b5-active .mw-25 { max-width: 25%; }

/*====== MAX WIDTHS ======*/
@media (min-width: 576px) {
  .b5-active .mw-sm-100 { max-width: 100%; }
  .b5-active .mw-sm-75 { max-width: 75%; }
  .b5-active .mw-sm-50 { max-width: 50%; }
  .b5-active .mw-sm-25 { max-width: 25%; }
}

@media (min-width: 768px) {
  .b5-active .mw-md-100 { max-width: 100%; }
  .b5-active .mw-md-75 { max-width: 75%; }
  .b5-active .mw-md-50 { max-width: 50%; }
  .b5-active .mw-md-25 { max-width: 25%; }
}

@media (min-width: 992px) {
  .b5-active .mw-lg-100 { max-width: 100%; }
  .b5-active .mw-lg-75 { max-width: 75%; }
  .b5-active .mw-lg-50 { max-width: 50%; }
  .b5-active .mw-lg-25 { max-width: 25%; }
}

@media (min-width: 1200px) {
  .b5-active .mw-xl-100 { max-width: 100%; }
  .b5-active .mw-xl-75 { max-width: 75%; }
  .b5-active .mw-xl-50 { max-width: 50%; }
  .b5-active .mw-xl-25 { max-width: 25%; }
}

@media (min-width: 1400px) {
  .b5-active .mw-xxl-100 { max-width: 100%; }
  .b5-active .mw-xxl-75 { max-width: 75%; }
  .b5-active .mw-xxl-50 { max-width: 50%; }
  .b5-active .mw-xxl-25 { max-width: 25%; }
}

/*====== DISPLAY BLOCK ======*/
.b5-active .d-block { display: block; }
.b5-active .d-inline-block { display: inline-block; }
@media (min-width: 576px) { .b5-active .d-sm-block { display: block; } }
@media (min-width: 768px) { .b5-active .d-md-block { display: block; } }
@media (min-width: 992px) { .b5-active .d-lg-block { display: block; } }
@media (min-width: 1200px) { .b5-active .d-xl-block { display: block; } }
@media (min-width: 1400px) { .b5-active .d-xxl-block { display: block; } }

/*====== FLEX BEHAVIORS ======*/
.b5-active .d-flex { display: flex; }
.b5-active .d-inline-flex { display: inline-flex; }

@media (min-width: 576px) {
  .b5-active .d-sm-flex { display: flex; }
  .b5-active .d-sm-inline-flex { display: inline-flex; }
}

@media (min-width: 768px) {
  .b5-active .d-md-flex { display: flex; }
  .b5-active .d-md-inline-flex { display: inline-flex; }
}

@media (min-width: 992px) {
  .b5-active .d-lg-flex { display: flex; }
  .b5-active .d-lg-inline-flex { display: inline-flex; }
}

@media (min-width: 1200px) {
  .b5-active .d-xl-flex { display: flex; }
  .b5-active .d-xl-inline-flex { display: inline-flex; }
}

@media (min-width: 1400px) {
  .b5-active .d-xxl-flex { display: flex; }
  .b5-active .d-xxl-inline-flex { display: inline-flex; }
}

.b5-active .flex-grow-0 { flex-grow: 0; }
.b5-active .flex-grow-1 { flex-grow: 1; }

/*====== GRID DISPLAY ======*/
.b5-active .grid { display: grid; }

/*====== GRID COLUMNS (CSS Grid) ======*/
.b5-active .grid .col-span-1 { grid-column: span 1; }
.b5-active .grid .col-span-2 { grid-column: span 2; }
.b5-active .grid .col-span-3 { grid-column: span 3; }
.b5-active .grid .col-span-4 { grid-column: span 4; }
.b5-active .grid .col-span-5 { grid-column: span 5; }
.b5-active .grid .col-span-6 { grid-column: span 6; }
.b5-active .grid .col-span-7 { grid-column: span 7; }
.b5-active .grid .col-span-8 { grid-column: span 8; }
.b5-active .grid .col-span-9 { grid-column: span 9; }
.b5-active .grid .col-span-10 { grid-column: span 10; }
.b5-active .grid .col-span-11 { grid-column: span 11; }
.b5-active .grid .col-span-12 { grid-column: span 12; }
.b5-active .grid .col-auto { grid-column: auto; }

/*====== GRID ROWS (CSS Grid) ======*/
.b5-active .grid .row-span-1 { grid-row: span 1; }
.b5-active .grid .row-span-2 { grid-row: span 2; }
.b5-active .grid .row-span-3 { grid-row: span 3; }
.b5-active .grid .row-span-4 { grid-row: span 4; }
.b5-active .grid .row-span-5 { grid-row: span 5; }
.b5-active .grid .row-span-6 { grid-row: span 6; }
.b5-active .grid .row-span-7 { grid-row: span 7; }
.b5-active .grid .row-span-8 { grid-row: span 8; }
.b5-active .grid .row-span-9 { grid-row: span 9; }
.b5-active .grid .row-span-10 { grid-row: span 10; }
.b5-active .grid .row-span-11 { grid-row: span 11; }
.b5-active .grid .row-span-12 { grid-row: span 12; }
.b5-active .grid .row-span-auto { grid-row: auto; }

/*====== GRID TEMPLATE COLUMNS (CSS Grid) ======*/

/* Base Grid Columns */
.b5-active .grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}
.b5-active .grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.b5-active .grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.b5-active .grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.b5-active .grid-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}
.b5-active .grid-cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

/* Base Grid Rows */
.b5-active .grid-rows-1 {
  grid-template-rows: repeat(1, 1fr);
}
.b5-active .grid-rows-2 {
  grid-template-rows: repeat(2, 1fr);
}
.b5-active .grid-rows-3 {
  grid-template-rows: repeat(3, 1fr);
}
.b5-active .grid-rows-4 {
  grid-template-rows: repeat(4, 1fr);
}
.b5-active .grid-rows-5 {
  grid-template-rows: repeat(5, 1fr);
}
.b5-active .grid-rows-6 {
  grid-template-rows: repeat(6, 1fr);
}

/* Responsive Grid Columns */

/* Small (≥ 576px) */
@media (min-width: 576px) {
  .b5-active .grid-cols-sm-1 { grid-template-columns: repeat(1, 1fr); }
  .b5-active .grid-cols-sm-2 { grid-template-columns: repeat(2, 1fr); }
  .b5-active .grid-cols-sm-3 { grid-template-columns: repeat(3, 1fr); }
  .b5-active .grid-cols-sm-4 { grid-template-columns: repeat(4, 1fr); }
  .b5-active .grid-cols-sm-5 { grid-template-columns: repeat(5, 1fr); }
  .b5-active .grid-cols-sm-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Medium (≥ 768px) */
@media (min-width: 768px) {
  .b5-active .grid-cols-md-1 { grid-template-columns: repeat(1, 1fr); }
  .b5-active .grid-cols-md-2 { grid-template-columns: repeat(2, 1fr); }
  .b5-active .grid-cols-md-3 { grid-template-columns: repeat(3, 1fr); }
  .b5-active .grid-cols-md-4 { grid-template-columns: repeat(4, 1fr); }
  .b5-active .grid-cols-md-5 { grid-template-columns: repeat(5, 1fr); }
  .b5-active .grid-cols-md-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Large (≥ 992px) */
@media (min-width: 992px) {
  .b5-active .grid-cols-lg-1 { grid-template-columns: repeat(1, 1fr); }
  .b5-active .grid-cols-lg-2 { grid-template-columns: repeat(2, 1fr); }
  .b5-active .grid-cols-lg-3 { grid-template-columns: repeat(3, 1fr); }
  .b5-active .grid-cols-lg-4 { grid-template-columns: repeat(4, 1fr); }
  .b5-active .grid-cols-lg-5 { grid-template-columns: repeat(5, 1fr); }
  .b5-active .grid-cols-lg-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Extra Large (≥ 1200px) */
@media (min-width: 1200px) {
  .b5-active .grid-cols-xl-1 { grid-template-columns: repeat(1, 1fr); }
  .b5-active .grid-cols-xl-2 { grid-template-columns: repeat(2, 1fr); }
  .b5-active .grid-cols-xl-3 { grid-template-columns: repeat(3, 1fr); }
  .b5-active .grid-cols-xl-4 { grid-template-columns: repeat(4, 1fr); }
  .b5-active .grid-cols-xl-5 { grid-template-columns: repeat(5, 1fr); }
  .b5-active .grid-cols-xl-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Extra Extra Large (≥ 1400px) */
@media (min-width: 1400px) {
  .b5-active .grid-cols-xxl-1 { grid-template-columns: repeat(1, 1fr); }
  .b5-active .grid-cols-xxl-2 { grid-template-columns: repeat(2, 1fr); }
  .b5-active .grid-cols-xxl-3 { grid-template-columns: repeat(3, 1fr); }
  .b5-active .grid-cols-xxl-4 { grid-template-columns: repeat(4, 1fr); }
  .b5-active .grid-cols-xxl-5 { grid-template-columns: repeat(5, 1fr); }
  .b5-active .grid-cols-xxl-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Responsive Grid Rows */

/* Small (≥ 576px) */
@media (min-width: 576px) {
  .b5-active .grid-rows-sm-1 { grid-template-rows: repeat(1, 1fr); }
  .b5-active .grid-rows-sm-2 { grid-template-rows: repeat(2, 1fr); }
  .b5-active .grid-rows-sm-3 { grid-template-rows: repeat(3, 1fr); }
  .b5-active .grid-rows-sm-4 { grid-template-rows: repeat(4, 1fr); }
  .b5-active .grid-rows-sm-5 { grid-template-rows: repeat(5, 1fr); }
  .b5-active .grid-rows-sm-6 { grid-template-rows: repeat(6, 1fr); }
}

/* Medium (≥ 768px) */
@media (min-width: 768px) {
  .b5-active .grid-rows-md-1 { grid-template-rows: repeat(1, 1fr); }
  .b5-active .grid-rows-md-2 { grid-template-rows: repeat(2, 1fr); }
  .b5-active .grid-rows-md-3 { grid-template-rows: repeat(3, 1fr); }
  .b5-active .grid-rows-md-4 { grid-template-rows: repeat(4, 1fr); }
  .b5-active .grid-rows-md-5 { grid-template-rows: repeat(5, 1fr); }
  .b5-active .grid-rows-md-6 { grid-template-rows: repeat(6, 1fr); }
}

/* Large (≥ 992px) */
@media (min-width: 992px) {
  .b5-active .grid-rows-lg-1 { grid-template-rows: repeat(1, 1fr); }
  .b5-active .grid-rows-lg-2 { grid-template-rows: repeat(2, 1fr); }
  .b5-active .grid-rows-lg-3 { grid-template-rows: repeat(3, 1fr); }
  .b5-active .grid-rows-lg-4 { grid-template-rows: repeat(4, 1fr); }
  .b5-active .grid-rows-lg-5 { grid-template-rows: repeat(5, 1fr); }
  .b5-active .grid-rows-lg-6 { grid-template-rows: repeat(6, 1fr); }
}

/* Extra Large (≥ 1200px) */
@media (min-width: 1200px) {
  .b5-active .grid-rows-xl-1 { grid-template-rows: repeat(1, 1fr); }
  .b5-active .grid-rows-xl-2 { grid-template-rows: repeat(2, 1fr); }
  .b5-active .grid-rows-xl-3 { grid-template-rows: repeat(3, 1fr); }
  .b5-active .grid-rows-xl-4 { grid-template-rows: repeat(4, 1fr); }
  .b5-active .grid-rows-xl-5 { grid-template-rows: repeat(5, 1fr); }
  .b5-active .grid-rows-xl-6 { grid-template-rows: repeat(6, 1fr); }
}

/* Extra Extra Large (≥ 1400px) */
@media (min-width: 1400px) {
  .b5-active .grid-rows-xxl-1 { grid-template-rows: repeat(1, 1fr); }
  .b5-active .grid-rows-xxl-2 { grid-template-rows: repeat(2, 1fr); }
  .b5-active .grid-rows-xxl-3 { grid-template-rows: repeat(3, 1fr); }
  .b5-active .grid-rows-xxl-4 { grid-template-rows: repeat(4, 1fr); }
  .b5-active .grid-rows-xxl-5 { grid-template-rows: repeat(5, 1fr); }
  .b5-active .grid-rows-xxl-6 { grid-template-rows: repeat(6, 1fr); }
}


/*====== FLEX DIRECTION ======*/
.b5-active .flex-row { flex-direction: row !important; }
.b5-active .flex-row-reverse { flex-direction: row-reverse !important; }
.b5-active .flex-column { flex-direction: column !important; }
.b5-active .flex-column-reverse { flex-direction: column-reverse !important; }

@media (min-width: 576px) {
  .b5-active .flex-sm-row { flex-direction: row !important; }
  .b5-active .flex-sm-row-reverse { flex-direction: row-reverse !important; }
  .b5-active .flex-sm-column { flex-direction: column !important; }
  .b5-active .flex-sm-column-reverse { flex-direction: column-reverse !important; }
}

@media (min-width: 768px) {
  .b5-active .flex-md-row { flex-direction: row !important; }
  .b5-active .flex-md-row-reverse { flex-direction: row-reverse !important; }
  .b5-active .flex-md-column { flex-direction: column !important; }
  .b5-active .flex-md-column-reverse { flex-direction: column-reverse !important; }
}

@media (min-width: 992px) {
  .b5-active .flex-lg-row { flex-direction: row !important; }
  .b5-active .flex-lg-row-reverse { flex-direction: row-reverse !important; }
  .b5-active .flex-lg-column { flex-direction: column !important; }
  .b5-active .flex-lg-column-reverse { flex-direction: column-reverse !important; }
}

@media (min-width: 1200px) {
  .b5-active .flex-xl-row { flex-direction: row !important; }
  .b5-active .flex-xl-row-reverse { flex-direction: row-reverse !important; }
  .b5-active .flex-xl-column { flex-direction: column !important; }
  .b5-active .flex-xl-column-reverse { flex-direction: column-reverse !important; }
}

@media (min-width: 1400px) {
  .b5-active .flex-xxl-row { flex-direction: row !important; }
  .b5-active .flex-xxl-row-reverse { flex-direction: row-reverse !important; }
  .b5-active .flex-xxl-column { flex-direction: column !important; }
  .b5-active .flex-xxl-column-reverse { flex-direction: column-reverse !important; }
}

/*====== JUSTIFY CONTENT ======*/
.b5-active .justify-content-start { justify-content: flex-start !important; }
.b5-active .justify-content-end { justify-content: flex-end !important; }
.b5-active .justify-content-center { justify-content: center !important; }
.b5-active .justify-content-between { justify-content: space-between !important; }
.b5-active .justify-content-around { justify-content: space-around !important; }
.b5-active .justify-content-evenly { justify-content: space-evenly !important; }

@media (min-width: 576px) {
  .b5-active .justify-content-sm-start { justify-content: flex-start !important; }
  .b5-active .justify-content-sm-end { justify-content: flex-end !important; }
  .b5-active .justify-content-sm-center { justify-content: center !important; }
  .b5-active .justify-content-sm-between { justify-content: space-between !important; }
  .b5-active .justify-content-sm-around { justify-content: space-around !important; }
  .b5-active .justify-content-sm-evenly { justify-content: space-evenly !important; }
}

@media (min-width: 768px) {
  .b5-active .justify-content-md-start { justify-content: flex-start !important; }
  .b5-active .justify-content-md-end { justify-content: flex-end !important; }
  .b5-active .justify-content-md-center { justify-content: center !important; }
  .b5-active .justify-content-md-between { justify-content: space-between !important; }
  .b5-active .justify-content-md-around { justify-content: space-around !important; }
  .b5-active .justify-content-md-evenly { justify-content: space-evenly !important; }
}

@media (min-width: 992px) {
  .b5-active .justify-content-lg-start { justify-content: flex-start !important; }
  .b5-active .justify-content-lg-end { justify-content: flex-end !important; }
  .b5-active .justify-content-lg-center { justify-content: center !important; }
  .b5-active .justify-content-lg-between { justify-content: space-between !important; }
  .b5-active .justify-content-lg-around { justify-content: space-around !important; }
  .b5-active .justify-content-lg-evenly { justify-content: space-evenly !important; }
}

@media (min-width: 1200px) {
  .b5-active .justify-content-xl-start { justify-content: flex-start !important; }
  .b5-active .justify-content-xl-end { justify-content: flex-end !important; }
  .b5-active .justify-content-xl-center { justify-content: center !important; }
  .b5-active .justify-content-xl-between { justify-content: space-between !important; }
  .b5-active .justify-content-xl-around { justify-content: space-around !important; }
  .b5-active .justify-content-xl-evenly { justify-content: space-evenly !important; }
}

@media (min-width: 1400px) {
  .b5-active .justify-content-xxl-start { justify-content: flex-start !important; }
  .b5-active .justify-content-xxl-end { justify-content: flex-end !important; }
  .b5-active .justify-content-xxl-center { justify-content: center !important; }
  .b5-active .justify-content-xxl-between { justify-content: space-between !important; }
  .b5-active .justify-content-xxl-around { justify-content: space-around !important; }
  .b5-active .justify-content-xxl-evenly { justify-content: space-evenly !important; }
}

/*====== ALIGN ITEMS ======*/
.b5-active .align-items-start { align-items: flex-start !important; }
.b5-active .align-items-end { align-items: flex-end !important; }
.b5-active .align-items-center { align-items: center !important; }
.b5-active .align-items-baseline { align-items: baseline !important; }
.b5-active .align-items-stretch { align-items: stretch !important; }

@media (min-width: 576px) {
  .b5-active .align-items-sm-start { align-items: flex-start !important; }
  .b5-active .align-items-sm-end { align-items: flex-end !important; }
  .b5-active .align-items-sm-center { align-items: center !important; }
  .b5-active .align-items-sm-baseline { align-items: baseline !important; }
  .b5-active .align-items-sm-stretch { align-items: stretch !important; }
}

@media (min-width: 768px) {
  .b5-active .align-items-md-start { align-items: flex-start !important; }
  .b5-active .align-items-md-end { align-items: flex-end !important; }
  .b5-active .align-items-md-center { align-items: center !important; }
  .b5-active .align-items-md-baseline { align-items: baseline !important; }
  .b5-active .align-items-md-stretch { align-items: stretch !important; }
}

@media (min-width: 992px) {
  .b5-active .align-items-lg-start { align-items: flex-start !important; }
  .b5-active .align-items-lg-end { align-items: flex-end !important; }
  .b5-active .align-items-lg-center { align-items: center !important; }
  .b5-active .align-items-lg-baseline { align-items: baseline !important; }
  .b5-active .align-items-lg-stretch { align-items: stretch !important; }
}

@media (min-width: 1200px) {
  .b5-active .align-items-xl-start { align-items: flex-start !important; }
  .b5-active .align-items-xl-end { align-items: flex-end !important; }
  .b5-active .align-items-xl-center { align-items: center !important; }
  .b5-active .align-items-xl-baseline { align-items: baseline !important; }
  .b5-active .align-items-xl-stretch { align-items: stretch !important; }
}

@media (min-width: 1400px) {
  .b5-active .align-items-xxl-start { align-items: flex-start !important; }
  .b5-active .align-items-xxl-end { align-items: flex-end !important; }
  .b5-active .align-items-xxl-center { align-items: center !important; }
  .b5-active .align-items-xxl-baseline { align-items: baseline !important; }
  .b5-active .align-items-xxl-stretch { align-items: stretch !important; }
}

/*====== ALIGN SELF ======*/
.b5-active .align-self-start { align-self: flex-start !important; }
.b5-active .align-self-end { align-self: flex-end !important; }
.b5-active .align-self-center { align-self: center !important; }
.b5-active .align-self-baseline { align-self: baseline !important; }
.b5-active .align-self-stretch { align-self: stretch !important; }

@media (min-width: 576px) {
  .b5-active .align-self-sm-start { align-self: flex-start !important; }
  .b5-active .align-self-sm-end { align-self: flex-end !important; }
  .b5-active .align-self-sm-center { align-self: center !important; }
  .b5-active .align-self-sm-baseline { align-self: baseline !important; }
  .b5-active .align-self-sm-stretch { align-self: stretch !important; }
}

@media (min-width: 768px) {
  .b5-active .align-self-md-start { align-self: flex-start !important; }
  .b5-active .align-self-md-end { align-self: flex-end !important; }
  .b5-active .align-self-md-center { align-self: center !important; }
  .b5-active .align-self-md-baseline { align-self: baseline !important; }
  .b5-active .align-self-md-stretch { align-self: stretch !important; }
}

@media (min-width: 992px) {
  .b5-active .align-self-lg-start { align-self: flex-start !important; }
  .b5-active .align-self-lg-end { align-self: flex-end !important; }
  .b5-active .align-self-lg-center { align-self: center !important; }
  .b5-active .align-self-lg-baseline { align-self: baseline !important; }
  .b5-active .align-self-lg-stretch { align-self: stretch !important; }
}

@media (min-width: 1200px) {
  .b5-active .align-self-xl-start { align-self: flex-start !important; }
  .b5-active .align-self-xl-end { align-self: flex-end !important; }
  .b5-active .align-self-xl-center { align-self: center !important; }
  .b5-active .align-self-xl-baseline { align-self: baseline !important; }
  .b5-active .align-self-xl-stretch { align-self: stretch !important; }
}

@media (min-width: 1400px) {
  .b5-active .align-self-xxl-start { align-self: flex-start !important; }
  .b5-active .align-self-xxl-end { align-self: flex-end !important; }
  .b5-active .align-self-xxl-center { align-self: center !important; }
  .b5-active .align-self-xxl-baseline { align-self: baseline !important; }
  .b5-active .align-self-xxl-stretch { align-self: stretch !important; }
}

/*====== FILL ======*/
.b5-active .flex-fill { flex: 1 1 auto !important; }

@media (min-width: 576px) {
  .b5-active .flex-sm-fill { flex: 1 1 auto !important; }
}

@media (min-width: 768px) {
  .b5-active .flex-md-fill { flex: 1 1 auto !important; }
}

@media (min-width: 992px) {
  .b5-active .flex-lg-fill { flex: 1 1 auto !important; }
}

@media (min-width: 1200px) {
  .b5-active .flex-xl-fill { flex: 1 1 auto !important; }
}

@media (min-width: 1400px) {
  .b5-active .flex-xxl-fill { flex: 1 1 auto !important; }
}

/*====== GROW AND SHRINK ======*/
.b5-active .flex-grow-0 { flex-grow: 0 !important; }
.b5-active .flex-grow-1 { flex-grow: 1 !important; }
.b5-active .flex-shrink-0 { flex-shrink: 0 !important; }
.b5-active .flex-shrink-1 { flex-shrink: 1 !important; }

@media (min-width: 576px) {
  .b5-active .flex-sm-grow-0 { flex-grow: 0 !important; }
  .b5-active .flex-sm-grow-1 { flex-grow: 1 !important; }
  .b5-active .flex-sm-shrink-0 { flex-shrink: 0 !important; }
  .b5-active .flex-sm-shrink-1 { flex-shrink: 1 !important; }
}

@media (min-width: 768px) {
  .b5-active .flex-md-grow-0 { flex-grow: 0 !important; }
  .b5-active .flex-md-grow-1 { flex-grow: 1 !important; }
  .b5-active .flex-md-shrink-0 { flex-shrink: 0 !important; }
  .b5-active .flex-md-shrink-1 { flex-shrink: 1 !important; }
}

@media (min-width: 992px) {
  .b5-active .flex-lg-grow-0 { flex-grow: 0 !important; }
  .b5-active .flex-lg-grow-1 { flex-grow: 1 !important; }
  .b5-active .flex-lg-shrink-0 { flex-shrink: 0 !important; }
  .b5-active .flex-lg-shrink-1 { flex-shrink: 1 !important; }
}

@media (min-width: 1200px) {
  .b5-active .flex-xl-grow-0 { flex-grow: 0 !important; }
  .b5-active .flex-xl-grow-1 { flex-grow: 1 !important; }
  .b5-active .flex-xl-shrink-0 { flex-shrink: 0 !important; }
  .b5-active .flex-xl-shrink-1 { flex-shrink: 1 !important; }
}

@media (min-width: 1400px) {
  .b5-active .flex-xxl-grow-0 { flex-grow: 0 !important; }
  .b5-active .flex-xxl-grow-1 { flex-grow: 1 !important; }
  .b5-active .flex-xxl-shrink-0 { flex-shrink: 0 !important; }
  .b5-active .flex-xxl-shrink-1 { flex-shrink: 1 !important; }
}

/*====== WRAP ======*/
.b5-active .flex-nowrap { flex-wrap: nowrap !important; }
.b5-active .flex-wrap { flex-wrap: wrap !important; }
.b5-active .flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

@media (min-width: 576px) {
  .b5-active .flex-sm-nowrap { flex-wrap: nowrap !important; }
  .b5-active .flex-sm-wrap { flex-wrap: wrap !important; }
  .b5-active .flex-sm-wrap-reverse { flex-wrap: wrap-reverse !important; }
}

@media (min-width: 768px) {
  .b5-active .flex-md-nowrap { flex-wrap: nowrap !important; }
  .b5-active .flex-md-wrap { flex-wrap: wrap !important; }
  .b5-active .flex-md-wrap-reverse { flex-wrap: wrap-reverse !important; }
}

@media (min-width: 992px) {
  .b5-active .flex-lg-nowrap { flex-wrap: nowrap !important; }
  .b5-active .flex-lg-wrap { flex-wrap: wrap !important; }
  .b5-active .flex-lg-wrap-reverse { flex-wrap: wrap-reverse !important; }
}

@media (min-width: 1200px) {
  .b5-active .flex-xl-nowrap { flex-wrap: nowrap !important; }
  .b5-active .flex-xl-wrap { flex-wrap: wrap !important; }
  .b5-active .flex-xl-wrap-reverse { flex-wrap: wrap-reverse !important; }
}

@media (min-width: 1400px) {
  .b5-active .flex-xxl-nowrap { flex-wrap: nowrap !important; }
  .b5-active .flex-xxl-wrap { flex-wrap: wrap !important; }
  .b5-active .flex-xxl-wrap-reverse { flex-wrap: wrap-reverse !important; }
}

/*====== GUTTERS/GAP FOR FLEXBOX OR GRID ======*/
.b5-active .g-0 { gap: 0px; }
.b5-active .g-1 { gap: 0.25rem; }
.b5-active .g-2 { gap: 0.5rem; }
.b5-active .g-3 { gap: 1rem; }
.b5-active .g-4 { gap: 1.5rem; }
.b5-active .g-5 { gap: 3rem; }
.b5-active .gy-0 { row-gap: 0px; }
.b5-active .gy-1 { row-gap: 0.25rem; }
.b5-active .gy-2 { row-gap: 0.5rem; }
.b5-active .gy-3 { row-gap: 1rem; }
.b5-active .gy-4 { row-gap: 1.5rem; }
.b5-active .gy-5 { row-gap: 3rem; }
.b5-active .gx-0 { column-gap: 0px; }
.b5-active .gx-1 { column-gap: 0.25rem; }
.b5-active .gx-2 { column-gap: 0.5rem; }
.b5-active .gx-3 { column-gap: 1rem; }
.b5-active .gx-4 { column-gap: 1.5rem; }
.b5-active .gx-5 { column-gap: 3rem; }

/*====== ORDER ======*/
.b5-active .order-0 { order: 0 !important; }
.b5-active .order-1 { order: 1 !important; }
.b5-active .order-2 { order: 2 !important; }
.b5-active .order-3 { order: 3 !important; }
.b5-active .order-4 { order: 4 !important; }
.b5-active .order-5 { order: 5 !important; }

.b5-active .order-first { order: -1 !important; }
.b5-active .order-last { order: 9999 !important; }

@media (min-width: 576px) {
  .b5-active .order-sm-0 { order: 0 !important; }
  .b5-active .order-sm-1 { order: 1 !important; }
  .b5-active .order-sm-2 { order: 2 !important; }
  .b5-active .order-sm-3 { order: 3 !important; }
  .b5-active .order-sm-4 { order: 4 !important; }
  .b5-active .order-sm-5 { order: 5 !important; }
  .b5-active .order-sm-first { order: -1 !important; }
  .b5-active .order-sm-last { order: 9999 !important; }
}

@media (min-width: 768px) {
  .b5-active .order-md-0 { order: 0 !important; }
  .b5-active .order-md-1 { order: 1 !important; }
  .b5-active .order-md-2 { order: 2 !important; }
  .b5-active .order-md-3 { order: 3 !important; }
  .b5-active .order-md-4 { order: 4 !important; }
  .b5-active .order-md-5 { order: 5 !important; }
  .b5-active .order-md-first { order: -1 !important; }
  .b5-active .order-md-last { order: 9999 !important; }
}

@media (min-width: 992px) {
  .b5-active .order-lg-0 { order: 0 !important; }
  .b5-active .order-lg-1 { order: 1 !important; }
  .b5-active .order-lg-2 { order: 2 !important; }
  .b5-active .order-lg-3 { order: 3 !important; }
  .b5-active .order-lg-4 { order: 4 !important; }
  .b5-active .order-lg-5 { order: 5 !important; }
  .b5-active .order-lg-first { order: -1 !important; }
  .b5-active .order-lg-last { order: 9999 !important; }
}

@media (min-width: 1200px) {
  .b5-active .order-xl-0 { order: 0 !important; }
  .b5-active .order-xl-1 { order: 1 !important; }
  .b5-active .order-xl-2 { order: 2 !important; }
  .b5-active .order-xl-3 { order: 3 !important; }
  .b5-active .order-xl-4 { order: 4 !important; }
  .b5-active .order-xl-5 { order: 5 !important; }
  .b5-active .order-xl-first { order: -1 !important; }
  .b5-active .order-xl-last { order: 9999 !important; }
}

@media (min-width: 1400px) {
  .b5-active .order-xxl-0 { order: 0 !important; }
  .b5-active .order-xxl-1 { order: 1 !important; }
  .b5-active .order-xxl-2 { order: 2 !important; }
  .b5-active .order-xxl-3 { order: 3 !important; }
  .b5-active .order-xxl-4 { order: 4 !important; }
  .b5-active .order-xxl-5 { order: 5 !important; }
  .b5-active .order-xxl-first { order: -1 !important; }
  .b5-active .order-xxl-last { order: 9999 !important; }
}

/*====== ALIGN CONTENT ======*/
.b5-active .align-content-start { align-content: flex-start !important; }
.b5-active .align-content-end { align-content: flex-end !important; }
.b5-active .align-content-center { align-content: center !important; }
.b5-active .align-content-around { align-content: space-around !important; }
.b5-active .align-content-stretch { align-content: stretch !important; }

@media (min-width: 576px) {
  .b5-active .align-content-sm-start { align-content: flex-start !important; }
  .b5-active .align-content-sm-end { align-content: flex-end !important; }
  .b5-active .align-content-sm-center { align-content: center !important; }
  .b5-active .align-content-sm-around { align-content: space-around !important; }
  .b5-active .align-content-sm-stretch { align-content: stretch !important; }
}

@media (min-width: 768px) {
  .b5-active .align-content-md-start { align-content: flex-start !important; }
  .b5-active .align-content-md-end { align-content: flex-end !important; }
  .b5-active .align-content-md-center { align-content: center !important; }
  .b5-active .align-content-md-around { align-content: space-around !important; }
  .b5-active .align-content-md-stretch { align-content: stretch !important; }
}

@media (min-width: 992px) {
  .b5-active .align-content-lg-start { align-content: flex-start !important; }
  .b5-active .align-content-lg-end { align-content: flex-end !important; }
  .b5-active .align-content-lg-center { align-content: center !important; }
  .b5-active .align-content-lg-around { align-content: space-around !important; }
  .b5-active .align-content-lg-stretch { align-content: stretch !important; }
}

@media (min-width: 1200px) {
  .b5-active .align-content-xl-start { align-content: flex-start !important; }
  .b5-active .align-content-xl-end { align-content: flex-end !important; }
  .b5-active .align-content-xl-center { align-content: center !important; }
  .b5-active .align-content-xl-around { align-content: space-around !important; }
  .b5-active .align-content-xl-stretch { align-content: stretch !important; }
}

@media (min-width: 1400px) {
  .b5-active .align-content-xxl-start { align-content: flex-start !important; }
  .b5-active .align-content-xxl-end { align-content: flex-end !important; }
  .b5-active .align-content-xxl-center { align-content: center !important; }
  .b5-active .align-content-xxl-around { align-content: space-around !important; }
  .b5-active .align-content-xxl-stretch { align-content: stretch !important; }
}

/*====== FLEX WRAP ======*/
.b5-active .flex-wrap { flex-wrap: wrap; }
.b5-active .flex-nowrap { flex-wrap: nowrap; }
.b5-active .flex-wrap-reverse { flex-wrap: wrap-reverse; }

/*====== GAP ======*/
.b5-active .gap-0 { gap: 0 !important; }
.b5-active .gap-1 { gap: 0.25rem !important; }
.b5-active .gap-2 { gap: 0.5rem !important; }
.b5-active .gap-3 { gap: 1rem !important; }
.b5-active .gap-4 { gap: 1.5rem !important; }
.b5-active .gap-5 { gap: 3rem !important; }

.b5-active .gap-sm-0 { gap: 0 !important; }
.b5-active .gap-sm-1 { gap: 0.25rem !important; }
.b5-active .gap-sm-2 { gap: 0.5rem !important; }
.b5-active .gap-sm-3 { gap: 1rem !important; }
.b5-active .gap-sm-4 { gap: 1.5rem !important; }
.b5-active .gap-sm-5 { gap: 3rem !important; }

.b5-active .gap-md-0 { gap: 0 !important; }
.b5-active .gap-md-1 { gap: 0.25rem !important; }
.b5-active .gap-md-2 { gap: 0.5rem !important; }
.b5-active .gap-md-3 { gap: 1rem !important; }
.b5-active .gap-md-4 { gap: 1.5rem !important; }
.b5-active .gap-md-5 { gap: 3rem !important; }

.b5-active .gap-lg-0 { gap: 0 !important; }
.b5-active .gap-lg-1 { gap: 0.25rem !important; }
.b5-active .gap-lg-2 { gap: 0.5rem !important; }
.b5-active .gap-lg-3 { gap: 1rem !important; }
.b5-active .gap-lg-4 { gap: 1.5rem !important; }
.b5-active .gap-lg-5 { gap: 3rem !important; }

.b5-active .gap-xl-0 { gap: 0 !important; }
.b5-active .gap-xl-1 { gap: 0.25rem !important; }
.b5-active .gap-xl-2 { gap: 0.5rem !important; }
.b5-active .gap-xl-3 { gap: 1rem !important; }
.b5-active .gap-xl-4 { gap: 1.5rem !important; }
.b5-active .gap-xl-5 { gap: 3rem !important; }

.b5-active .gap-xxl-0 { gap: 0 !important; }
.b5-active .gap-xxl-1 { gap: 0.25rem !important; }
.b5-active .gap-xxl-2 { gap: 0.5rem !important; }
.b5-active .gap-xxl-3 { gap: 1rem !important; }
.b5-active .gap-xxl-4 { gap: 1.5rem !important; }
.b5-active .gap-xxl-5 { gap: 3rem !important; }

/*====== SIZING - WIDTH ======*/
.b5-active .w-25 { width: 25% !important; }
.b5-active .w-50 { width: 50% !important; }
.b5-active .w-75 { width: 75% !important; }
.b5-active .w-100 { width: 100% !important; }
.b5-active .w-auto { width: auto !important; }
.b5-active .mw-100 { max-width: 100%; }

/*====== SIZING - HEIGHT ======*/
.b5-active .h-25 { height: 25% !important; }
.b5-active .h-50 { height: 50% !important; }
.b5-active .h-75 { height: 75% !important; }
.b5-active .h-100 { height: 100% !important; }
.b5-active .h-auto { height: auto !important; }

/*====== SIZING - MAX WIDTH ======*/
.b5-active .mw-100 { max-width: 100%; }
.b5-active .mw-auto { max-width: auto; }

/*====== SIZING - MAX HEIGHT ======*/
.b5-active .mh-100 { max-height: 100% !important; }
.b5-active .mh-auto { max-height: auto !important; }

/*====== CONTAINERS ======*/
.b5-active .container,
.b5-active .container-sm,
.b5-active .container-md,
.b5-active .container-lg,
.b5-active .container-xl,
.b5-active .container-xxl,
.b5-active .container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
}

@media (min-width: 576px) { .b5-active .container-sm { max-width: 540px; } }
@media (min-width: 768px) { .b5-active .container-md { max-width: 720px; } }
@media (min-width: 992px) { .b5-active .container-lg { max-width: 960px; } }
@media (min-width: 1200px) { .b5-active .container-xl { max-width: 1140px; } }
@media (min-width: 1400px) { .b5-active .container-xxl { max-width: 1320px; } }

/*====== ROWS ======*/
.b5-active .row {
	display: flex;
	flex-wrap: wrap;
	margin-right: calc(var(--bs-gutter-x, 0.75rem) / -2);
	margin-left: calc(var(--bs-gutter-x, 0.75rem) / -2);
}

/*====== GRID/COLUMNS ======*/
.b5-active .col {
	flex: 1 0 0%; /* Grow to fill available space */
	padding-right: calc(var(--bs-gutter-x, 0.75rem) / 2);
	padding-left: calc(var(--bs-gutter-x, 0.75rem) / 2);
}

.b5-active .col-1 { flex: 0 0 8.33333%; }
.b5-active .col-2 { flex: 0 0 16.66667%; }
.b5-active .col-3 { flex: 0 0 25%; }
.b5-active .col-4 { flex: 0 0 33.33333%; }
.b5-active .col-5 { flex: 0 0 41.66667%; }
.b5-active .col-6 { flex: 0 0 50%; }
.b5-active .col-7 { flex: 0 0 58.33333%; }
.b5-active .col-8 { flex: 0 0 66.66667%; }
.b5-active .col-9 { flex: 0 0 75%; }
.b5-active .col-10 { flex: 0 0 83.33333%; }
.b5-active .col-11 { flex: 0 0 91.66667%; }
.b5-active .col-12 { flex: 0 0 100%; }

@media (min-width: 576px) {
  .b5-active .col-sm-1 { flex: 0 0 8.33333%; }
  .b5-active .col-sm-2 { flex: 0 0 16.66667%; }
  .b5-active .col-sm-3 { flex: 0 0 25%; }
  .b5-active .col-sm-4 { flex: 0 0 33.33333%; }
  .b5-active .col-sm-5 { flex: 0 0 41.66667%; }
  .b5-active .col-sm-6 { flex: 0 0 50%; }
  .b5-active .col-sm-7 { flex: 0 0 58.33333%; }
  .b5-active .col-sm-8 { flex: 0 0 66.66667%; }
  .b5-active .col-sm-9 { flex: 0 0 75%; }
  .b5-active .col-sm-10 { flex: 0 0 83.33333%; }
  .b5-active .col-sm-11 { flex: 0 0 91.66667%; }
  .b5-active .col-sm-12 { flex: 0 0 100%; }
}

@media (min-width: 768px) {
  .b5-active .col-md-1 { flex: 0 0 8.33333%; }
  .b5-active .col-md-2 { flex: 0 0 16.66667%; }
  .b5-active .col-md-3 { flex: 0 0 25%; }
  .b5-active .col-md-4 { flex: 0 0 33.33333%; }
  .b5-active .col-md-5 { flex: 0 0 41.66667%; }
  .b5-active .col-md-6 { flex: 0 0 50%; }
  .b5-active .col-md-7 { flex: 0 0 58.33333%; }
  .b5-active .col-md-8 { flex: 0 0 66.66667%; }
  .b5-active .col-md-9 { flex: 0 0 75%; }
  .b5-active .col-md-10 { flex: 0 0 83.33333%; }
  .b5-active .col-md-11 { flex: 0 0 91.66667%; }
  .b5-active .col-md-12 { flex: 0 0 100%; }
}

@media (min-width: 992px) {
  .b5-active .col-lg-1 { flex: 0 0 8.33333%; }
  .b5-active .col-lg-2 { flex: 0 0 16.66667%; }
  .b5-active .col-lg-3 { flex: 0 0 25%; }
  .b5-active .col-lg-4 { flex: 0 0 33.33333%; }
  .b5-active .col-lg-5 { flex: 0 0 41.66667%; }
  .b5-active .col-lg-6 { flex: 0 0 50%; }
  .b5-active .col-lg-7 { flex: 0 0 58.33333%; }
  .b5-active .col-lg-8 { flex: 0 0 66.66667%; }
  .b5-active .col-lg-9 { flex: 0 0 75%; }
  .b5-active .col-lg-10 { flex: 0 0 83.33333%; }
  .b5-active .col-lg-11 { flex: 0 0 91.66667%; }
  .b5-active .col-lg-12 { flex: 0 0 100%; }
}

@media (min-width: 1200px) {
  .b5-active .col-xl-1 { flex: 0 0 8.33333%; }
  .b5-active .col-xl-2 { flex: 0 0 16.66667%; }
  .b5-active .col-xl-3 { flex: 0 0 25%; }
  .b5-active .col-xl-4 { flex: 0 0 33.33333%; }
  .b5-active .col-xl-5 { flex: 0 0 41.66667%; }
  .b5-active .col-xl-6 { flex: 0 0 50%; }
  .b5-active .col-xl-7 { flex: 0 0 58.33333%; }
  .b5-active .col-xl-8 { flex: 0 0 66.66667%; }
  .b5-active .col-xl-9 { flex: 0 0 75%; }
  .b5-active .col-xl-10 { flex: 0 0 83.33333%; }
  .b5-active .col-xl-11 { flex: 0 0 91.66667%; }
  .b5-active .col-xl-12 { flex: 0 0 100%; }
}

@media (min-width: 1400px) {
  .b5-active .col-xxl-1 { flex: 0 0 8.33333%; }
  .b5-active .col-xxl-2 { flex: 0 0 16.66667%; }
  .b5-active .col-xxl-3 { flex: 0 0 25%; }
  .b5-active .col-xxl-4 { flex: 0 0 33.33333%; }
  .b5-active .col-xxl-5 { flex: 0 0 41.66667%; }
  .b5-active .col-xxl-6 { flex: 0 0 50%; }
  .b5-active .col-xxl-7 { flex: 0 0 58.33333%; }
  .b5-active .col-xxl-8 { flex: 0 0 66.66667%; }
  .b5-active .col-xxl-9 { flex: 0 0 75%; }
  .b5-active .col-xxl-10 { flex: 0 0 83.33333%; }
  .b5-active .col-xxl-11 { flex: 0 0 91.66667%; }
  .b5-active .col-xxl-12 { flex: 0 0 100%; }
}

/*====== GRID ROWS ======*/
.b5-active .row-cols-1 { --bs-columns: 1; }
.b5-active .row-cols-2 { --bs-columns: 2; }
.b5-active .row-cols-3 { --bs-columns: 3; }
.b5-active .row-cols-4 { --bs-columns: 4; }
.b5-active .row-cols-5 { --bs-columns: 5; }
.b5-active .row-cols-6 { --bs-columns: 6; }
.b5-active .row-cols-auto { --bs-columns: auto; }

@media (min-width: 576px) {
  .b5-active .row-cols-sm-1 { --bs-columns: 1; }
  .b5-active .row-cols-sm-2 { --bs-columns: 2; }
  .b5-active .row-cols-sm-3 { --bs-columns: 3; }
  .b5-active .row-cols-sm-4 { --bs-columns: 4; }
  .b5-active .row-cols-sm-5 { --bs-columns: 5; }
  .b5-active .row-cols-sm-6 { --bs-columns: 6; }
  .b5-active .row-cols-sm-auto { --bs-columns: auto; }
}

@media (min-width: 768px) {
  .b5-active .row-cols-md-1 { --bs-columns: 1; }
  .b5-active .row-cols-md-2 { --bs-columns: 2; }
  .b5-active .row-cols-md-3 { --bs-columns: 3; }
  .b5-active .row-cols-md-4 { --bs-columns: 4; }
  .b5-active .row-cols-md-5 { --bs-columns: 5; }
  .b5-active .row-cols-md-6 { --bs-columns: 6; }
  .b5-active .row-cols-md-auto { --bs-columns: auto; }
}

@media (min-width: 992px) {
  .b5-active .row-cols-lg-1 { --bs-columns: 1; }
  .b5-active .row-cols-lg-2 { --bs-columns: 2; }
  .b5-active .row-cols-lg-3 { --bs-columns: 3; }
  .b5-active .row-cols-lg-4 { --bs-columns: 4; }
  .b5-active .row-cols-lg-5 { --bs-columns: 5; }
  .b5-active .row-cols-lg-6 { --bs-columns: 6; }
  .b5-active .row-cols-lg-auto { --bs-columns: auto; }
}

@media (min-width: 1200px) {
  .b5-active .row-cols-xl-1 { --bs-columns: 1; }
  .b5-active .row-cols-xl-2 { --bs-columns: 2; }
  .b5-active .row-cols-xl-3 { --bs-columns: 3; }
  .b5-active .row-cols-xl-4 { --bs-columns: 4; }
  .b5-active .row-cols-xl-5 { --bs-columns: 5; }
  .b5-active .row-cols-xl-6 { --bs-columns: 6; }
  .b5-active .row-cols-xl-auto { --bs-columns: auto; }
}

@media (min-width: 1400px) {
  .b5-active .row-cols-xxl-1 { --bs-columns: 1; }
  .b5-active .row-cols-xxl-2 { --bs-columns: 2; }
  .b5-active .row-cols-xxl-3 { --bs-columns: 3; }
  .b5-active .row-cols-xxl-4 { --bs-columns: 4; }
  .b5-active .row-cols-xxl-5 { --bs-columns: 5; }
  .b5-active .row-cols-xxl-6 { --bs-columns: 6; }
  .b5-active .row-cols-xxl-auto { --bs-columns: auto; }
}