:root {
  --at-red: #c8102e;
  --at-red-light: #e11b22;
  --at-red-bg: rgba(200, 16, 46, 0.08);
  --at-green-50: #f0fdf4;
  --at-green-100: #dcfce7;
  --at-green-600: #16a34a;
  --at-green-700: #15803d;
  --at-green-800: #166534;
  --at-amber-50: #fffbeb;
  --at-amber-100: #fef3c7;
  --at-amber-200: #fde68a;
  --at-amber-600: #d97706;
  --at-amber-800: #92400e;
  --at-blue-50: #eff6ff;
  --at-orange-500: #f97316;
  --at-muted: #f4f4f5;
  --at-muted-fg: #71717a;
  --at-border: #e4e4e7;
  --at-fg: #18181b;
  --at-card: #ffffff;
}

.at-card { border: 1px solid var(--at-border); border-radius: .75rem; overflow: hidden; }
.at-card-accent { height: 4px; background: var(--at-red); }
.at-card-body { min-height: 500px; display: flex; flex-direction: column; }

.at-fade-in { animation: atFadeIn .35s ease both; }
@keyframes atFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.at-stagger > *:nth-child(1) { animation-delay: 0s; }
.at-stagger > *:nth-child(2) { animation-delay: .06s; }
.at-stagger > *:nth-child(3) { animation-delay: .12s; }
.at-stagger > *:nth-child(4) { animation-delay: .18s; }

.icon-box, .icon-box-sm, .icon-box-xxs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-box { width: 56px; height: 56px; border-radius: .75rem; font-size: 1.5rem; transition: transform .15s; }
.icon-box-sm { width: 40px; height: 40px; border-radius: .5rem; font-size: 1rem; }
.icon-box-xxs { width: 24px; height: 24px; border-radius: .25rem; font-size: .75rem; }

.at-choice-card {
  padding: 1.5rem;
  border-radius: .75rem;
  border: 2px solid var(--at-border);
  background: var(--at-card);
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}
.at-choice-card:hover {
  border-color: var(--at-red);
  background: var(--at-red-bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
.at-choice-card:hover .icon-box { transform: scale(1.05); }
.at-choice-card.selected {
  border-color: var(--at-red);
  background: var(--at-red-bg);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, .15);
}

.at-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem 1rem;
  border-radius: 9999px;
  font-size: .875rem;
  font-weight: 500;
}
.at-pill.green { background: var(--at-green-100); color: var(--at-green-700); }

.at-compare-panel {
  padding: 1rem;
  border-radius: .5rem;
  border: 2px solid;
}
.at-compare-panel.highlighted { border-color: rgba(200, 16, 46, .3); background: var(--at-red-bg); }
.at-compare-panel.dimmed { border-color: var(--at-border); background: var(--at-muted); }

