.ci {
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: 32px;
    vertical-align: middle;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.ci-sm {
    font-size: 24px;
}

.ci-md {
    font-size: 32px;
}

.ci-lg {
    font-size: 56px;
}

.ci-xl {
    font-size: 64px;
}

.ci-hover {
    transition: transform 0.4s;
}

.ci-hover:hover,
.tool-box ul li:hover .ci-hover {
    transform: scale(1.35);
}

.ci-edit { background-image: url("./icons/edit.png"); --ci-aspect-ratio: 100 / 100; }
.ci-delete { background-image: url("./icons/delete.png"); --ci-aspect-ratio: 100 / 100; }
.ci-home { background-image: url("./icons/home.png"); --ci-aspect-ratio: 512 / 512; }
.ci-activate { background-image: url("./icons/activate.png"); --ci-aspect-ratio: 100 / 100; }
.ci-deactivate { background-image: url("./icons/deactivate.png"); --ci-aspect-ratio: 100 / 100; }
.ci-login-as-user { background-image: url("./icons/login-as-user.png"); --ci-aspect-ratio: 100 / 100; }
.ci-reset-password { background-image: url("icons/reset-password.png"); --ci-aspect-ratio: 100 / 99; }

/* Toolbar */
.ci-add-document { background-image: url("./icons/add-document.png"); --ci-aspect-ratio: 72 / 72; }
.ci-add-supplier { background-image: url("./icons/add-supplier.png"); --ci-aspect-ratio: 75 / 75; }
.ci-report { background-image: url("./icons/report.png"); --ci-aspect-ratio: 75 / 75; }
.ci-setting { background-image: url("./icons/setting.png"); --ci-aspect-ratio: 73 / 73; }

/* Dashboard */
.ci-auto-renewal { background-image: url("./icons/auto-renewal.png"); --ci-aspect-ratio: 66 / 59; }
.ci-client { background-image: url("./icons/client.png"); --ci-aspect-ratio: 75 / 67; }
.ci-client-review { background-image: url("./icons/client-review.png"); --ci-aspect-ratio: 344 / 344; }
.ci-coi-expiration { background-image: url("./icons/coi-expiration.png"); --ci-aspect-ratio: 75 / 86; }
.ci-contract { background-image: url("./icons/contract.png"); --ci-aspect-ratio: 100 / 100; }
.ci-contract-renewed-tile { background-image: url("./icons/contract-renewed-tile.png"); --ci-aspect-ratio: 111 / 99; }
.ci-expiration { background-image: url("./icons/expiration.png"); --ci-aspect-ratio: 75 / 75; }
.ci-insurance { background-image: url("./icons/insurance.png"); --ci-aspect-ratio: 64 / 71; }
.ci-location { background-image: url("./icons/location.png"); --ci-aspect-ratio: 128 / 128; }
.ci-new-supplier { background-image: url("./icons/new-supplier.png"); --ci-aspect-ratio: 69 / 82; }
.ci-project-tile { background-image: url("./icons/project-tile.png"); --ci-aspect-ratio: 100 / 100; }
.ci-supplier-account { background-image: url("./icons/supplier-account.png"); --ci-aspect-ratio: 59 / 83; }
.ci-supplier-document { background-image: url("./icons/supplier-document.png"); --ci-aspect-ratio: 75 / 85; }
.ci-tracked-spend { background-image: url("./icons/tracked-spend.png"); --ci-aspect-ratio: 100 / 100; }

/* Contact */
.ci-address { background-image: url("./icons/address.png"); --ci-aspect-ratio: 200 / 200; }
.ci-contact { background-image: url("./icons/contact.png"); --ci-aspect-ratio: 512 / 512; }
.ci-email { background-image: url("./icons/email.png"); --ci-aspect-ratio: 512 / 512; }
.ci-phone { background-image: url("./icons/phone.png"); --ci-aspect-ratio: 512 / 512; }
.ci-support-request { background-image: url("./icons/support-request.png"); --ci-aspect-ratio: 512 / 512; }

/* Supplier and account pages */
.ci-add-category { background-image: url("./icons/add-category.png"); --ci-aspect-ratio: 104 / 76; }
.ci-add-employee { background-image: url("./icons/add-employee.png"); --ci-aspect-ratio: 126 / 74; }
.ci-client-users { background-image: url("./icons/client-users.png"); --ci-aspect-ratio: 512 / 512; }
.ci-coi-expiration-alert { background-image: url("./icons/coi-expiration-alert.png"); --ci-aspect-ratio: 512 / 512; }
.ci-contract-expiration { background-image: url("./icons/contract-expiration.png"); --ci-aspect-ratio: 512 / 512; }
.ci-contract-renewal { background-image: url("./icons/contract-renewal.png"); --ci-aspect-ratio: 512 / 512; }
.ci-employees { background-image: url("./icons/employees.png"); --ci-aspect-ratio: 159 / 151; }
.ci-password-reset { background-image: url("./icons/password-reset.png"); --ci-aspect-ratio: 100 / 99; }
.ci-sourcing-project { background-image: url("./icons/sourcing-project.png"); --ci-aspect-ratio: 128 / 128; }
.ci-supplier { background-image: url("./icons/supplier.png"); --ci-aspect-ratio: 512 / 512; }

/* Projects */
.ci-project-activity {
    background-image: url("./icons/project-activity.png"); --ci-aspect-ratio: 249 / 255;
    background-size: 82%;
}
.ci-project-activity-tile { background-image: url("./icons/project-activity-tile.png"); --ci-aspect-ratio: 128 / 128; }

/* Main content */
.ci-attach-coi { background-image: url("./icons/attach-coi.png"); --ci-aspect-ratio: 161 / 161; }
.ci-catalyst-activity { background-image: url("./icons/catalyst-activity.png"); --ci-aspect-ratio: 100 / 100; }
.ci-client-review-page { background-image: url("./icons/client-review-page.png"); --ci-aspect-ratio: 373 / 373; }
.ci-coi-email-request { background-image: url("./icons/coi-email-request.png"); --ci-aspect-ratio: 100 / 100; }
.ci-contract-coi { background-image: url("./icons/contract-coi.png"); --ci-aspect-ratio: 128 / 128; }
.ci-contracts { background-image: url("./icons/contracts.png"); --ci-aspect-ratio: 100 / 100; }
.ci-locations { background-image: url("./icons/locations.png"); --ci-aspect-ratio: 128 / 128; }
.ci-spend { background-image: url("./icons/spend.png"); --ci-aspect-ratio: 100 / 100; }
.ci-supplier-directory { background-image: url("./icons/supplier-directory.png"); --ci-aspect-ratio: 512 / 512; }

.ci-archive { background-image: url("./icons/archive.png"); --ci-aspect-ratio: 100 / 100; }
.ci-budget-spend { background-image: url("./icons/budget-spend.png"); --ci-aspect-ratio: 100 / 100; }
.ci-category { background-image: url("./icons/category.png"); --ci-aspect-ratio: 100 / 100; }
.ci-coi-blue { background-image: url("./icons/coi-blue.png"); --ci-aspect-ratio: 68 / 78; }
.ci-contract-renewed { background-image: url("./icons/contract-renewed.png"); --ci-aspect-ratio: 1282 / 1282; }
.ci-document { background-image: url("./icons/document.png"); --ci-aspect-ratio: 1200 / 1200; }
.ci-documents { background-image: url("./icons/documents.svg"); --ci-aspect-ratio: 1 / 1; }
.ci-expiration-email { background-image: url("./icons/expiration-email.png"); --ci-aspect-ratio: 100 / 102; }
.ci-expiring-category { background-image: url("./icons/expiring-category.png"); --ci-aspect-ratio: 512 / 512; }
.ci-new-supplier-blue { background-image: url("./icons/new-supplier-blue.png"); --ci-aspect-ratio: 507 / 492; }
.ci-notes { background-image: url("./icons/notes.png"); --ci-aspect-ratio: 100 / 100; }
.ci-password { background-image: url("./icons/password.png"); --ci-aspect-ratio: 512 / 512; }
.ci-project { background-image: url("./icons/project.png"); --ci-aspect-ratio: 257 / 258; }
.ci-renewal-email { background-image: url("./icons/renewal-email.png"); --ci-aspect-ratio: 100 / 103; }
.ci-restore { background-image: url("./icons/restore.png"); --ci-aspect-ratio: 100 / 100; }
.ci-site-dept { background-image: url("./icons/site-dept.png"); --ci-aspect-ratio: 512 / 512; }
.ci-supplier-unclassified { background-image: url("./icons/supplier-unclassified.png"); --ci-aspect-ratio: 1282 / 1282; }
.ci-view { background-image: url("./icons/view.png"); --ci-aspect-ratio: 100 / 100; }

/* Match the original breadcrumb image sizing and spacing. */
.ci.ci-breadcrumb {
    font-size: var(--ci-breadcrumb-size, 80px);
    height: auto;
    aspect-ratio: var(--ci-aspect-ratio, 1 / 1);
    margin-right: 10px !important;
}

.ci-breadcrumb-50 { --ci-breadcrumb-size: 50px; }
.ci-breadcrumb-70 { --ci-breadcrumb-size: 70px; }
.ci-breadcrumb-80 { --ci-breadcrumb-size: 80px; }

@media (max-width: 991px) {
    .ci.ci-breadcrumb {
        font-size: var(--ci-breadcrumb-size, 60px);
    }
}