:root {
  --bs-l-gold: #EFAC2D;
  --bs-l-hyperlink: #FC7031;
  --bs-l-light-gray: #C5C2C2;
  --bs-l-yellow: #FFE500;
  --bs-l-gray: #666;
  --bs-l-navy: #0300A1;
  --bs-l-sky: #00D1FF;
  --bs-l-dark-blue: #325A85;
  --bs-l-brown: #413624;
  --bs-l-dark-night: #262F3D;
  --bs-l-teal: #263D3D;
  --bs-l-cyan: #B9E9F3;
  --bs-l-pink: #EC266F;
  --bs-l-dark-aqua: #31596B;
  --bs-l-cyan-subtle: #E1F5F4;
  --bs-l-orange-subtle: #FFE7C2;
  --bs-l-yellow-subtle: #FCEFAD;
  --bs-l-gold-rgb: 239, 172, 45;
  --bs-l-hyperlink-rgb: 252, 112, 49;
  --bs-l-light-gray-rgb: 197, 194, 194;
  --bs-l-yellow-rgb: 255, 229, 0;
  --bs-l-gray-rgb: 102, 102, 102;
  --bs-l-navy-rgb: 3, 0, 161;
  --bs-l-sky-rgb: 0, 209, 255;
  --bs-l-dark-blue-rgb: 50, 90, 133;
  --bs-l-brown-rgb: 65, 54, 36;
  --bs-l-dark-night-rgb: 38, 47, 61;
  --bs-l-teal-rgb: 38, 47, 61;
  --bs-l-cyan-rgb: 185, 233, 243;
  --bs-l-pink-rgb: 236, 38, 111;
  --bs-l-dark-aqua-rgb: 49, 89, 107;
  --bs-l-cyan-subtle-rgb: 225, 245, 244;
  --bs-l-orange-subtle-rgb: 255, 231, 194;
  --bs-l-yellow-subtle-rgb: 252, 239, 173;
}


.text-l-gold {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-l-gold-rgb), var(--bs-text-opacity)) !important;
}

.text-l-hyperlink {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-l-hyperlink-rgb), var(--bs-text-opacity)) !important;
}

.text-l-light-gray {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-l-light-gray-rgb), var(--bs-text-opacity)) !important;
}

.text-l-yellow {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-l-yellow-rgb), var(--bs-text-opacity)) !important;
}

.text-l-gray {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-l-gray-rgb), var(--bs-text-opacity)) !important;
}

.text-l-navy {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-l-navy-rgb), var(--bs-text-opacity)) !important;
}

.text-l-sky {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-l-sky-rgb), var(--bs-text-opacity)) !important;
}

.text-l-dark-blue {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-l-dark-blue-rgb), var(--bs-text-opacity)) !important;
}

.text-l-brown {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-l-brown-rgb), var(--bs-text-opacity)) !important;
}

.text-l-dark-night {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-l-dark-night-rgb), var(--bs-text-opacity)) !important;
}

.text-l-teal {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-l-teal-rgb), var(--bs-text-opacity)) !important;
}

.text-l-cyan {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-l-cyan-rgb), var(--bs-text-opacity)) !important;
}

.text-l-pink {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-l-pink-rgb), var(--bs-text-opacity)) !important;
}

.text-l-dark-aqua {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-l-dark-aqua-rgb), var(--bs-text-opacity)) !important;
}

.text-l-cyan-subtle {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-l-cyan-subtle-rgb), var(--bs-text-opacity)) !important;
}

.text-l-orange-subtle {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-l-orange-subtle-rgb), var(--bs-text-opacity)) !important;
}

.text-l-yellow-subtle {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-l-yellow-subtle-rgb), var(--bs-text-opacity)) !important;
}

.text-bg-l-gold {
  color: #000 !important;
  background-color: RGBA(var(--bs-l-gold-rgb), var(--bs-bg-opacity, 1)) !important;
}



.bg-l-gold {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-l-gold-rgb), var(--bs-bg-opacity)) !important;
}

.bg-l-hyperlink {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-l-hyperlink-rgb), var(--bs-bg-opacity)) !important;
}

.bg-l-light-gray {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-l-light-gray-rgb), var(--bs-bg-opacity)) !important;
}

.bg-l-yellow {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-l-yellow-rgb), var(--bs-bg-opacity)) !important;
}

.bg-l-gray {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-l-gray-rgb), var(--bs-bg-opacity)) !important;
}

.bg-l-navy {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-l-navy-rgb), var(--bs-bg-opacity)) !important;
}

.bg-l-sky {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-l-sky-rgb), var(--bs-bg-opacity)) !important;
}

.bg-l-dark-blue {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-l-dark-blue-rgb), var(--bs-bg-opacity)) !important;
}

.bg-l-brown {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-l-brown-rgb), var(--bs-bg-opacity)) !important;
}

.bg-l-dark-night {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-l-dark-night-rgb), var(--bs-bg-opacity)) !important;
}

.bg-l-dark-gold {
  background-color: RGBA(65,54,36,1) !important;
}


.bg-l-teal {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-l-teal-rgb), var(--bs-bg-opacity)) !important;
}

.bg-l-cyan {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-l-cyan-rgb), var(--bs-bg-opacity)) !important;
}

.bg-l-pink {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-l-pink-rgb), var(--bs-bg-opacity)) !important;
}

.bg-l-dark-aqua {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-l-dark-aqua-rgb), var(--bs-bg-opacity)) !important;
}

.bg-l-cyan-subtle {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-l-cyan-subtle-rgb), var(--bs-bg-opacity)) !important;
}

