/* Progress Steps for epic-to-wepic */
.progress-step {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 400;
    color: #212529;
    transition: all 0.2s;
}

.progress-step.active,
.progress-step.bold {
    background: #0d6efd;
    color: #fff;
    font-weight: 700;
    border-color: #0d6efd;
}


/* Use dashboard green and blue */
.progress-step.completed {
    background: #b6fcd5;
    /* dashboard green */
    color: #212529;
    border-color: #b6fcd5;
}

.progress-step.active {
    background: #007bff;
    /* dashboard blue */
    color: #fff;
    font-weight: 700;
    border-color: #007bff;
}

.progress-step.bold {
    background: #b6fcd5;
    /* dashboard green */
    color: #212529;
    font-weight: 700;
    border-color: #b6fcd5;
}

.progress-line {
    height: 4px;
    background: #dee2e6;
    border-radius: 2px;
    transition: background 0.2s;
}

.progress-line.completed {
    background: #b6fcd5;
    /* dashboard green */
}

.progress-line.active {
    background: #007bff;
    /* dashboard blue */
}

.step-label {
    font-size: 1rem;
    color: #000;
    font-weight: 400;
}

.step-label.bold {
    font-weight: 700;
    color: #000;
}

table.old-table {
    border-collapse: collapse;
    width: 100%;
    background-color: #fdf6e3;
    color: #222;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

table.old-table th,
table.old-table td {
    border: 1px solid #bdb76b;
    padding: 8px 12px;
}

table.old-table th {
    background-color: #f5deb3;
    color: #222;
    font-weight: bold;
    text-align: left;
}

table.old-table tr:nth-child(even) {
    background-color: #f9f5e3;
}

table.old-table tr:hover {
    background-color: #f5e9c6;
}

/* Custom badge styles for transaction stats */
.badge.text-bg-warning {
    background-color: #ffe066 !important;
    /* soft yellow */
    color: #7a5c00 !important;
    /* dark gold text */
    font-weight: 600;
    font-family: 'Courier New', Consolas, monospace;
    box-shadow: 0 2px 8px rgba(255, 224, 102, 0.15);
}

.badge.text-bg-success {
    background-color: #b6fcd5 !important;
    /* soft green */
    color: #006644 !important;
    /* dark green text */
    font-weight: 600;
    font-family: 'Courier New', Consolas, monospace;
    box-shadow: 0 2px 8px rgba(182, 252, 213, 0.15);
}

.badge.text-bg-danger {
    background-color: #ffb3b3 !important;
    /* soft red */
    color: #a80000 !important;
    /* dark red text */
    font-weight: 600;
    font-family: 'Courier New', Consolas, monospace;
    box-shadow: 0 2px 8px rgba(255, 179, 179, 0.15);
}

.badge.text-bg-primary {
    background-color: #b3e0ff !important;
    /* soft blue */
    color: #004080 !important;
    /* dark blue text */
    font-weight: 600;
    font-family: 'Courier New', Consolas, monospace;
    box-shadow: 0 2px 8px rgba(179, 224, 255, 0.15);
}

/* Font override for all Bootstrap components */
body,
button,
input,
select,
textarea {
    font-family: "Courier New", Consolas, monospace !important;
    letter-spacing: 0.5px;
}

:root {
    --bs-primary: #00e5ff;
    /* neon cyan */
    --bs-success: #00ff9d;
    /* mint green */
    --bs-warning: #ffc400;
    /* gold amber */
    --bs-danger: #ff1744;
    /* neon pink-red */
    --bs-info: #00bcd4;
    /* neon blue */
    --bs-secondary: #ff9800;
    /* orange */
    --bs-dark: #222;
    /* dark background */
    --bs-light: #f8f9fa;
    /* light background */

    /* Onboard.js font family variable */
    --onboard-font-family-normal: 'Inter', 'Segoe UI', 'Arial', sans-serif;
    --bs-primary-hover: #00b8d4;
    --bs-success-hover: #00cc7a;
    --bs-warning-hover: #e6ac00;
    --bs-danger-hover: #d50032;
}

/* Global background and text color */
body {
    background-color: #FFF9E3 !important;
    /* egg white */
    color: #000 !important;
    /* black text for contrast */
}

/* Primary */
.btn-primary,
.bg-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #000 !important;
}

.btn-primary:hover {
    background-color: var(--bs-primary-hover) !important;
    border-color: var(--bs-primary-hover) !important;
}

/* Success */
.btn-success,
.bg-success {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
    color: #000 !important;
}

.btn-success:hover {
    background-color: var(--bs-success-hover) !important;
    border-color: var(--bs-success-hover) !important;
}

/* Warning */
.btn-warning,
.bg-warning {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    color: #000 !important;
}

.btn-warning:hover {
    background-color: var(--bs-warning-hover) !important;
    border-color: var(--bs-warning-hover) !important;
}

