.sw-flow-in {
  display: flow-root;
}
.sw-flow.is-anim {
  overflow: hidden;
  transition: height .34s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .sw-flow.is-anim {
    transition: none;
  }
}
.mp-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}
.mp-head-row .mp-sources {
  margin-top: 0;
}
#modpack-section .mc-msg:empty,
#modpack-section .mc-chips:empty,
.mp-found:not(:has(.mc-result, .mc-msg:not(:empty))),
#modpack-section:has(.mp-found .mc-result, .mp-found .mc-msg:not(:empty)) #modpack-popular-box {
  display: none;
}
#modpack-section .mp-popular {
  margin-top: 14px;
}
.mp-popular {
  display: flex;
  flex-direction: column;
}
.mp-popular > .mp-popular-head {
  order: -2;
}
.mp-popular > .mc-msg {
  order: -1;
}
.mp-popular:has(.mp-loading) > .mc-results {
  display: none;
}
@media (max-width: 560px) {
  .mc-result {
    flex-wrap: wrap;
  }
  .mc-result .mr-body {
    flex: 1 1 calc(100% - 38px);
  }
  .mc-result select {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding: 8px;
  }
  .mc-result .mr-name {
    overflow-wrap: anywhere;
  }
}
.mc-result img:not([src]) {
  background: rgba(124, 58, 237, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E") center / 16px no-repeat;
}
@media (min-width: 561px) {
  .mc-result select {
    flex: 0 0 130px;
    width: 130px;
    max-width: 130px;
  }
}
.csel.csel-mp {
  margin-top: 0;
  flex: 0 0 140px;
  width: 140px;
}
.csel-mp .csel-btn {
  width: 100%;
  justify-content: space-between;
  padding: 7px 10px 7px 14px;
  font-size: .82rem;
}
.csel-mp .csel-btn-t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .85rem;
  font-weight: 700;
}
.csel-mp .csel-menu {
  left: auto;
  right: 0;
  min-width: 220px;
  max-height: 260px;
  overflow-y: auto;
}
@media (max-width: 560px) {
  .csel.csel-mp {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .csel-mp .csel-menu {
    left: 0;
    right: auto;
    min-width: 100%;
  }
}