.rotate-90 {
    transform: rotate(90deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

.rotate-270 {
    transform: rotate(270deg);
}

.top-75 {
    top: 75% !important;
}

.form-label {
    color: black;
}

.page-title {
    color: black;
}

.btn-secondary {
    padding-right: 25px !important;
}

.btn-tertiary {
    padding-right: 25px !important;
}

.dropdown-ele-text {
    padding: 10px 15px;
    white-space: nowrap;
    color: #333;
    text-decoration: none;
    display: block;
}

/******************************************************
    Data Replace Images
********************************************************/
.form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url(/img/UIKit/check.svg);
}

.form-select {
    --bs-form-select-bg-img: url(/img/UIKit/select-chevron.svg);
}

    .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"], .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"] {
        --bs-form-select-bg-icon: url(/img/UIKit/invalid-input.svg) !important;
    }

    .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"], .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"] {
        --bs-form-select-bg-icon: url(/img/UIKit/valid-input.svg);
    }

.accordion {
    --bs-accordion-btn-icon: url(/img/UIKit/accordion-chevron.svg);
    --bs-accordion-btn-active-icon: url(/img/UIKit/accordion-chevron.svg);
}

.btn-close {
    --bs-btn-close-bg: url('/img/icon-close-black.svg');
}

.was-validated .form-control:invalid, .form-control.is-invalid {
    background-image: url(/img/UIKit/invalid-input.svg);
}

.was-validated .form-control:valid, .form-control.is-valid {
    background-image: url(/img/UIKit/valid-input.svg);
}

/*.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
    --bs-form-select-bg-icon: url(/img/UIKit/invalid-input.svg);
}*/
/******************************************************
    Wizard
********************************************************/
.wizardProgress .step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    cursor: pointer;
}

.wizardProgress .circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #ccc;
    background: #fff;
    position: relative;
    z-index: 2;
}

.wizardProgress .step.active .circle {
    width: 20px;
    height: 20px;
    border: 2px solid teal;
    background: #fff;
    margin-left: -3px;
}

.wizardProgress .step.completed .circle {
    background: teal;
    border-color: teal;
    margin-left: -1px;
}

.wizardProgress .step.completed .label {
    text-decoration: underline;
    color: teal;
}

.wizardProgress .label {
    font-size: 0.95rem;
}

/* === Desktop === */
@media (min-width: 992px) {
    .wizardProgress {
        flex-direction: column;
        position: relative;
        margin-left: 1rem;
        padding-left: 0.75rem;
    }

        .wizardProgress::before {
            content: '';
            position: absolute;
            top: calc(56px / 2);
            bottom: calc(56px / 2);
            left: 18px;
            width: 2px;
            background: #ccc;
            z-index: 0;
        }

        .wizardProgress .step {
            padding: 1.25rem 0;
        }
}

/* === Tablet === */
@media (min-width: 768px) and (max-width: 991px) {
    .wizardProgress {
        display: flex !important;
        justify-content: space-between;
        position: relative;
        padding: 2rem 1rem;
    }


        .wizardProgress::before {
            content: '';
            position: absolute;
            top: calc(50% - 1rem);
            left: calc(51% / 5);
            right: calc(52% / 5);
            height: 2px;
            background: #ccc;
            transform: translateY(-50%);
            z-index: 0;
        }



        .wizardProgress .step {
            flex-direction: column;
            align-items: center;
            flex: 1;
            text-align: center;
            gap: 0.4rem;
            z-index: 1;
        }

        .wizardProgress .circle {
            width: 20px;
            height: 20px;
        }

        .wizardProgress .step.active .circle {
            width: 24px;
            height: 24px;
        }

        .wizardProgress .label {
            font-size: 0.9rem;
            margin-top: 0.25rem;
        }
}

/* === Mobile === */
@media (max-width: 767px) {
    .wizardProgress {
        display: none !important;
    }

    .mobile-dots {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        margin: 1rem auto 0.5rem;
        width: 80%;
    }

        .mobile-dots::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background: #ccc;
            z-index: 0;
            transform: translateY(-50%);
        }

        .mobile-dots .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ccc;
            z-index: 1;
        }

            .mobile-dots .dot.active {
                width: 24px;
                height: 24px;
                background: #fff;
                border: 2px solid teal;
            }

            .mobile-dots .dot.completed {
                background: teal;
            }

    .mobile-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem 1rem;
    }

    .mobile-step-label {
        text-align: center;
        font-weight: bold;
    }

    .mobile-arrow {
        font-size: 1.5rem;
        color: teal;
        cursor: pointer;
    }
}


