/* Centered and Styled Buttons on RMA pages */
.actions-toolbar {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    float: none !important;
    margin: 25px auto !important;
}

.actions-toolbar .primary {
    float: none !important;
    display: block !important;
}

/* Style the buttons to match the black buttons in login page */
button.action.primary,
button.action.save.primary,
.mst-rma-list__new-request,
.rma-control-buttons button,
.mst-rma-create__order-selector button.primary,
button[onclick*="rma/rma/new"],
td[data-th="RMA"] button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    padding: 0 36px !important;
    border-radius: 40px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 40px !important;
    background-color: #000000 !important;
    border: 1px solid #000000 !important;
    color: #ffffff !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

button.action.primary:hover,
button.action.save.primary:hover,
.mst-rma-list__new-request:hover,
.rma-control-buttons button:hover,
.mst-rma-create__order-selector button.primary:hover,
button[onclick*="rma/rma/new"]:hover,
td[data-th="RMA"] button:hover {
    background-color: var(--thim-primary-color, #f47900) !important;
    border-color: var(--thim-primary-color, #f47900) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}



/* Progress Bar horizontal layout */
.opc-progress-bar {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 800px !important;
    margin: 40px auto !important;
    padding: 0 !important;
    list-style: none !important;
    position: relative !important;
}

.opc-progress-bar-item {
    flex: 1 !important;
    position: relative !important;
    text-align: center !important;
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

/* Connector line styling */
.opc-progress-bar-item::before {
    content: "" !important;
    position: absolute !important;
    top: 15px !important; /* Position it at the vertical center of the circles */
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: #e5e5e5 !important;
    z-index: 1 !important;
}

/* Adjust line for first and last items */
.opc-progress-bar-item:first-child::before {
    left: 50% !important;
    width: 50% !important;
}

.opc-progress-bar-item:last-child::before {
    width: 50% !important;
}

/* Active steps have orange connector line */
.opc-progress-bar-item._active::before {
    background: var(--thim-primary-color, #f47900) !important;
}

/* Position circles and text */
.opc-progress-bar-item > span {
    display: block !important;
    padding-top: 45px !important;
    color: #666 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    position: relative !important;
}

.opc-progress-bar-item._active > span {
    color: #333 !important;
    font-weight: 600 !important;
}

/* Adjust circles to align with connector line and overlay z-index */
.opc-progress-bar-item > span::before,
.opc-progress-bar-item > span::after {
    z-index: 2 !important;
    top: 0 !important;
}

/* Progress Bar: Remove step counter "1" from inactive/uncompleted steps */
.opc-progress-bar-item:not(._active):not(._complete) > span::after {
    content: "" !important;
}
.opc-progress-bar-item > span:after{margin-top: 6px;}

/* Homepage Popup Close Icon styling */
#bio_ep_close,
#bio_ep_close img {
    filter: brightness(0) !important;
    color: #000000 !important;
}