.signal-bars .bar {
    width: 0.4rem;
    min-height: 33%;
    display: inline-block;
}

.low-bar .first-bar, .default-bar .first-bar, .dark .first-bar {
    height: 33%;
}

.medium-bar .second-bar, .high-bar .second-bar, .low-bar .second-bar, .default-bar .second-bar, .dark .second-bar {
    height: 66%;
}

.high-bar .third-bar, .medium-bar .third-bar, .low-bar .third-bar, .default-bar .third-bar, .dark .third-bar {
    height: 99%;
}

.completed .bar {
    background-color: rgb(14 131 255);
    border: thin solid rgb(128 182 240);
}

.dark-mode .completed .bar {
    background-color: rgb(14 131 255);
    border: thin solid rgb(14 131 255);
}

.dispatched .bar, .active .bar {
    background-color: rgb(52 195 1);
    border: thin solid rgb(164 228 141);
}

.dark-mode .dispatched .bar,.dark-mode .active .bar {
    background-color: rgb(52 195 1);
    border: thin solid rgb(52 195 1);
}

.scheduled .bar {
    background-color: rgb(200 135 9);
    border: thin solid rgb(214 187 134);
}

.dark .bar, .booked .bar {
    background-color: #000000;
    border: thin solid #000123;
}
.dark-mode .dark .bar, .dark-mode .booked .bar {
    background-color: rgb(239, 239, 239);
    border: thin solid #000123;
}


/*.booked .bar {
    background-color: #ffffff;
    border: thin solid #ffffff;
}*/

.low-bar:not(.completed,.scheduled,.dispatched, .dark, .booked, .active) .first-bar,
.low-bar .third-bar,
.low-bar .second-bar,
.medium-bar .third-bar,
.default-bar .bar {
    background-color: #f4f3f3;
    border: thin solid #f3f3f3;
}

.dark-mode .low-bar:not(.completed,.scheduled,.dispatched, .dark, .booked, .active) .first-bar,
.dark-mode .low-bar .third-bar,
.dark-mode .low-bar .second-bar,
.dark-mode .medium-bar .third-bar,
.dark-mode .default-bar .bar {
    background-color: rgb(42, 49, 59);
    border: thin solid rgb(42, 49, 59);
}


.dark-mode .active.low-bar .third-bar,
.dark-mode .active.low-bar .second-bar,
.dark-mode .active.medium-bar .third-bar,
.dark-mode .active.default-bar .bar {
    background-color: rgb(30, 68, 40);
    border: thin solid rgb(30, 68, 40);
}
.dark-mode .dispatched.low-bar .third-bar,
.dark-mode .dispatched.low-bar .second-bar,
.dark-mode .dispatched.medium-bar .third-bar,
.dark-mode .dispatched.default-bar .bar {
    background-color: rgb(30, 68, 40);
    border: thin solid rgb(30, 68, 40);
}

.dark-mode .scheduled.low-bar .third-bar,
.dark-mode .scheduled.low-bar .second-bar,
.dark-mode .scheduled.medium-bar .third-bar,
.dark-mode .scheduled.default-bar .bar {
    background-color: rgb(71, 51, 21);
    border: thin solid rgb(71, 51, 21);
}


.dark-mode .low-bar:not(.completed,.scheduled,.dispatched, .dark, .booked, .active) .first-bar,
.dark-mode .low-bar .third-bar,
.dark-mode .low-bar .second-bar,
.dark-mode .medium-bar .third-bar,
.dark-mode .default-bar .bar {
    background-color: rgb(42, 49, 59);
    border: thin solid rgb(42, 49, 59);
}


.dark-mode .completed.low-bar .third-bar,
.dark-mode .completed.low-bar .second-bar,
.dark-mode .completed.medium-bar .third-bar,
.dark-mode .completed.default-bar .bar
{
    background-color: rgb(11,61,119);
    border: thin solid rgb(11,61,119);
}

.i-save{
    color: var(--og-green-mid);
}