/** @author Ronny Antes @copyright 2026 Ronny Antes - North-Addons @license North-Addons.de License <https://lizenz.north-addons.de/lizenz.html> */
.northDependencyCards { display:flex; flex-flow:row wrap; align-items:stretch; justify-content:flex-start; gap:14px; margin:12px 0; padding:0; list-style:none; min-width:0; max-width:100%; box-sizing:border-box; }
.northDependencyCard { flex:0 1 calc(var(--north-dependency-image-width,128px) + 24px); min-width:0; width:calc(var(--north-dependency-image-width,128px) + 24px); max-width:100%; box-sizing:border-box; border:1px solid var(--wcfContentBorder,rgba(128,128,128,.22)); border-radius:9px; overflow:hidden; background:var(--wcfContentBackground,rgba(128,128,128,.06)); }
.northDependencyCardLink { display:flex; flex-direction:column; align-items:center; gap:9px; height:100%; box-sizing:border-box; padding:11px; text-align:center; text-decoration:none; transition:background .15s ease; }
.northDependencyCardLink:hover,.northDependencyCardLink:focus-visible { background:var(--wcfButtonBackground,rgba(128,128,128,.10)); }
.northDependencyImage { display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; border-radius:5px; overflow:hidden; background:rgba(128,128,128,.08); }
.northDependencyImage img { display:block; width:100%; height:auto; max-width:100%; object-fit:contain; }
.northDependencyFallback { font-size:32px; opacity:.55; padding:14px; }
.northDependencyTitle { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; overflow-wrap:anywhere; font-weight:600; font-size:13px; line-height:1.4; }
.northDependencyPicker { position:relative;max-width:720px;margin-top:8px; }
.northDependencySuggestions { display:none; position:absolute; z-index:10000; top:100%; left:0; right:0; max-height:320px; overflow-y:auto; background:var(--wcfContentBackground,#fff); color:var(--wcfContentText,inherit); border:1px solid var(--wcfContentBorder,#ccc); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.2); }
.northDependencySuggestion { display:flex; align-items:center; gap:12px; padding:7px 10px; cursor:pointer; border-bottom:1px solid var(--wcfContentBorder,rgba(128,128,128,.15)); }
.northDependencySuggestion[aria-selected="true"],.northDependencySuggestion:hover { background:var(--wcfButtonBackground,rgba(128,128,128,.18)); }
.northDependencySuggestionImage { display:block; width:56px; height:auto; max-height:80px; object-fit:contain; flex:none; border-radius:4px; }
.northDependencySuggestionPlaceholder { display:flex;align-items:center;justify-content:center; width:56px;height:42px;flex:none;background:rgba(128,128,128,.1);border-radius:4px; }
.northDependencySelected { display:flex; flex-flow:row wrap; align-items:stretch; gap:10px;list-style:none;padding:0;margin:12px 0 0; }
.northDependencySelectedCard { flex:0 1 145px; box-sizing:border-box; display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;min-width:0;padding:9px;border:1px solid var(--wcfContentBorder,rgba(128,128,128,.2));border-radius:8px; }
.northDependencySelectedImage { display:block;max-width:100%;width:128px;height:auto;object-fit:contain;border-radius:5px; }
.northDependencySelectedTitle {overflow-wrap:anywhere; font-weight:600;}

.northDependencyCardsHorizontal .northDependencyCard { flex:0 1 calc(var(--north-dependency-image-width,128px) * 2 + 80px); width:calc(var(--north-dependency-image-width,128px) * 2 + 80px); }
.northDependencyCardsHorizontal .northDependencyCardLink { flex-direction:row; text-align:left; align-items:center; justify-content:flex-start; }
.northDependencyCardsHorizontal .northDependencyImage { flex:0 0 min(var(--north-dependency-image-width,128px), 45%); width:min(var(--north-dependency-image-width,128px), 45%); min-width:0; }
.northDependencyCardsHorizontal .northDependencyTitle { flex:1 1 0; min-width:0; -webkit-line-clamp:4; }
@media (max-width:480px) { .northDependencyCardsHorizontal .northDependencyCard { flex-basis:100%; width:100%; } }