.bg-l-orange-subtle {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-l-orange-subtle-rgb), var(--bs-bg-opacity)) !important;
}

.bg-l-yellow-subtle {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-l-yellow-subtle-rgb), var(--bs-bg-opacity)) !important;
}

.text-bg-l-hyperlink {
  color: #000 !important;
  background-color: RGBA(var(--bs-l-hyperlink-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-l-light-gray {
  color: #000 !important;
  background-color: RGBA(var(--bs-l-light-gray-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-l-yellow {
  color: #000 !important;
  background-color: RGBA(var(--bs-l-yellow-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-l-gray {
  color: #fff !important;
  background-color: RGBA(var(--bs-l-gray-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-l-navy {
  color: #fff !important;
  background-color: RGBA(var(--bs-l-navy-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-l-sky {
  color: #000 !important;
  background-color: RGBA(var(--bs-l-sky-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-l-dark-blue {
  color: #fff !important;
  background-color: RGBA(var(--bs-l-dark-blue-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-l-brown {
  color: #fff !important;
  background-color: RGBA(var(--bs-l-brown-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-l-dark-night {
  color: #fff !important;
  background-color: RGBA(var(--bs-l-dark-night-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-l-teal {
  color: #fff !important;
  background-color: RGBA(var(--bs-l-teal-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-l-cyan {
  color: #000 !important;
  background-color: RGBA(var(--bs-l-cyan-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-l-pink {
  color: #000 !important;
  background-color: RGBA(var(--bs-l-pink-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-l-dark-aqua {
  color: #fff !important;
  background-color: RGBA(var(--bs-l-dark-aqua-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-l-cyan-subtle {
  color: #000 !important;
  background-color: RGBA(var(--bs-l-cyan-subtle-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-l-orange-subtle {
  color: #000 !important;
  background-color: RGBA(var(--bs-l-orange-subtle-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-l-yellow-subtle {
  color: #000 !important;
  background-color: RGBA(var(--bs-l-yellow-subtle-rgb), var(--bs-bg-opacity, 1)) !important;
}



.border-l-gold {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-l-gold-rgb), var(--bs-border-opacity)) !important;
}

.border-l-hyperlink {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-l-hyperlink-rgb), var(--bs-border-opacity)) !important;
}

.border-l-light-gray {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-l-light-gray-rgb), var(--bs-border-opacity)) !important;
}

.border-l-yellow {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-l-yellow-rgb), var(--bs-border-opacity)) !important;
}

.border-l-gray {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-l-gray-rgb), var(--bs-border-opacity)) !important;
}

.border-l-navy {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-l-navy-rgb), var(--bs-border-opacity)) !important;
}

.border-l-sky {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-l-sky-rgb), var(--bs-border-opacity)) !important;
}

.border-l-dark-blue {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-l-dark-blue-rgb), var(--bs-border-opacity)) !important;
}

.border-l-brown {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-l-brown-rgb), var(--bs-border-opacity)) !important;
}

.border-l-dark-night {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-l-dark-night-rgb), var(--bs-border-opacity)) !important;
}

.border-l-teal {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-l-teal-rgb), var(--bs-border-opacity)) !important;
}

.border-l-cyan {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-l-cyan-rgb), var(--bs-border-opacity)) !important;
}

.border-l-pink {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-l-pink-rgb), var(--bs-border-opacity)) !important;
}

.border-l-dark-aqua {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-l-dark-aqua-rgb), var(--bs-border-opacity)) !important;
}

.border-l-cyan-subtle {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-l-cyan-subtle-rgb), var(--bs-border-opacity)) !important;
}

.border-l-orange-subtle {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-l-orange-subtle-rgb), var(--bs-border-opacity)) !important;
}

.border-l-yellow-subtle {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-l-yellow-subtle-rgb), var(--bs-border-opacity)) !important;
}


.btn-l-gold {
  --bs-btn-color: #000;
  --bs-btn-bg: #EFAC2D;
  --bs-btn-border-color: #EFAC2D;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f1b84d;
  --bs-btn-hover-border-color: #f1b442;
  --bs-btn-focus-shadow-rgb: 203, 146, 38;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f2bd57;
  --bs-btn-active-border-color: #f1b442;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #EFAC2D;
  --bs-btn-disabled-border-color: #EFAC2D;
}

.btn-l-hyperlink {
  --bs-btn-color: #000;
  --bs-btn-bg: #FC7031;
  --bs-btn-border-color: #FC7031;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #fc8550;
  --bs-btn-hover-border-color: #fc7e46;
  --bs-btn-focus-shadow-rgb: 214, 95, 42;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #fd8d5a;
  --bs-btn-active-border-color: #fc7e46;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #FC7031;
  --bs-btn-disabled-border-color: #FC7031;
}

.btn-l-light-gray {
  --bs-btn-color: #000;
  --bs-btn-bg: #C5C2C2;
  --bs-btn-border-color: #C5C2C2;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #cecbcb;
  --bs-btn-hover-border-color: #cbc8c8;
  --bs-btn-focus-shadow-rgb: 167, 165, 165;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #d1cece;
  --bs-btn-active-border-color: #cbc8c8;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #C5C2C2;
  --bs-btn-disabled-border-color: #C5C2C2;
}

.btn-l-yellow {
  --bs-btn-color: #000;
  --bs-btn-bg: #FFE500;
  --bs-btn-border-color: #FFE500;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffe926;
  --bs-btn-hover-border-color: #ffe81a;
  --bs-btn-focus-shadow-rgb: 217, 195, 0;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ffea33;
  --bs-btn-active-border-color: #ffe81a;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #FFE500;
  --bs-btn-disabled-border-color: #FFE500;
}

.btn-l-gray {
  --bs-btn-color: #fff;
  --bs-btn-bg: #666;
  --bs-btn-border-color: #666;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #575757;
  --bs-btn-hover-border-color: #525252;
  --bs-btn-focus-shadow-rgb: 125, 125, 125;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #525252;
  --bs-btn-active-border-color: #4d4d4d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #666;
  --bs-btn-disabled-border-color: #666;
}

.btn-l-navy {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0300A1;
  --bs-btn-border-color: #0300A1;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #030089;
  --bs-btn-hover-border-color: #020081;
  --bs-btn-focus-shadow-rgb: 41, 38, 175;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #020081;
  --bs-btn-active-border-color: #020079;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0300A1;
  --bs-btn-disabled-border-color: #0300A1;
}

.btn-l-sky {
  --bs-btn-color: #000;
  --bs-btn-bg: #00D1FF;
  --bs-btn-border-color: #00D1FF;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #26d8ff;
  --bs-btn-hover-border-color: #1ad6ff;
  --bs-btn-focus-shadow-rgb: 0, 178, 217;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #33daff;
  --bs-btn-active-border-color: #1ad6ff;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #00D1FF;
  --bs-btn-disabled-border-color: #00D1FF;
}

.btn-l-dark-blue {
  --bs-btn-color: #fff;
  --bs-btn-bg: #325A85;
  --bs-btn-border-color: #325A85;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2b4d71;
  --bs-btn-hover-border-color: #28486a;
  --bs-btn-focus-shadow-rgb: 81, 115, 151;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #28486a;
  --bs-btn-active-border-color: #264464;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #325A85;
  --bs-btn-disabled-border-color: #325A85;
}

.btn-l-brown {
  --bs-btn-color: #fff;
  --bs-btn-bg: #413624;
  --bs-btn-border-color: #413624;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #372e1f;
  --bs-btn-hover-border-color: #342b1d;
  --bs-btn-focus-shadow-rgb: 94, 84, 69;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #342b1d;
  --bs-btn-active-border-color: #31291b;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #413624;
  --bs-btn-disabled-border-color: #413624;
}

.btn-l-dark-night {
  --bs-btn-color: #fff;
  --bs-btn-bg: #262F3D;
  --bs-btn-border-color: #262F3D;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #202834;
  --bs-btn-hover-border-color: #1e2631;
  --bs-btn-focus-shadow-rgb: 71, 78, 90;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1e2631;
  --bs-btn-active-border-color: #1d232e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #262F3D;
  --bs-btn-disabled-border-color: #262F3D;
}

.btn-l-teal {
  --bs-btn-color: #fff;
  --bs-btn-bg: #263D3D;
  --bs-btn-border-color: #263D3D;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #203434;
  --bs-btn-hover-border-color: #1e3131;
  --bs-btn-focus-shadow-rgb: 71, 90, 90;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1e3131;
  --bs-btn-active-border-color: #1d2e2e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #263D3D;
  --bs-btn-disabled-border-color: #263D3D;
}

.btn-l-cyan {
  --bs-btn-color: #000;
  --bs-btn-bg: #B9E9F3;
  --bs-btn-border-color: #B9E9F3;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #c4ecf5;
  --bs-btn-hover-border-color: #c0ebf4;
  --bs-btn-focus-shadow-rgb: 157, 198, 207;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #c7edf5;
  --bs-btn-active-border-color: #c0ebf4;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #B9E9F3;
  --bs-btn-disabled-border-color: #B9E9F3;
}

.btn-l-pink {
  --bs-btn-color: #000;
  --bs-btn-bg: #EC266F;
  --bs-btn-border-color: #EC266F;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ef4785;
  --bs-btn-hover-border-color: #ee3c7d;
  --bs-btn-focus-shadow-rgb: 201, 32, 94;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f0518c;
  --bs-btn-active-border-color: #ee3c7d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #EC266F;
  --bs-btn-disabled-border-color: #EC266F;
}

.btn-l-dark-aqua {
  --bs-btn-color: #fff;
  --bs-btn-bg: #31596B;
  --bs-btn-border-color: #31596B;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2a4c5b;
  --bs-btn-hover-border-color: #274756;
  --bs-btn-focus-shadow-rgb: 80, 114, 129;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #274756;
  --bs-btn-active-border-color: #254350;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #31596B;
  --bs-btn-disabled-border-color: #31596B;
}

.btn-l-cyan-subtle {
  --bs-btn-color: #000;
  --bs-btn-bg: #E1F5F4;
  --bs-btn-border-color: #E1F5F4;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #e6f7f6;
  --bs-btn-hover-border-color: #e4f6f5;
  --bs-btn-focus-shadow-rgb: 191, 208, 207;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #e7f7f6;
  --bs-btn-active-border-color: #e4f6f5;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #E1F5F4;
  --bs-btn-disabled-border-color: #E1F5F4;
}

.btn-l-orange-subtle {
  --bs-btn-color: #000;
  --bs-btn-bg: #FFE7C2;
  --bs-btn-border-color: #FFE7C2;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffebcb;
  --bs-btn-hover-border-color: #ffe9c8;
  --bs-btn-focus-shadow-rgb: 217, 196, 165;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ffecce;
  --bs-btn-active-border-color: #ffe9c8;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #FFE7C2;
  --bs-btn-disabled-border-color: #FFE7C2;
}

.btn-l-yellow-subtle {
  --bs-btn-color: #000;
  --bs-btn-bg: #FCEFAD;
  --bs-btn-border-color: #FCEFAD;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #fcf1b9;
  --bs-btn-hover-border-color: #fcf1b5;
  --bs-btn-focus-shadow-rgb: 214, 203, 147;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #fdf2bd;
  --bs-btn-active-border-color: #fcf1b5;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #FCEFAD;
  --bs-btn-disabled-border-color: #FCEFAD;
}

.btn-outline-l-gold {
  --bs-btn-color: #EFAC2D;
  --bs-btn-border-color: #EFAC2D;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #EFAC2D;
  --bs-btn-hover-border-color: #EFAC2D;
  --bs-btn-focus-shadow-rgb: 239, 172, 45;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #EFAC2D;
  --bs-btn-active-border-color: #EFAC2D;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #EFAC2D;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #EFAC2D;
  --bs-gradient: none;
}

.btn-outline-l-hyperlink {
  --bs-btn-color: #FC7031;
  --bs-btn-border-color: #FC7031;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #FC7031;
  --bs-btn-hover-border-color: #FC7031;
  --bs-btn-focus-shadow-rgb: 252, 112, 49;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #FC7031;
  --bs-btn-active-border-color: #FC7031;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #FC7031;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #FC7031;
  --bs-gradient: none;
}

.btn-outline-l-light-gray {
  --bs-btn-color: #C5C2C2;
  --bs-btn-border-color: #C5C2C2;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #C5C2C2;
  --bs-btn-hover-border-color: #C5C2C2;
  --bs-btn-focus-shadow-rgb: 197, 194, 194;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #C5C2C2;
  --bs-btn-active-border-color: #C5C2C2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #C5C2C2;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #C5C2C2;
  --bs-gradient: none;
}

.btn-outline-l-yellow {
  --bs-btn-color: #FFE500;
  --bs-btn-border-color: #FFE500;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #FFE500;
  --bs-btn-hover-border-color: #FFE500;
  --bs-btn-focus-shadow-rgb: 255, 229, 0;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #FFE500;
  --bs-btn-active-border-color: #FFE500;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #FFE500;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #FFE500;
  --bs-gradient: none;
}

.btn-outline-l-gray {
  --bs-btn-color: #666;
  --bs-btn-border-color: #666;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #666;
  --bs-btn-hover-border-color: #666;
  --bs-btn-focus-shadow-rgb: 102, 102, 102;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #666;
  --bs-btn-active-border-color: #666;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #666;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #666;
  --bs-gradient: none;
}

.btn-outline-l-navy {
  --bs-btn-color: #0300A1;
  --bs-btn-border-color: #0300A1;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0300A1;
  --bs-btn-hover-border-color: #0300A1;
  --bs-btn-focus-shadow-rgb: 3, 0, 161;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0300A1;
  --bs-btn-active-border-color: #0300A1;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0300A1;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0300A1;
  --bs-gradient: none;
}

.btn-outline-l-sky {
  --bs-btn-color: #00D1FF;
  --bs-btn-border-color: #00D1FF;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #00D1FF;
  --bs-btn-hover-border-color: #00D1FF;
  --bs-btn-focus-shadow-rgb: 0, 209, 255;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #00D1FF;
  --bs-btn-active-border-color: #00D1FF;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #00D1FF;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #00D1FF;
  --bs-gradient: none;
}

.btn-outline-l-dark-blue {
  --bs-btn-color: #325A85;
  --bs-btn-border-color: #325A85;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #325A85;
  --bs-btn-hover-border-color: #325A85;
  --bs-btn-focus-shadow-rgb: 50, 90, 133;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #325A85;
  --bs-btn-active-border-color: #325A85;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #325A85;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #325A85;
  --bs-gradient: none;
}

.btn-outline-l-brown {
  --bs-btn-color: #413624;
  --bs-btn-border-color: #413624;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #413624;
  --bs-btn-hover-border-color: #413624;
  --bs-btn-focus-shadow-rgb: 65, 54, 36;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #413624;
  --bs-btn-active-border-color: #413624;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #413624;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #413624;
  --bs-gradient: none;
}

.btn-outline-l-dark-night {
  --bs-btn-color: #262F3D;
  --bs-btn-border-color: #262F3D;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #262F3D;
  --bs-btn-hover-border-color: #262F3D;
  --bs-btn-focus-shadow-rgb: 38, 47, 61;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #262F3D;
  --bs-btn-active-border-color: #262F3D;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #262F3D;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #262F3D;
  --bs-gradient: none;
}

.btn-outline-l-teal {
  --bs-btn-color: #263D3D;
  --bs-btn-border-color: #263D3D;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #263D3D;
  --bs-btn-hover-border-color: #263D3D;
  --bs-btn-focus-shadow-rgb: 38, 61, 61;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #263D3D;
  --bs-btn-active-border-color: #263D3D;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #263D3D;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #263D3D;
  --bs-gradient: none;
}

.btn-outline-l-cyan {
  --bs-btn-color: #B9E9F3;
  --bs-btn-border-color: #B9E9F3;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #B9E9F3;
  --bs-btn-hover-border-color: #B9E9F3;
  --bs-btn-focus-shadow-rgb: 185, 233, 243;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #B9E9F3;
  --bs-btn-active-border-color: #B9E9F3;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #B9E9F3;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #B9E9F3;
  --bs-gradient: none;
}

.btn-outline-l-pink {
  --bs-btn-color: #EC266F;
  --bs-btn-border-color: #EC266F;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #EC266F;
  --bs-btn-hover-border-color: #EC266F;
  --bs-btn-focus-shadow-rgb: 236, 38, 111;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #EC266F;
  --bs-btn-active-border-color: #EC266F;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #EC266F;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #EC266F;
  --bs-gradient: none;
}

.btn-outline-l-dark-aqua {
  --bs-btn-color: #31596B;
  --bs-btn-border-color: #31596B;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #31596B;
  --bs-btn-hover-border-color: #31596B;
  --bs-btn-focus-shadow-rgb: 49, 89, 107;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #31596B;
  --bs-btn-active-border-color: #31596B;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #31596B;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #31596B;
  --bs-gradient: none;
}

.btn-outline-l-cyan-subtle {
  --bs-btn-color: #E1F5F4;
  --bs-btn-border-color: #E1F5F4;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #E1F5F4;
  --bs-btn-hover-border-color: #E1F5F4;
  --bs-btn-focus-shadow-rgb: 225, 245, 244;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #E1F5F4;
  --bs-btn-active-border-color: #E1F5F4;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #E1F5F4;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #E1F5F4;
  --bs-gradient: none;
}

.btn-outline-l-orange-subtle {
  --bs-btn-color: #FFE7C2;
  --bs-btn-border-color: #FFE7C2;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #FFE7C2;
  --bs-btn-hover-border-color: #FFE7C2;
  --bs-btn-focus-shadow-rgb: 255, 231, 194;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #FFE7C2;
  --bs-btn-active-border-color: #FFE7C2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #FFE7C2;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #FFE7C2;
  --bs-gradient: none;
}

.btn-outline-l-yellow-subtle {
  --bs-btn-color: #FCEFAD;
  --bs-btn-border-color: #FCEFAD;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #FCEFAD;
  --bs-btn-hover-border-color: #FCEFAD;
  --bs-btn-focus-shadow-rgb: 252, 239, 173;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #FCEFAD;
  --bs-btn-active-border-color: #FCEFAD;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #FCEFAD;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #FCEFAD;
  --bs-gradient: none;
}



/* CSS  Classes */
.l-font-f-poppins {
  font-family: Poppins;
}

.bg-l-light-opac {
  background: rgba(255, 255, 255, 0.9) !important;
}

.custom-tabs > .nav-item > .nav-link.active {
  border-bottom: 2px solid #000 !important;
}

.tier-progress {
  background: linear-gradient(156deg, #EEE 0%, #F5F4F4 100%);
  top: -5rem;
}

.bg-l-gradient-dark-navy-blue {
  background: linear-gradient(198deg, #007BBF 0%, #001723 100%);
}

.bg-l-gradient-pink {
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(54.69%, #EBBFFF), to(#FFF));
  background: linear-gradient(180deg, #FFF 0%, #EBBFFF 54.69%, #FFF 100%);
}

.bg-l-gradient-green {
  background: linear-gradient(150deg, #367073 0%, #5BC2B6 100%);
}

.bg-l-gradient-grey {
  background: linear-gradient(150deg, #7B7B7B 0%, #BCBCBC 100%);
}

.bg-l-gradient-purple {
  background: linear-gradient(153deg, #5B3991 0%, #C070FF 100%);
}

.bg-l-gradient-blue {
  background: linear-gradient(144deg, #273E52 0%, #70C0D2 100%);
}

.bg-l-gradient-grass {
  background: linear-gradient(143deg, #4FBADB 0%, #4CC767 100%);
}

.bg-l-gradient-grass-subtle {
  background: -webkit-gradient(linear, left top, left bottom, from(#97EBFE), to(#62ECA7));
  background: linear-gradient(180deg, #97EBFE 0%, #62ECA7 100%);
}

.bg-l-gradient-magenta {
  background: linear-gradient(35deg, #6D53D5 0%, #F57CD3 100%);
}

.bg-l-gradient-magenta-subtle {
  background: -webkit-gradient(linear, left top, left bottom, from(#FFD0F4), to(#DBA1FF));
  background: linear-gradient(180deg, #FFD0F4 0%, #DBA1FF 100%);
}

.bg-l-gradient-sky-blue {
  background: linear-gradient(35deg, #1069BC 0%, #30B4FF 100%);
}

.bg-l-gradient-sky-blue-subtle {
  background: -webkit-gradient(linear, left top, left bottom, from(#A9E0FF), to(#51C0FF));
  background: linear-gradient(180deg, #A9E0FF 0%, #51C0FF 100%);
}

.bg-l-gradient-royal-blue {
  background: linear-gradient(143deg, #336B8B 0%, #4290A3 100%);
}

.bg-l-gradient-navy-blue {
  background: linear-gradient(143deg, #6DB4F5 0%, #1C438F 100%);
}

.bg-l-gradient-yellow {
  background: linear-gradient(138deg, #695732 0%, #B69848 100%);
}

.bg-l-gradient-dark-green {
  background: linear-gradient(138deg, #2E3849 0%, #596F93 100%);
}

.bg-l-gradient-dark-blue {
  background: linear-gradient(138deg, #2E4449 0%, #4F979C 100%);
}

.bg-l-gradient-orange {
  background: linear-gradient(227deg, #FFC700 0%, #FF7A00 100%, #EB840B 100%);
}

.bg-l-gradient-black {
  background: linear-gradient(48deg, #000 0%, #5B5B5B 100%);
}

.bg-l-gradient-golden {
  background: linear-gradient(44deg, #D3A125 0%, #F1C85C 100%);
}

.bg-l-gradient-platinum {
  background: linear-gradient(144deg, #1C304D 0%, #5676A8 100%);
}

.bg-l-gradient-diamond {
  background: linear-gradient(62deg, #43B4BE 0%, #007D89 100%);
}

.bg-l-gradient-grey-subtle {
  background: linear-gradient(156deg, #EEE 0%, #F5F4F4 100%);
}

.bg-l-gradient-black-to-gold {
  background: -webkit-gradient(linear, left top, left bottom, from(#161616), color-stop(34.41%, #675C3F), to(#997F40));
  background: linear-gradient(180deg, #161616 0%, #675C3F 34.41%, #997F40 100%);
}

.bg-l-gradient-gold-to-violet {
  background: -webkit-gradient(linear, left top, left bottom, from(#6E603F), color-stop(41.41%, #303B4D));
  background: linear-gradient(180deg, #6E603F 0%, #303B4D 41.41%);
}

.bg-l-gradient-violet-to-cyan {
  background: -webkit-gradient(linear, left top, left bottom, from(#303B4D), color-stop(34.41%, #2E4449), to(#4F979C));
  background: linear-gradient(180deg, #303B4D 0%, #2E4449 34.41%, #4F979C 100%);
}

.bg-l-gradient-cyan {
  background: linear-gradient(135deg, #2E4449 0%, #4F979C 100%);
}

.bg-l-gradient-violet {
  background: linear-gradient(135deg, #2E3849 0%, #596F93 100%);
}

.bg-l-gradient-french-blue {
  background: linear-gradient(199deg, #007BBF 12.94%, #001723 71.39%);
}

.bg-l-gradient-french-blue-subtle {
  background: linear-gradient(40deg, #1B375E 45%, #899DBD 100%);
}

.bg-l-gradient-dark-purple {
  background: linear-gradient(79deg, #464646 0.02%, #444 0.03%, #544C73 100.02%);
}

.bg-l-gradient-steel-blue {
  background: linear-gradient(218deg, #5979CA 20.39%, #3A388C 90.05%);
}

.bg-l-gradient-aqua-green {
  background: linear-gradient(126deg, #4FB3AD 11.56%, #31596B 59.82%);
}

.bg-l-gradient-aqua-blue {
  background: linear-gradient(108deg, #59C9CA 37.85%, #417BAA 100.01%);
}

.bg-l-gradient-cyan-lemon {
  background: linear-gradient(95deg, #DDFFF9 0%, #FFEFB8 100%);
}

.text-color-red {
  color: #FF4D15;
}

.border-lp-light-gray {
  border-color: rgba(197, 194, 194, 1) !important;
}

.margin-right-70px {
  margin-right: 70px;
}

.spin-wheel-btn-pink {
  background-color: #EC266F;
  color: white;
  font-size: 16px;
  font-weight: 600;
}

.spin-wheel-btn-gray {
  background-color: #A5A5A5;
  color: rgba(122, 122, 122, 1);
  font-size: 16px;
  font-weight: 600;
} 

.chance-used-text {
  color: #5A5A5A;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.012px;
}

.redeem-text {
  color: #001723;
font-family: Poppins;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.012px;
}

.redeem-text-title {
  color: #2F4F61;
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.016px;
text-transform: uppercase;
}

.points-data {
  color: #3A7784;
font-family: Poppins;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.032px;
}

.bg-coming-soon-card {
  background: linear-gradient(156.36deg, #C1C1C1 1.59%, #2E2E2E 102.94%);
}

/* .bg-image-challenge-info {
  background-image: url("../assets/images/loyalty-program-design-library/cashngo.png") ;
} */

.challenge-info-card-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.001em;
  text-align: center;
}

.challenge-guideline-text {
font-size: 12px;
font-weight: 500;
line-height: 18px;
letter-spacing: 0.001em;
text-align: left;
}

.challenge-li-text {
color: #000;
font-family: Poppins;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.012px;
}

.challenge-question-text {
  color: #B9E9F3;
font-family: Poppins;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.012px;
}    

.challenge-answer-text {
  color: #FFF;
font-family: Poppins;
font-size: 11px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.011px;
}

#guidelineText > a {
   color: #FFD600;
  margin-right: 0.5rem !important;
}

#all-challenges, #all-tasks, #all-tasks-gold {
  cursor: pointer;
}

#pills-tab-white > .nav-item > .nav-link.active {
    border-bottom: 2px solid white !important;
}

#challengeInfoText > ul > li {
  margin-bottom: 0.5rem;
}

.invalid-feedback {
  padding-left: 0px !important;
}

.see-all-gold {
  color: #FFEAC0 !important;
}

.see-all-platinum {
  color: #C0D7FF !important;
}

.see-all-diamond {
  color: #C0F7FF !important;
}

@media only screen and (min-width: 1024px) {
  #repFAQ {
    width: 390px;
  }
}

/* Custom CSS */

.fa-star-v-card::before{
    content: '';
    background: url(../assets/images/loyalty-program-design-library/loyalty-icon.png);
    position:absolute;
    top:0px;
    left:0px;
}

/* Loyalty Screen CSS */

.l-h-rem-10{
    height: 10rem;
}

.l-profile-card{
    background-size: cover;
    top: -23%;
}

.l-top-25{
      top: 25%;
}
.l-top-n18 {
    top: -18%;
}

.l-fs-40{
  font-size: 40px;
}

.l-description{
  font-size: 0.75rem;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.00075rem;
}
.l-description2x{
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.001rem;
}
.l-img-caption{
  font-size: 0.75rem;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.00075rem;
}

.l-fs-10 {
        font-size: 10px;
    }

.l-w-60 {
    width: 60% !important;
}

.l-w-80 {
    width: 80% !important;
}
    .completed>.l-step-counter>.badge-icon {
        bottom: 48px;
        left: 57px;
        z-index: 55;
        background-image: url("../assets/images/loyalty-program-design-library/dashboard/tier-progress/tick.svg");
        background-size: cover;
        width: 15px;
        height: 15px;
    }

    .badge-icon {
        bottom: 48px;
        left: 57px;
        z-index: 55;
        background-image: url("../assets/images/loyalty-program-design-library/dashboard/tier-progress/exclimination.svg");
        background-size: cover;
        width: 15px;
        height: 15px;
    }

    /*Stepper CSS*/
    
    .completed>.l-step-name>p {
        font-weight: 600;
        color: #179C24;
    }

    .l-step-name>p {
        font-weight: 500;
        color: #828282;
    }

    .l-stepper-wrapper {
        margin-top: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
       -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .l-stepper-item {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;

        @media (max-width: 768px) {
            font-size: 12px;
        }
    }

    .l-stepper-item::before {
        position: absolute;
        content: "";
        border-bottom: 4px solid #ccc;
        width: 100%;
        top: 35px;
        left: -50%;
        z-index: 2;
    }

    .l-stepper-item::after {
        position: absolute;
        content: "";
        border-bottom: 4px solid #ccc;
        width: 100%;
        top: 35px;
        left: 50%;
        z-index: 2;
    }

    .l-stepper-item .l-step-counter {
        position: relative;
        z-index: 5;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: 71px;
        height: 71px;
        border-radius: 50%;
        background: #fff;
        margin-bottom: 6px;
        border: 2px solid #BDBDBD;
    }


    .l-stepper-item.completed {
        color: #179C24;
        font-weight: 600 !important;
    }

    .l-stepper-item.completed .l-step-counter {
        border: 2px solid #179C24;
    }

    .l-stepper-item.completed::after {
        position: absolute;
        content: "";
        border-bottom: 4px solid #4bb543;
        width: 100%;
        top: 35px;
        left: 50%;
        z-index: 3;
    }

    .l-stepper-item:first-child::before {
        content: none;
    }

    .l-stepper-item:last-child::after {
        content: none;
    }
  .l-challenge-card {
          min-width: 283px;
          min-height: 169px;
          margin-right: 15px;
          -ms-flex-negative: 0;
              flex-shrink: 0;
    }

  .l-right-22 {
    right: 22%;
  }

  .l-right-5{
    right: 5%;
  }
  .l-right-1{
    right: 1%;
  }
  .l-bottom-5{
    bottom: 5%;
  }
  .l-bottom-1{
    bottom: 1%;
  }
  .l-reward-blitz-card {

        min-width: 168px;
        min-height: 190px;
    }
    .l-transform-rewards-icon{
-webkit-transform: translateY(-145%);
        transform: translateY(-145%);
    }
    
   .l-earn-more-points-card {
        min-width: 168px;
        min-height: 212px;
    }
    .bg-l-hemi-circle::before{
      content: "";
    padding: 60px;
    margin-left: -15px;
    margin-top: -40px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
}
    .bg-l-hemi-circle{
      height: 90px;
      width: 112px;
    }
    .bg-l-right-hemi-circle::before{
      content: "";
    padding: 110px;
   top: -13%;
    background: -webkit-gradient(linear, left top, right top, from(white), to(transparent));
    background: linear-gradient(90deg, white, transparent);
    border-radius: 50%;
    position: absolute;
}
    .bg-l-right-hemi-circle{
      height: 170px;
      width: 170px;
    }
    .l-launch-card{ 
      min-height: 170px;
      background-image: url("../assets/images/loyalty-program-design-library/extra-elements/rocket-for-tier-benefit-card.svg");
      background-repeat: no-repeat;
    }
.l-opacity-065{
  opacity: 0.065;
}
    .l-hemi-circle-bg {
        position: absolute;
        right: 0;
        top: 30px;
    }

    
    .l-h-rem-25 {
        height: 25rem;
    }

    .l-h-rem-20 {
        height: 20rem;
    }

   ul.l-challenge-list{
   list-style: none;
 }

    ul.l-challenge-list>li.challenge-complete-status::before{
      content: "\f00d";
        font-family: 'Font Awesome 6 Pro';
        color: gray;
        background-color: #fff;
        border-radius: 50px;
        padding: 3px 5px 3px 5px;
        font-weight: 900;
        margin-right: 10px;
    }

    ul.l-challenge-list>li.challenge-complete-status.done::before{
      content: "\f00c";
        font-family: 'Font Awesome 6 Pro';
        color: #000;
        background-color: #fff;
        border-radius: 40px;
        padding: 4px 5px 4px 5px;
        font-weight: 900;
        margin-right: 10px;
        font-size: 14px;
    }

    .custom-bg-circles:after {
      content: "";
 width: 130px;
 height: 130px;
 background: linear-gradient(193deg, rgb(255 255 255) 0%, transparent);
 display: block;
 position: absolute;
 top: -80px;
 border-radius: 100%;
 right: 0;
 opacity: .4;
}

.custom-bg-circles:before {
       width: 340px;
        background: linear-gradient(120deg, rgb(255 255 255) 0%, transparent);
    height: 340px;
    display: block;
    content: "";
    border-radius: 100%;
    left: -90px;
    position: absolute;
    top: -20px;
    opacity: .4;
}

.l-dashed-border-bottom-1{
  border-bottom: 1px dashed #fff;
}

.l-transparent-goman-bg{
        background-image: url(../assets/images/loyalty-program-design-library/extra-elements/go-man-transparent.svg),url(../assets/images/loyalty-program-design-library/extra-elements/go-man-transparent.svg);
       background-image: url(../assets/images/loyalty-program-design-library/extra-elements/go-man-transparent.svg),url(../assets/images/loyalty-program-design-library/extra-elements/go-man-transparent.svg),url(../assets/images/loyalty-program-design-library/extra-elements/go-man-transparent.svg),url(../assets/images/loyalty-program-design-library/extra-elements/go-man-transparent.svg);
        background-repeat: repeat;
        background-size: 125px;
        background-blend-mode: soft-light;
        /* background-position-y: 140px, 90px, 120px, 75px;
        background-position-x: -40px, 90px, 220px, 330px; */
}
.l-circular-progress {
  width: 64px;
    height: 64px;
    line-height: 50px;
    background: none;
    -webkit-box-shadow: none;
            box-shadow: none;
    position: relative;
}
.l-circular-progress:after {
   content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 7px solid #eee;
    position: absolute;
    top: 0;
    left: 0;
}
.l-circular-progress>span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.l-circular-progress .l-circular-progress-left {
  left: 0;
}
.l-circular-progress .l-circular-progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 7px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: #23DB1F;
}
.l-circular-progress .l-circular-progress-left .l-circular-progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.l-circular-progress .l-circular-progress-right {
  right: 0;
}
.l-circular-progress .l-circular-progress-right .l-circular-progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  -webkit-animation: loading-1 1.8s linear forwards;
          animation: loading-1 1.8s linear forwards;
}
.l-circular-progress .l-circular-progress-value {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  width: 100%;
  height: 100%;
  font-weight: 600;
  
}

.l-circular-progress .l-circular-progress-bar {
  border-color: #23DB1F;
}
.l-circular-progress .l-circular-progress-right .l-circular-progress-bar {
  -webkit-animation: loading-1 1.8s linear forwards;
          animation: loading-1 1.8s linear forwards;
}
.l-circular-progress .l-circular-progress-left .l-circular-progress-bar {
  -webkit-animation: none;
          animation: none;
}
@-webkit-keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
@-webkit-keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144deg);
    transform: rotate(144deg);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144deg);
    transform: rotate(144deg);
  }
}
@-webkit-keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
}
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(195deg);
    transform: rotate(195deg);
  }
}

.l-timeline-with-icons {
  position: relative;
  list-style: none;
}

.l-timeline-with-icons .l-timeline-item {
  position: relative;border-left: 1px solid hsl(0, 0%, 90%);
  padding-left: 32px;
}

.l-timeline-with-icons .l-timeline-item:after {
  position: absolute;
  display: block;
  top: 0;
}

.l-timeline-with-icons .l-timeline-icon {
  position: absolute;
  left: calc(0% - 12px);
  border-radius: 50%;
  height: 25px;
  width: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.l-timeline-with-icons li:last-child{
  border-left: 0;
}

/* scratch */

 
 .l-scratch-container {
     position: relative;
     width: 225px;
     height: 250px;
     margin: 0 auto;
     margin-bottom: 100px;
 }
 
 .l-scratcher {
     cursor: crosshair;
     cursor: url(../assets/images/loyalty-program-design-library/extra-elements/cursor.svg) 15 15, crosshair;
     position: absolute;
     inset: 0;-o-object-fit: contain;object-fit: contain;margin: 0 auto;
 }
 
 .l-coupon {
     
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
 }
 
.bg-l-reward-screen-img{
  background-image: url("../assets/images/loyalty-program-design-library/extra-elements/reward-bg.svg");
}
 
 #confetti-canvas {
    position: absolute;
     width: 100vw;
     height: 100vh;
     inset: 0;
     z-index: -1;
 }
 
  .l-wheel-btn-wapper {
    position: absolute;
    left: calc(50% - 22px);
    top: calc(50% - 22px);
  }

  #spin-wheel-canvas {
    background-image: url('/assets/images/loyalty-program-design-library/extra-elements/spin-wheel-elements/border.svg');
    background-repeat: no-repeat;
    background-position: 0px -26px;
    background-size: cover;
  }

  .l-half-circle-before:before {
 content: "";
 width: 22px;
 height: 22px;
 background: #fff;
 display: block;
 border-radius: 100%;
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto;
 left: -12px;
 z-index: 9;
}

.l-half-circle-after:after {
 content: "";
 width: 22px;
 height: 22px;
 background: #fff;
 display: block;
 border-radius: 100%;
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto;
 right: -12px;
 z-index: 9;
}

.l-text-rotate{
   -webkit-transform: rotate(-90deg);
           transform: rotate(-90deg);
 position: absolute;
 bottom: 0;
 left: 0;
 margin-left: -33px;
 margin-bottom: 65px;
 font-size: 14px;
 font-style: normal;
 font-weight: 600;
 line-height: normal;
 letter-spacing: 2.1px;
 text-transform: uppercase;
 white-space: nowrap;
}
.l-top-n30{top: -30px;}

#RewardName:hover {
  cursor: pointer;
}

#gameGuidelines a {
  text-decoration: none;
}

#TierSpecificChallenges li {
  margin-bottom: .5rem !important;
}

#TierIndependentChallenges li {
  margin-bottom: .5rem !important;
}

.l-transparent-confetti-bg {
  background-image: 
    linear-gradient(126deg, #4FB3AD 11.56%, #31596B 59.82%),
    url(../assets/images/loyalty-program-design-library/extra-elements/bg-confetti.svg),
    url(../assets/images/loyalty-program-design-library/extra-elements/bg-confetti.svg),
    url(../assets/images/loyalty-program-design-library/extra-elements/bg-confetti.svg),
    url(../assets/images/loyalty-program-design-library/extra-elements/bg-confetti.svg);
  background-repeat: repeat;
  background-size: cover;
  background-blend-mode: soft-light;
  /* Add any additional properties specific to l-transparent-confetti-bg here */
  /* background-position-y: 140px, 90px, 120px, 75px;
     background-position-x: -40px, 90px, 220px, 330px; */
}