.at-fa-icon {
  width: 1em;
  height: 1em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.at-fa-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.at-yes-btn, .at-no-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1rem;
  border-radius: .75rem;
  border: 2px solid;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  background: transparent;
}
.at-yes-btn::before, .at-no-btn::before {
  content: "";
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.at-yes-btn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-thumbs-up w-5 h-5 text-green-600 group-hover:scale-110 transition-transform' data-replit-metadata='client/src/pages/simulation.tsx:1851:10' data-component-name='ThumbsUp'%3E%3Cpath d='M7 10v12'%3E%3C/path%3E%3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z'%3E%3C/path%3E%3C/svg%3E");
}
.at-no-btn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c8102e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-thumbs-down w-5 h-5 text-primary group-hover:scale-110 transition-transform' data-replit-metadata='client/src/pages/simulation.tsx:1714:10' data-component-name='ThumbsDown'%3E%3Cpath d='M17 14V2'%3E%3C/path%3E%3Cpath d='M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z'%3E%3C/path%3E%3C/svg%3E");
}
.at-yes-btn { border-color: var(--at-green-100); background: var(--at-green-50); color: var(--at-green-700); }
.at-yes-btn:hover { background: var(--at-green-100); border-color: #86efac; }
.at-no-btn { border-color: rgba(200, 16, 46, .15); background: var(--at-red-bg); color: var(--at-red); }
.at-no-btn:hover { background: rgba(200, 16, 46, .12); border-color: rgba(200, 16, 46, .3); }
.at-no-btn.muted { border-color: var(--at-border); background: var(--at-muted); color: var(--at-muted-fg); }
.at-no-btn.muted:hover { background: #e4e4e7; }

.at-nav-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: .875rem;
}
.at-nav-back {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .375rem .75rem;
  border-radius: .375rem;
  color: var(--at-muted-fg);
  background: none;
  border: none;
  cursor: pointer;
  transition: all .15s;
}
.at-nav-back:hover { color: var(--at-fg); background: var(--at-muted); }
.at-nav-back:disabled { opacity: .3; cursor: not-allowed; }

.at-modal-choice-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.at-modal-choice {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: .75rem;
  border: 2px solid;
  cursor: pointer;
  text-align: left;
  background: transparent;
  width: 100%;
  transition: all .15s;
}
.at-modal-choice.primary { border-color: rgba(200, 16, 46, .2); background: var(--at-red-bg); }
.at-modal-choice.primary:hover { border-color: rgba(200, 16, 46, .4); background: rgba(200, 16, 46, .12); }
.at-modal-choice.secondary { border-color: var(--at-border); }
.at-modal-choice.secondary:hover { border-color: var(--at-muted-fg); background: var(--at-muted); }

.at-modal-close {
  border: 0;
  background: transparent;
  color: var(--at-muted-fg);
  width: 2rem;
  height: 2rem;
  border-radius: .375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.at-modal-close:hover {
  background: var(--at-muted);
  color: var(--at-fg);
}

.modal-backdrop {
  --bs-backdrop-zindex: 1050;
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-backdrop-zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg);
}
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: var(--bs-backdrop-opacity); }

.text-at { color: var(--at-red) !important; }
.bg-at-light { background: var(--at-red-bg) !important; }
:root {
  --at-red: #c8102e;
  --at-red-light: #e11b22;
  --at-red-bg: rgba(200, 16, 46, 0.08);
  --at-green-50: #f0fdf4;
  --at-green-100: #dcfce7;
  --at-green-600: #16a34a;
  --at-green-700: #15803d;
  --at-green-800: #166534;
  --at-amber-50: #fffbeb;
  --at-amber-100: #fef3c7;
  --at-amber-200: #fde68a;
  --at-amber-600: #d97706;
  --at-amber-800: #92400e;
  --at-blue-50: #eff6ff;
  --at-orange-500: #f97316;
  --at-muted: #f4f4f5;
  --at-muted-fg: #71717a;
  --at-border: #e4e4e7;
  --at-fg: #18181b;
  --at-card: #ffffff;
}

.at-card { border: 1px solid var(--at-border); border-radius: .75rem; overflow: hidden; }
.at-card-accent { height: 4px; background: var(--at-red); }
.at-card-body { min-height: 500px; display: flex; flex-direction: column; }

.at-fade-in { animation: atFadeIn .35s ease both; }
@keyframes atFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.at-stagger > *:nth-child(1) { animation-delay: 0s; }
.at-stagger > *:nth-child(2) { animation-delay: .06s; }
.at-stagger > *:nth-child(3) { animation-delay: .12s; }
.at-stagger > *:nth-child(4) { animation-delay: .18s; }

.icon-box, .icon-box-sm, .icon-box-xxs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-box { width: 56px; height: 56px; border-radius: .75rem; font-size: 1.5rem; transition: transform .15s; }
.icon-box-sm { width: 40px; height: 40px; border-radius: .5rem; font-size: 1rem; }
.icon-box-xxs { width: 24px; height: 24px; border-radius: .25rem; font-size: .75rem; }

