<style> .app-container { border-color: #2e5aac !important; color: #2e5aac; font-size: MEDIUM; } .app-category { flex: 1; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .app-container .app-category { background-color: #e6ebf5; color: #1c3667; font-weight: 600; height: 20px; padding: 3px 8px; } .app-container .app-product-type { font-size: 11px; font-weight: 600; height: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-details-category-badge .app-type-badge { right: 2px !important; top: 0px !important; position: relative !important; } .diamond-icon-container { color: #C9C9CF; height: 4px; width: 4px; } @media screen and (max-width: 768px) { .app-container { font-size: small; } } @media screen and (max-width: 576px) { .app-container { font-size: x-small; } .app-container .app-category, .app-container .app-product-type { padding: 2px 4px; } } </style> <div class="app-container color-neutral-3 d-flex flex-wrap font-size-paragraph-small justify-content-between w-100"> <div class="app-details-category-badge d-flex"> <span class="app-type-badge theme d-flex align-items-center bg-neutral-8 border-radius-small mb-1 mr-2 px-3 rounded-lg" title="Theme"> Theme </span> <span class="align-items-center d-flex justify-content-between"> <span class="align-items-center d-flex diamond-icon-container justify-content-between mr-3"> <svg class="lexicon-icon lexicon-icon-diamond" role="presentation" ><use xlink:href="https://marketplace.liferay.com/o/classic-theme/images/clay/icons.svg#diamond" /></svg> </span> </span> <span class="app-category bg-neutral-8 border-radius-small mb-1 mr-2 px-3 rounded-lg" title="Experience Management"> Experience Management </span> <span class="app-category bg-neutral-8 border-radius-small mb-1 mr-2 px-3 rounded-lg" title="Extensibility and Integration"> Extensibility and Integration </span> </div> </div>