.summary-drawer {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    background: white;
    border-top: 2px solid #ccc;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    transition: bottom 0.3s ease-in-out;
    z-index: 1050;
    padding: 1rem;
}

    .summary-drawer.show {
        bottom: 0;
    }

.summary-toggle {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1100;
}

@media (min-width: 992px) {
    .summary-drawer, .summary-toggle, .mobile-nav, .mobile-dots {
        display: none !important;
    }
}

ol.list-display > li > span[data-bs-toggle='collapse']:after {
    content: url(/lib/customersolutions.uikit/dist/images/chevron-down.svg);
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle; /* Aligns the image with text */
}

ol.list-display > li > span[aria-expanded='true']:after {
    transform: rotate(180deg);
}


ol.list-display > span {
    text-decoration: underline;
    cursor: pointer;
}

ol.list-display li {
    list-style: none !important;
    margin: 3px 0;
}


ol.list-display li > label {
    font-size: .75rem;
    font-weight: 500;
    color: #5f5753;
    line-height: 1.5rem;
    display: block;
}

ol.list-display.list-pad-sm,
ul.list-display.list-pad-sm {
    padding-left: 1rem !important;
}

/******************************************************
    Icons
********************************************************/
.icon {
    width: 40px;
    height: 40px;
    background-size: 40px 40px !important;
    background: transparent;
    border: 0;
}

.icon-add-black {
    background-image: url(/img/UIKit/add-black.svg);
    background-repeat: no-repeat;
}

.icon-add-white {
    background-image: url(/img/UIKit/add-white.svg);
    background-repeat: no-repeat;
}

.icon-default-black {
    background-image: url(/img/UIKit/default-black.svg);
    background-repeat: no-repeat;
}

.icon-default-white {
    background-image: url(/img/UIKit/default-white.svg);
    background-repeat: no-repeat;
}

.icon-dual-chevron-down-black {
    background-image: url(/img/UIKit/dual-chevron-down-black.svg);
    background-repeat: no-repeat;
}

.icon-dual-chevron-down-white {
    background-image: url(/img/UIKit/dual-chevron-down-white.svg);
    background-repeat: no-repeat;
}

.icon-edit-black {
    background-image: url(/img/UIKit/edit-black.svg);
    background-repeat: no-repeat;
}

.icon-edit-white {
    background-image: url(/img/UIKit/edit-white.svg);
    background-repeat: no-repeat;
}

.icon-email-black {
    background-image: url(/img/UIKit/email-black.svg);
    background-repeat: no-repeat;
}

.icon-email-finished-icon {
    background-image: url(/img/UIKit/email-finished-icon.svg);
    background-repeat: no-repeat;
}

.icon-email-finished-white {
    background-image: url(/img/UIKit/email-finished-white.svg);
    background-repeat: no-repeat;
}

.icon-email-process-black {
    background-image: url(/img/UIKit/email-process-black.svg);
    background-repeat: no-repeat;
}

.icon-email-process-white {
    background-image: url(/img/UIKit/email-process-white.svg);
    background-repeat: no-repeat;
}

.icon-email-white {
    background-image: url(/img/UIKit/email-white.svg);
    background-repeat: no-repeat;
}

.icon-enabled-black {
    background-image: url(/img/UIKit/enabled-black.svg);
    background-repeat: no-repeat;
}

.icon-enabled-white {
    background-image: url(/img/UIKit/enabled-white.svg);
    background-repeat: no-repeat;
}

.icon-order-black {
    background-image: url(/img/UIKit/order-black.svg);
    background-repeat: no-repeat;
}

.icon-order-finished-black {
    background-image: url(/img/UIKit/order-finished-black.svg);
    background-repeat: no-repeat;
}

.icon-order-finished-white {
    background-image: url(/img/UIKit/order-finished-white.svg);
    background-repeat: no-repeat;
}

.icon-order-process-black {
    background-image: url(/img/UIKit/order-process-black.svg);
    background-repeat: no-repeat;
}

.icon-order-process-white {
    background-image: url(/img/UIKit/order-process-white.svg);
    background-repeat: no-repeat;
}