.at-choice-card {
  padding: 1.5rem;
  border-radius: .75rem;
  border: 2px solid var(--at-border);
  background: var(--at-card);
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}
.at-choice-card:hover {
  border-color: var(--at-red);
  background: var(--at-red-bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
.at-choice-card:hover .icon-box { transform: scale(1.05); }
.at-choice-card.selected {
  border-color: var(--at-red);
  background: var(--at-red-bg);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, .15);
}

.at-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem 1rem;
  border-radius: 9999px;
  font-size: .875rem;
  font-weight: 500;
}
.at-pill.green { background: var(--at-green-100); color: var(--at-green-700); }

.at-compare-panel {
  padding: 1rem;
  border-radius: .5rem;
  border: 2px solid;
}
.at-compare-panel.highlighted { border-color: rgba(200, 16, 46, .3); background: var(--at-red-bg); }
.at-compare-panel.dimmed { border-color: var(--at-border); background: var(--at-muted); }

.at-fa-icon {
  width: 1em;
  height: 1em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.at-fa-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.at-yes-btn, .at-no-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1rem;
  border-radius: .75rem;
  border: 2px solid;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  background: transparent;
}
.at-yes-btn::before, .at-no-btn::before {
  content: "";
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.at-yes-btn { border-color: var(--at-green-100); background: var(--at-green-50); color: var(--at-green-700); }
.at-yes-btn:hover { background: var(--at-green-100); border-color: #86efac; }
.at-no-btn { border-color: rgba(200, 16, 46, .15); background: var(--at-red-bg); color: var(--at-red); }
.at-no-btn:hover { background: rgba(200, 16, 46, .12); border-color: rgba(200, 16, 46, .3); }
.at-no-btn.muted { border-color: var(--at-border); background: var(--at-muted); color: var(--at-muted-fg); }
.at-no-btn.muted:hover { background: #e4e4e7; }

.at-nav-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: .875rem;
}
.at-nav-back {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .375rem .75rem;
  border-radius: .375rem;
  color: var(--at-muted-fg);
  background: none;
  border: none;
  cursor: pointer;
  transition: all .15s;
}
.at-nav-back:hover { color: var(--at-fg); background: var(--at-muted); }
.at-nav-back:disabled { opacity: .3; cursor: not-allowed; }

.at-modal-choice {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: .75rem;
  border: 2px solid;
  cursor: pointer;
  text-align: left;
  background: transparent;
  width: 100%;
  transition: all .15s;
}
.at-modal-choice.primary { border-color: rgba(200, 16, 46, .2); background: var(--at-red-bg); }
.at-modal-choice.primary:hover { border-color: rgba(200, 16, 46, .4); background: rgba(200, 16, 46, .12); }
.at-modal-choice.secondary { border-color: var(--at-border); }
.at-modal-choice.secondary:hover { border-color: var(--at-muted-fg); background: var(--at-muted); }

.at-modal-close {
  border: 0;
  background: transparent;
  color: var(--at-muted-fg);
  width: 2rem;
  height: 2rem;
  border-radius: .375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.at-modal-close:hover {
  background: var(--at-muted);
  color: var(--at-fg);
}

.modal-backdrop {
  --bs-backdrop-zindex: 1050;
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-backdrop-zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg);
}
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: var(--bs-backdrop-opacity); }

.text-at { color: var(--at-red) !important; }
.bg-at-light { background: var(--at-red-bg) !important; }
:root {
  --at-red: #c8102e;
  --at-red-light: #e11b22;
  --at-red-bg: rgba(200, 16, 46, 0.08);
  --at-green-50: #f0fdf4;
  --at-green-100: #dcfce7;
  --at-green-600: #16a34a;
  --at-green-700: #15803d;
  --at-green-800: #166534;
  --at-amber-50: #fffbeb;
  --at-amber-100: #fef3c7;
  --at-amber-200: #fde68a;
  --at-amber-500: #f59e0b;
  --at-amber-600: #d97706;
  --at-amber-800: #92400e;
  --at-blue-50: #eff6ff;
  --at-blue-500: #3b82f6;
  --at-purple-50: #faf5ff;
  --at-purple-500: #a855f7;
  --at-teal-50: #f0fdfa;
  --at-teal-500: #14b8a6;
  --at-emerald-50: #ecfdf5;
  --at-emerald-200: #a7f3d0;
  --at-emerald-500: #10b981;
  --at-orange-500: #f97316;
  --at-muted: #f3f4f6;
  --at-muted-fg: #71717a;
  --at-border: #e4e4e7;
  --at-fg: #18181b;
  --at-card: #ffffff;
}

.at-header {
  z-index: 1030;
  background: linear-gradient(90deg, var(--at-red), var(--at-red-light));
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.at-logo-circle {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.2); display: flex;
  align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.25rem; color: #fff;
}
.at-nav-link { cursor: pointer; transition: opacity .15s; }
.at-nav-link:hover { opacity: 1 !important; color: #fff !important; }
.at-nav-dropdown {
  color: rgba(255,255,255,.8); text-decoration: none;
  font-size: .875rem; font-weight: 500; padding: 0;
}
.at-nav-dropdown:hover, .at-nav-dropdown:focus { color: #fff; }
.at-breadcrumb-bar {
  background: rgba(255,255,255,.1);
  border-top: 1px solid rgba(255,255,255,.2);
}

.at-card { border: 1px solid var(--at-border); border-radius: .75rem; overflow: hidden; }
.at-card-accent { height: 4px; background: var(--at-red); }
.at-card-body { min-height: 500px; display: flex; flex-direction: column; }

.at-card .gap-2 {
    gap: 0.5rem;
}

.at-card .g-3 {
    row-gap: 1rem;
}

.at-card .g-2,
.at-card .gap-3 {
    gap: 1rem;
}


.at-fade-in {
  animation: atFadeIn .35s ease both;
}
@keyframes atFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.at-stagger > *:nth-child(1) { animation-delay: 0s; }
.at-stagger > *:nth-child(2) { animation-delay: .06s; }
.at-stagger > *:nth-child(3) { animation-delay: .12s; }
.at-stagger > *:nth-child(4) { animation-delay: .18s; }
.at-stagger > *:nth-child(5) { animation-delay: .24s; }

.icon-box {
  width: 56px; height: 56px; border-radius: .75rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0; transition: transform .15s;
}
.icon-box-sm {
  width: 40px; height: 40px; border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.icon-box-xs {
  width: 32px; height: 32px; border-radius: .375rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
}
.icon-box-xxs {
  width: 24px; height: 24px; border-radius: .25rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; flex-shrink: 0;
}

.at-fa-icon {
  width: 1em;
  height: 1em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
https://replit.com/@thekevinb/Atlantech-Operator-Connect
.at-fa-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.at-choice-card {
  padding: 1.5rem; border-radius: .75rem;
  border: 2px solid var(--at-border); background: var(--at-card);
  text-align: center; cursor: pointer; transition: all .2s;
}
.at-choice-card:hover {
  border-color: var(--at-red); background: var(--at-red-bg);
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.at-choice-card:hover .icon-box { transform: scale(1.05); }
.at-choice-card.selected {
  border-color: var(--at-red); background: var(--at-red-bg);
  box-shadow: 0 0 0 3px rgba(200,16,46,.15);
}

.at-yes-btn, .at-no-btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: .75rem; padding: 0.875rem; border-radius: .75rem;
  border: 2px solid; font-weight: 500; cursor: pointer; transition: all .2s;
  background: transparent;
}
.at-yes-btn::before,
.at-no-btn::before {
  content: "";
  min-width: 1rem;
  min-height: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.at-yes-btn {
  border-color: var(--at-green-100); background: var(--at-green-50);
  color: var(--at-green-700);
}
.at-yes-btn:hover { background: var(--at-green-100); border-color: #86efac; }
.at-no-btn {
  border-color: rgba(200,16,46,.15); background: var(--at-red-bg);
  color: var(--at-red);
}
.at-no-btn:hover { background: rgba(200,16,46,.12); border-color: rgba(200,16,46,.3); }
.at-no-btn.muted {
  border-color: var(--at-border); background: var(--at-muted);
  color: var(--at-muted-fg);
}
.at-no-btn.muted:hover { background: #e4e4e7; }

.at-info-row {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem; border-radius: .5rem;
}
.at-info-row.green  { background: var(--at-green-50);  border: 1px solid #bbf7d0; }
.at-info-row.amber  { background: var(--at-amber-50);  border: 1px solid var(--at-amber-200); }
.at-info-row.muted  { background: var(--at-muted);     border: 1px solid var(--at-border); }
.at-info-row.primary { background: var(--at-red-bg);   border: 1px solid rgba(200,16,46,.2); }

.at-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem 1rem; border-radius: 9999px;
  font-size: .875rem; font-weight: 500;
}
.at-pill.green { background: var(--at-green-100); color: var(--at-green-700); }

.btn-at {
  background: var(--at-red); color: #fff; border: none;
  padding: .625rem 1.5rem; border-radius: .5rem;
  font-weight: 600; font-size: .9375rem; cursor: pointer;
  transition: background .15s;
}
.btn-at:hover { background: var(--at-red-light); color: #fff; }
.btn-at-outline {
  background: transparent; color: var(--at-red);
  border: 2px solid var(--at-red); padding: .5rem 1.5rem;
  border-radius: .5rem; font-weight: 600; font-size: .9375rem;
  cursor: pointer; transition: all .15s;
}
.btn-at-outline:hover { background: var(--at-red-bg); }
.btn-at-lg { padding: .75rem 2rem; font-size: 1rem; }

.at-compare-panel {
  padding: 1rem; border-radius: .5rem; border: 2px solid;
}
.at-compare-panel.highlighted { border-color: rgba(200,16,46,.3); background: var(--at-red-bg); }
.at-compare-panel.dimmed { border-color: var(--at-border); background: var(--at-muted); }

.at-nav-footer {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  font-size: .875rem;
}
.at-nav-back {
  display: flex; align-items: center; gap: .25rem;
  padding: .375rem .75rem; border-radius: .375rem;
  color: var(--at-muted-fg); background: none; border: none;
  cursor: pointer; transition: all .15s;
}
.at-nav-back:hover { color: var(--at-fg); background: var(--at-muted); }
.at-nav-back:disabled { opacity: .3; cursor: not-allowed; }


.at-nav-back svg {
    scale: 0.85
}

.check-circle {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--at-green-100); display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.check-circle i { color: var(--at-green-600); font-size: .875rem; }

.at-modal-choice {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem; border-radius: .75rem; border: 2px solid;
  cursor: pointer; text-align: left; background: transparent;
  width: 100%; transition: all .15s;
}
.at-modal-choice.primary {
  border-color: rgba(200,16,46,.2); background: var(--at-red-bg);
}
.at-modal-choice.primary:hover { border-color: rgba(200,16,46,.4); background: rgba(200,16,46,.12); }
.at-modal-choice.secondary { border-color: var(--at-border); }
.at-modal-choice.secondary:hover { border-color: var(--at-muted-fg); background: var(--at-muted); }

.modal {
    background: rgba(7, 18, 41, 50%);
}

.modal-backdrop {
  --bs-backdrop-zindex: 1050;
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-backdrop-zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg);
}

.modal .back-btn {
    border: none;
}

.modal .modal-header {
    padding: 50px;
    padding-bottom: 1rem;
    border-bottom: none;
}

.modal .modal-body {
    padding: 50px;
    padding-top: 0;
}

.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: var(--bs-backdrop-opacity); }

.at-step-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(113,113,122,.3); transition: background .2s;
}
.at-step-dot.active { background: var(--at-red); }

.at-chart { position: relative; height: 128px; }
.at-chart svg { width: 100%; height: 100%; }

.at-badge-float {
  position: absolute; top: -.5rem; left: 1rem;
  padding: .125rem .5rem; font-size: .75rem; font-weight: 500;
  border-radius: .25rem; color: #fff;
}
.at-badge-float.amber { background: var(--at-amber-500); }

.text-at { color: var(--at-red) !important; }
.bg-at-light { background: var(--at-red-bg) !important; }