:root {
    --sm-light-green: rgba(0, 130, 0, 0.70);
    --sm-dark-green: rgba(0, 130, 0, 1);
    --sm-light-red: rgba(255, 0, 0, 0.7);
    --sm-dark-red: rgba(255, 0, 0, 1);
    --sm-light-orange: rgba(255, 165, 0, 0.30);
    --sm-dark-orange:  rgba(255, 165, 0, 0.80);
    --sm-dark-grey: rgba(133, 135, 150, 1);
    --sm-light-grey: rgba(133, 135, 150, 0.5);
}

.sm-bg-primary {
    background-color: var(--sm-light-green);
}

.btn-secondary {
    background-color: var(--sm-dark-grey) !important;
}

.sm-bg-pause {
    background-color: var(--sm-dark-orange);
    color: #fff;
}

.btn-danger {
    color: white !important;
    background-color: var(--sm-light-red) !important;
    border-color: var(--sm-light-red) !important;
}

.sm-text-primary {
    color: var(--sm-light-green);
}

.sm-text-secondary {
    color: var(--sm-light-grey );
}

.sm-text-danger {
    color: var(--sm-dark-red);
}

.sm-text-orange {
    color: var(--sm-dark-orange);
}