:root {
    --primary-bg: #c12126;
    --primary-fg: #ffffff;

    --secondary-bg: #f3ca3e;
    --secondary-fg: ;

    --primary-btn-bg: #000000;
    --primary-btn-fg: #ffffff;
    --primary-btn-hover-bg: #f3ca3e;
    --primary-btn-hover-fg: ;

    --secondary-btn-bg: #c9c9c9;
    --secondary-btn-fg: ;
    --secondary-btn-hover-bg: #f3ca3e;
    --secondary-btn-hover-fg: ;
}

 .sep-bar, .how-it-works__chip, .accordion-button:not(.collapsed), .green-header, .dash-left, .vue_table .data:hover {
    color: var(--primary-fg) !important;
    background-color: var(--primary-bg) !important;
}

.btn-product-tab.active, .position-btn.active, .color-box.active, .radio-box-card.active, .status-box.is-selected {
    color: var(--primary-btn-fg) !important;
    background-color: var(--primary-btn-bg) !important;
}

.status-box.optional {
    color: var(--secondary-btn-fg) !important;
    background-color: var(--secondary-btn-bg) !important;
}

 .btn--primary, .circle-button, .btn-primary, .next-step-btn {
    background-color: var(--primary-btn-bg) !important;
    color: var(--primary-btn-fg)  !important;
    border-color: var(--primary-btn-bg) !important;
}

 .btn--primary:hover, .circle-button:hover, .btn-primary:hover, .next-step-btn:hover {
    background-color: var(--primary-btn-hover-bg) !important;
    color: var(--primary-btn-hover-fg)  !important;
     border-color: var(--primary-btn-hover-bg) !important;
}

 .btn--secondary {
     color: var(--secondary-btn-fg) !important;
     background-color: var(--secondary-btn-bg) !important;
     border-color: var(--secondary-btn-bg) !important;
}

 .btn--secondary:hover {
     color: var(--secondary-btn-hover-fg) !important;
     background-color: var(--secondary-btn-hover-bg) !important;
     border-color: var(--secondary-btn-hover-bg) !important;
}

.btn-info {
    color: var(--secondary-btn-fg) !important;
    background-color: var(--secondary-btn-bg) !important;
    border-color: var(--secondary-btn-bg) !important;
}

.btn-info:hover {
    color: var(--secondary-btn-hover-fg) !important;
    background-color: var(--secondary-btn-hover-bg) !important;
    border-color: var(--secondary-btn-hover-bg) !important;
}

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

.text-bullard, .dashboard-button .icon-container, .dashboard-button .text, .bullard-profile-card .text {
    color: var(--primary-bg) !important;
}

.spec-table tbody th {
    border-left: 4px solid var(--primary-bg) !important;
}

.bread-crumbs a:hover {
    color: var(--secondary-bg) !important;
}

.product-details-page .sticky-thumbnail .thumbnail-container img.active {
    border: 2px solid var(--primary-bg) !important;
}

.logo-upload-btn.active, .dashboard-button, .bullard-profile-card {
    border: 1px solid var(--primary-bg) !important;
    color: var(--primary-bg) !important;
}

.tabs-header .active {
    border-color: transparent var(--primary-bg) var(--primary-bg) !important;
}

.tools-btn {
    background-color: var(--primary-bg) !important;
    color: var(--primary-btn-fg)  !important;
    border-color: var(--primary-bg) !important;
}

.dashboard-button:hover {
    color: var(--primary-fg) !important;
    background-color: var(--primary-bg) !important;
}

.dashboard-button:hover .text, .dashboard-button:hover .icon-container {
    color: var(--primary-fg) !important;
}

input[type="checkbox"] {
    accent-color: var(--primary-bg) !important;
}