/* === SOURCE: css/239-v5600-ap-calculator-import-archetype-style.css === */

#diyPanel .diy-attribute-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex:0 0 auto;
}

#diyPanel .diy-import-archetype-btn{
  width:104px;
  height:34px;
  min-height:34px;
  padding:0 9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(167,180,191,.22);
  border-radius:9px;
  background:
    linear-gradient(180deg,rgba(137,153,166,.09),rgba(92,106,119,.035));
  color:#c7d0d7;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 3px 10px rgba(0,0,0,.12);
  cursor:pointer;
  transition:border-color .14s ease,background .14s ease,transform .14s ease,box-shadow .14s ease;
}

#diyPanel .diy-import-archetype-btn span{
  font-size:11.5px;
  font-weight:790;
  line-height:1;
  color:#cbd3da;
}

#diyPanel .diy-import-archetype-btn small{
  margin-top:3px;
  font-size:8px;
  line-height:1;
  font-weight:650;
  color:#707d88;
}

#diyPanel .diy-import-archetype-btn:hover{
  border-color:rgba(196,207,216,.38);
  background:
    linear-gradient(180deg,rgba(153,169,182,.135),rgba(103,118,131,.052));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 5px 14px rgba(0,0,0,.15);
  transform:translateY(-1px);
}

#diyPanel .diy-import-archetype-btn:active{
  transform:translateY(0);
}

@media(max-width:760px){
  #diyPanel .diy-attribute-head-actions{gap:5px}
  #diyPanel .diy-import-archetype-btn{
    width:96px;
    height:34px;
  }
}

/* === SOURCE: css/240-v5601-ap-calculator-archetype-picker-style.css === */

#diyPanel .diy-import-archetype-wrap{
  position:relative;
  flex:0 0 auto;
}

#diyPanel .diy-import-archetype-menu{
  position:absolute;
  z-index:80;
  top:calc(100% + 7px);
  right:0;
  width:286px;
  max-height:390px;
  overflow:auto;
  padding:7px;
  border:1px solid rgba(169,183,195,.16);
  border-radius:12px;
  background:rgba(10,15,20,.985);
  box-shadow:0 18px 42px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.025);
  scrollbar-width:thin;
}

#diyPanel .diy-import-archetype-menu[hidden]{
  display:none!important;
}

#diyPanel .diy-import-archetype-option{
  width:100%;
  min-height:47px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:6px 7px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .13s ease,border-color .13s ease;
}

#diyPanel .diy-import-archetype-option:hover{
  border-color:rgba(177,191,202,.14);
  background:rgba(255,255,255,.035);
}

#diyPanel .diy-import-archetype-option.is-current{
  border-color:rgba(211,177,91,.18);
  background:rgba(211,177,91,.035);
}

#diyPanel .diy-import-archetype-option img,
#diyPanel .diy-import-archetype-logo-placeholder{
  width:30px;
  height:30px;
  object-fit:contain;
  display:block;
}

#diyPanel .diy-import-archetype-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

#diyPanel .diy-import-archetype-copy strong{
  color:#d9e0e6;
  font-size:10.5px;
  font-weight:760;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#diyPanel .diy-import-archetype-copy small{
  color:#65717c;
  font-size:7.5px;
  font-weight:650;
  letter-spacing:.035em;
}

#diyPanel .diy-import-archetype-state{
  min-width:32px;
  padding:3px 5px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:999px;
  color:#798590;
  font-size:7px;
  font-weight:800;
  text-align:center;
}

#diyPanel .diy-import-archetype-option.is-current .diy-import-archetype-state{
  color:#d8bd70;
  border-color:rgba(211,177,91,.20);
  background:rgba(211,177,91,.04);
}

@media(max-width:760px){
  #diyPanel .diy-import-archetype-menu{
    width:min(286px,86vw);
    right:0;
  }
}