body { background: #fff; font-family: Helvetica, Arial, sans-serif; font-size: .8rem; height: 20.8rem; margin: 0; overflow: hidden; width: 30rem; } .header { align-items: center; background: linear-gradient(160deg, #32067c, #150233); height: 4rem; display: flex; } .header__link:focus { outline: none; } .header__logo { display: inline-block; margin: .2rem 0 0 1.5rem; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1.0, 1.0); transform: translateZ(0); height: 2rem; } .container { height: 15.8rem; overflow-y: auto; padding: 1rem 1.5rem 0rem 1.5rem; } .detected { columns: 2; column-gap: 1.5rem; line-height: 1.4rem; } .detected__category { page-break-inside: avoid; break-inside: avoid-column; padding-bottom: 1rem; } .detected__category-name { border-bottom: 1px solid #dbdbdb; display: block; margin-bottom: .5rem; } .detected__category-link { color: #4608ad; font-weight: bold; line-height: 2rem; text-decoration: none; } .detected__category-link:hover { color: #4a4a4a; } .detected__category-pin-wrapper { margin-left: .2rem; } .detected__category-pin { cursor: pointer; display: none; height: 16px; margin-left: .2rem; width: 16px; vertical-align: middle; } .detected__category:hover .detected__category-pin--inactive { display: inline-block; } .detected__category-pin-wrapper--active .detected__category-pin--inactive, .detected__category-pin-wrapper:hover .detected__category-pin--inactive { display: none !important; } .detected__category-pin-wrapper--active .detected__category-pin--active, .detected__category-pin-wrapper:hover .detected__category-pin--active { display: inline-block; } .detected__app { color: #4a4a4a; display: block; line-height: 1.7rem; text-decoration: none; } .detected__app:focus { display: block; outline: 0; } .detected__app-icon { display: inline-block; height: 16px; margin-right: .5rem; vertical-align: -.2rem; width: 16px; } .detected__app-name { } .detected__app-version, .detected__app-confidence { background: #eee; border-radius: 3px; font-size: .7rem; margin-left: .3rem; padding: .1rem .2rem; } .detected__app:hover .detected__app-name { border-bottom: 1px solid #4a4a4a; } .detected__app:hover .detected__app-version { border-bottom: 1px solid white; } .detected__app:hover .detected__app-confidence { border-bottom: 1px solid white; } .detected-app { padding: 7px 0; } .detected-app:first-child { padding-top: 0; } .detected-app:last-child { border: none; padding-bottom: 0; } .empty { display: flex; height: 14.5rem; align-items: center; justify-content: center; } .empty__text { }