.bg-primary {
    background-color: var(--primary-color) !important;
}

:root {
    --primary-color: #0C0931;
    --primary-text-color: #FFFFFF;
    --active-color: #4C64BC;
    --active-text-color: #FFFFFF;
}

.btn-outline-primary {
    color: var(--active-color) !important;
    background-color: transparent;
    border-color: var(--active-color) !important;
}

.btn-outline-primary:hover {
    color: var(--active-text-color) !important;
    background-color: var(--active-color) !important;
}

.btn-primary, .step-progress .completed .step-circle {
    background-color:  var(--primary-color) !important;
    border-color:  var(--primary-color) !important;
    color: var(--primary-text-color) !important;
    transition: filter 0.2s ease;
}

.btn-primary:hover {
    filter: brightness(0.9) !important;
}

.step-progress .active .step-circle {
    background-color:  var(--active-color) !important;
    color: var(--active-text-color) !important;
}

.step-progress .active .step-label {
    color: var(--active-color) !important;
}

.step-item::after {
    color: var(--active-color) !important;
}

#sidebar,.step-item.completed::after {
    background-color:  var(--primary-color) !important;
}

.step-progress .completed .step-label{
    color: var(--primary-color) !important;
}

.list-group-item, #logOut {
    color: var(--primary-text-color) !important;
    background-color: transparent !important;
}

.list-group-item-active {
    background-color: var(--active-color) !important;
    color: var(--active-text-color) !important;
}

.progress {
    border: 1px solid var(--active-color) !important;
}

#usage-progress-section {
    color: var(--primary-text-color) !important;
}

.progress-bar {
    background-color: var(--active-color) !important;
}

.lds-ripple .lds-pos {
    border: 2px solid var(--primary-color) !important;
}

.choice-card:hover{
    border-color: var(--primary-color) !important;
}
.choice-card .icon-wrapper {
    color: var(--primary-color) !important;
}

.choice-card:hover .icon-wrapper{
    background-color: var(--primary-color) !important;
    color: var(--active-text-color) !important;
}

#image-dropzone:hover, #image-dropzone.drag-over {
    border-color: var(--primary-color) !important;
}

a {
    color: var(--primary-color) !important;
}

.form-control:focus {
    border-color: var(--primary-color) !important;
}

.page-link.active, .active > .page-link {
    background-color: var(--active-color) !important;
    color: var(--active-text-color) !important;
    border-color: var(--active-text-color) !important;
}