:root {
    --tblr-primary: #f97316;
    --tblr-primary-rgb: 249, 115, 22;
}

body {
    background: #f6f7f9;
}

.brand-mark {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 3px;
    background: #f97316;
    margin-right: .5rem;
    vertical-align: .02em;
}

.btn-primary {
    --tblr-btn-bg: #f97316;
    --tblr-btn-border-color: #f97316;
    --tblr-btn-hover-bg: #ea580c;
    --tblr-btn-hover-border-color: #ea580c;
}

.text-orange {
    color: #f97316;
}

.card {
    border-radius: 8px;
}

.modal-content {
    border-radius: 8px;
}

.chart-lg {
    min-height: 280px;
}

.user-actions-col {
    width: 14rem;
}

.user-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
    white-space: nowrap;
}

.user-actions form {
    display: inline-flex;
    margin: 0;
}

.help-steps {
    list-style: none;
    counter-reset: help-step;
    margin: 0;
    padding: 0;
}

.help-steps > li {
    counter-increment: help-step;
    position: relative;
    padding: 0 0 1.25rem 3rem;
}

.help-steps > li::before {
    content: counter(help-step);
    position: absolute;
    top: -.15rem;
    left: 0;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    background: #f97316;
    color: #fff;
    font-weight: 700;
}

.help-steps > li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 2rem;
    bottom: .15rem;
    left: .95rem;
    border-left: 2px solid #e6e7e9;
}

.help-steps p {
    margin: .35rem 0 0;
    color: #626976;
}

.help-example {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
    padding: .75rem;
    border: 1px solid #e6e7e9;
    border-radius: 8px;
    background: #fff;
}

.help-example > i {
    font-size: 1.5rem;
}

.help-example-positive > i,
.help-example-positive strong {
    color: #2fb344;
}

.help-example-negative > i,
.help-example-negative strong {
    color: #d63939;
}

.help-guide .alert {
    border-radius: 8px;
}

@media (max-width: 575.98px) {
    .user-actions {
        gap: .2rem;
    }

    .help-steps > li {
        padding-left: 2.75rem;
    }
}