.icon-order-white {
    background-image: url(/img/UIKit/order-white.svg);
    background-repeat: no-repeat;
}

.icon-package-add-black {
    background-image: url(/img/UIKit/package-add-black.svg);
    background-repeat: no-repeat;
}

.icon-package-add-white {
    background-image: url(/img/UIKit/package-add-white.svg);
    background-repeat: no-repeat;
}

.icon-package-black {
    background-image: url(/img/UIKit/package-black.svg);
    background-repeat: no-repeat;
}

.icon-package-edit-black {
    background-image: url(/img/UIKit/package-edit-black.svg);
    background-repeat: no-repeat;
}

.icon-package-edit-white {
    background-image: url(/img/UIKit/package-edit-white.svg);
    background-repeat: no-repeat;
}

.icon-package-remove-black {
    background-image: url(/img/UIKit/package-remove-black.svg);
    background-repeat: no-repeat;
}

.icon-package-remove-white {
    background-image: url(/img/UIKit/package-remove-white.svg);
    background-repeat: no-repeat;
}

.icon-package-white {
    background-image: url(/img/UIKit/package-white.svg);
    background-repeat: no-repeat;
}

.icon-save-black {
    background-image: url(/img/UIKit/save-black.svg);
    background-repeat: no-repeat;
}

.icon-close-black {
    background-image: url(/img/icon-close-black.svg);
    background-repeat: no-repeat;
}
.icon-save-white {
    background-image: url(/img/UIKit/save-white.svg);
    background-repeat: no-repeat;
}

.icon-trash-black {
    background-image: url(/img/UIKit/trash-black.svg);
    background-repeat: no-repeat;
}

.icon-trash-white {
    background-image: url(/img/UIKit/trash-white.svg);
    background-repeat: no-repeat;
}

.icon-9dot {
    background-image: url(/lib/customersolutions.uikit/dist/images/9dot.svg);
    background-repeat: no-repeat;
}

.icon-button-spacing {
    background-image: url(/lib/customersolutions.uikit/dist/images/button-spacing.svg);
    background-repeat: no-repeat;
}

.icon-check-mark-icon {
    background-image: url(/lib/customersolutions.uikit/dist/images/check-mark-icon.svg);
    background-repeat: no-repeat;
}

.icon-chevron-down-link {
    background-image: url(/lib/customersolutions.uikit/dist/images/chevron-down-link.svg);
    background-repeat: no-repeat;
}

.icon-chevron-down-primary {
    background-image: url(/lib/customersolutions.uikit/dist/images/chevron-down-primary.svg);
    background-repeat: no-repeat;
}

.icon-chevron-down-white {
    background-image: url(/lib/customersolutions.uikit/dist/images/chevron-down-white.svg);
    background-repeat: no-repeat;
}

.icon-chevron-down {
    background-image: url(/lib/customersolutions.uikit/dist/images/chevron-down.svg);
    background-repeat: no-repeat;
}

.icon-close-icon-white {
    background-image: url(/lib/customersolutions.uikit/dist/images/close-icon-white.svg);
    background-repeat: no-repeat;
}

.icon-close-icon {
    background-image: url(/lib/customersolutions.uikit/dist/images/close-icon.svg);
    background-repeat: no-repeat;
}

.icon-cropped-swoop {
    background-image: url(/lib/customersolutions.uikit/dist/images/cropped-swoop.svg);
    background-repeat: no-repeat;
}

.icon-help {
    background-image: url(/lib/customersolutions.uikit/dist/images/help.svg);
    background-repeat: no-repeat;
}

.icon-icon-app-cva {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-app-cva.svg);
    background-repeat: no-repeat;
}

.icon-icon-app-cvdm {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-app-cvdm.svg);
    background-repeat: no-repeat;
}

.icon-icon-app-cvr {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-app-cvr.svg);
    background-repeat: no-repeat;
}

.icon-icon-app-cvs {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-app-cvs.svg);
    background-repeat: no-repeat;
}

.icon-icon-app-cvt {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-app-cvt.svg);
    background-repeat: no-repeat;
}

.icon-icon-app-pickup-manager {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-app-pickup-manager.svg);
    background-repeat: no-repeat;
}

.icon-icon-app-rating {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-app-rating.svg);
    background-repeat: no-repeat;
}