/* Danger */
.btn-danger,
.bg-danger {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    color: #fff !important;
}

.btn-danger:hover {
    background-color: var(--bs-danger-hover) !important;
    border-color: var(--bs-danger-hover) !important;
}

/* Info */
.btn-info,
.bg-info {
    background-color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
    color: #000 !important;
}

/* Secondary */
.btn-secondary,
.bg-secondary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: #000 !important;
}

/* Alerts */
.alert-primary {
    background-color: var(--bs-primary) !important;
    color: #000 !important;
}

.alert-success {
    background-color: var(--bs-success) !important;
    color: #000 !important;
}

.alert-warning {
    background-color: var(--bs-warning) !important;
    color: #000 !important;
}

.alert-danger {
    background-color: var(--bs-danger) !important;
    color: #fff !important;
}

.alert-info {
    background-color: var(--bs-info) !important;
    color: #000 !important;
}

.alert-secondary {
    background-color: var(--bs-secondary) !important;
    color: #000 !important;
}

.alert-dark {
    background-color: var(--bs-dark) !important;
    color: var(--bs-primary) !important;
}

.alert-light {
    background-color: var(--bs-light) !important;
    color: #000 !important;
}

/* Success */
.btn-success,
.bg-success {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
    color: #000 !important;
}

.btn-success:hover {
    background-color: var(--bs-success-hover) !important;
    border-color: var(--bs-success-hover) !important;
}

/* Warning */
.btn-warning,
.bg-warning {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    color: #000 !important;
}

.btn-warning:hover {
    background-color: var(--bs-warning-hover) !important;
    border-color: var(--bs-warning-hover) !important;
}

/* Danger */
.btn-danger,
.bg-danger {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    color: #fff !important;
}

.btn-danger:hover {
    background-color: var(--bs-danger-hover) !important;
    border-color: var(--bs-danger-hover) !important;
}

/* Badges, alerts, etc. */
.badge.bg-primary,
.alert-primary {
    background-color: var(--bs-primary) !important;
    color: #000 !important;
}

.badge.bg-success,
.alert-success {
    background-color: var(--bs-success) !important;
    color: #000 !important;
}

.badge.bg-warning,
.alert-warning {
    background-color: var(--bs-warning) !important;
    color: #000 !important;
}

.badge.bg-danger,
.alert-danger {
    background-color: var(--bs-danger) !important;
    color: #fff !important;
}

/* Glow effects for crypto dashboard feel */
.btn-primary,
.badge.bg-primary {
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}

.btn-success,
.badge.bg-success {
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.6);
}

.btn-warning,
.badge.bg-warning {
    box-shadow: 0 0 10px rgba(255, 196, 0, 0.6);
}

.btn-danger,
.badge.bg-danger {
    box-shadow: 0 0 10px rgba(255, 23, 68, 0.6);
}


/**
 * ==============================================
 * Dot Pulse
 * ==============================================
 */
.dot-pulse {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #000;
    color: #000;
    box-shadow: 9999px 0 0 -5px;
    animation: dot-pulse 1.5s infinite linear;
    animation-delay: 0.25s;
}

.dot-pulse::before,
.dot-pulse::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #000;
    color: #000;
}

.dot-pulse::before {
    box-shadow: 9984px 0 0 -5px;
    animation: dot-pulse-before 1.5s infinite linear;
    animation-delay: 0s;
}

.dot-pulse::after {
    box-shadow: 10014px 0 0 -5px;
    animation: dot-pulse-after 1.5s infinite linear;
    animation-delay: 0.5s;
}

@keyframes dot-pulse-before {
    0% {
        box-shadow: 9984px 0 0 -5px;
    }

    30% {
        box-shadow: 9984px 0 0 2px;
    }

    60%,
    100% {
        box-shadow: 9984px 0 0 -5px;
    }
}

@keyframes dot-pulse {
    0% {
        box-shadow: 9999px 0 0 -5px;
    }

    30% {
        box-shadow: 9999px 0 0 2px;
    }

    60%,
    100% {
        box-shadow: 9999px 0 0 -5px;
    }
}

@keyframes dot-pulse-after {
    0% {
        box-shadow: 10014px 0 0 -5px;
    }

    30% {
        box-shadow: 10014px 0 0 2px;
    }

    60%,
    100% {
        box-shadow: 10014px 0 0 -5px;
    }
}

.border-primary {
    border-color: var(--bs-primary) !important;
}

.border-success {
    border-color: var(--bs-success) !important;
}

.border-warning {
    border-color: var(--bs-warning) !important;
}

.border-danger {
    border-color: var(--bs-danger) !important;
}

.border-info {
    border-color: var(--bs-info) !important;
}

.border-secondary {
    border-color: var(--bs-secondary) !important;
}

.border-dark {
    border-color: var(--bs-dark) !important;
}

.border-light {
    border-color: var(--bs-light) !important;
}