.nbap .time-slot {
    cursor: pointer;
}

    .nbap .time-slot:hover,
    .nbap .time-slot.active {
        border-color: #000 !important;
        color: #fff !important;
        background-color: green;
        position: relative;
    }

        .nbap .time-slot:hover .text-bg-secondary,
        .nbap .time-slot.active .text-bg-secondary,
        .nbap .time-slot:hover .text-danger,
        .nbap .time-slot.active .text-danger,
        .nbap .time-slot:hover .text-muted,
        .nbap .time-slot.active .text-muted {
            background-color: green !important;
            color: #fff !important;
        }

        .nbap .time-slot.active::before {
            color: #fff !important;
        }

        .nbap .time-slot.active::before {
            content: "\f26a";
            display: inline-block;
            font-family: bootstrap-icons !important;
            font-style: normal;
            font-weight: 400 !important;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            vertical-align: -.125em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            position: absolute;
            right: 10px;
            top: 12px;
            color: #000;
        }

/*************************************************************/

.nbap .circle {
    width: 40px;
    height: 40px;
    line-height: 1.8;
    background: #e0e0e0;
    border-radius: 50%;
    display: inline-block;
    color: #aaa;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 8px;
    transition: all 0.2s;
    border: 2px solid #e0e0e0;
}

    .nbap .circle.active {
        background: #0d6efd;
        color: #fff;
        border-color: #0d6efd;
        box-shadow: 0 0 0 2px #b3d4fc;
    }

    .nbap .circle.completed {
        background: #198754;
        color: #fff;
        border-color: #198754;
    }

.nbap .bar {
    height: 4px;
    background: #e0e0e0;
    flex: 1 1 0%;
    margin: 0 4px;
    border-radius: 2px;
    align-self: center;
}

.nbap .step-label {
    margin-top: 4px;
    font-size: 0.95rem;
    color: #888;
}

.nbap .active + .step-label,
.nbap .circle.active ~ .step-label {
    font-weight: 600;
    color: #0d6efd;
}