.icon-icon-checkbox-checked-white {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-checkbox-checked-white.svg);
    background-repeat: no-repeat;
}

.icon-icon-checkbox-checked {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-checkbox-checked.svg);
    background-repeat: no-repeat;
}

.icon-icon-checkbox {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-checkbox.svg);
    background-repeat: no-repeat;
}

.icon-icon-download {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-download.svg);
    background-repeat: no-repeat;
}

.icon-icon-iHub {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-iHub.svg);
    background-repeat: no-repeat;
}

.icon-icon-print {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-print.svg);
    background-repeat: no-repeat;
}

.icon-icon-radio-selected {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-radio-selected.svg);
    background-repeat: no-repeat;
}

.icon-icon-radio {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-radio.svg);
    background-repeat: no-repeat;
}

.icon-icon-switch-off {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-switch-off.svg);
    background-repeat: no-repeat;
}

.icon-icon-switch-on {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-switch-on.svg);
    background-repeat: no-repeat;
}

.icon-icon-thumbs-down {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-thumbs-down.svg);
    background-repeat: no-repeat;
}

.icon-icon-thumbs-up {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-thumbs-up.svg);
    background-repeat: no-repeat;
}

.icon-icon-ui-kit {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-ui-kit.svg);
    background-repeat: no-repeat;
}

.icon-icon-video {
    background-image: url(/lib/customersolutions.uikit/dist/images/icon-video.svg);
    background-repeat: no-repeat;
}

.icon-language {
    background-image: url(/lib/customersolutions.uikit/dist/images/language.svg);
    background-repeat: no-repeat;
}

.icon-left {
    background-image: url(/lib/customersolutions.uikit/dist/images/left.svg);
    background-repeat: no-repeat;
}

.icon-next {
    background-image: url(/lib/customersolutions.uikit/dist/images/next.svg);
    background-repeat: no-repeat;
}

.icon-not_found {
    background-image: url(/lib/customersolutions.uikit/dist/images/not_found.svg);
    background-repeat: no-repeat;
}

.icon-previous {
    background-image: url(/lib/customersolutions.uikit/dist/images/previous.svg);
    background-repeat: no-repeat;
}

.icon-profile {
    background-image: url(/lib/customersolutions.uikit/dist/images/profile.svg);
    background-repeat: no-repeat;
}

.icon-right {
    background-image: url(/lib/customersolutions.uikit/dist/images/right.svg);
    background-repeat: no-repeat;
}

.icon-search {
    background-image: url(/lib/customersolutions.uikit/dist/images/search.svg);
    background-repeat: no-repeat;
    width: 40px;
}

.icon-search3d {
    background-image: url(/lib/customersolutions.uikit/dist/images/search3d.svg);
    background-repeat: no-repeat;
}

.icon-settings {
    background-image: url(/lib/customersolutions.uikit/dist/images/settings.svg);
    background-repeat: no-repeat;
}

.icon-UPS_logo {
    background-image: url(/lib/customersolutions.uikit/dist/images/UPS_logo.svg);
    background-repeat: no-repeat;
}

.icon-x-icon {
    background-image: url(/lib/customersolutions.uikit/dist/images/x-icon.svg);
    background-repeat: no-repeat;
}

/*************************************
Table Hover Actions
***************************************/
table > thead > tr > th {
    background-color: #69422d !important;
    color: #ffffff !important;
    vertical-align: middle;
}

tr:hover > td > .icon-default-black {
    background-image: url(/img/UIKit/default-white.svg);
}

tr:hover > td > .icon-order-black {
    background-image: url(/img/UIKit/order-white.svg);
}

tr:hover > td > .icon-order-process-black {
    background-image: url(/img/UIKit/order-process-white.svg);
}

tr:hover > td > .icon-order-finished-black {
    background-image: url(/img/UIKit/order-finished-white.svg);
}

tr:hover > td > .icon-enabled-black {
    background-image: url(/img/UIKit/enabled-white.svg);
}

tr:hover > td > .icon-email-black {
    background-image: url(/img/UIKit/email-white.svg);
}

tr:hover > td > .icon-email-finished-icon {
    background-image: url(/img/UIKit/email-finished-white.svg);
}

tr:hover > td > .icon-email-process-black {
    background-image: url(/img/UIKit/email-process-white.svg);
}