/* Roblox 2020 Avatar Editor look (.av20, added by avatar2020.js on top of avatar-editor.css). */
.ae-header h1{font-weight:400}
.ae-get-more{font-size:14px;color:var(--muted)}
.ae-get-more-button{font-size:15px;padding:8px 18px}
.av20.avatar-editor{grid-template-columns:300px minmax(0,1fr);gap:20px}

/* Avatar panel */
.av20 .ae-stage{background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.18)}
body.dark .av20 .ae-stage{box-shadow:none}
.av20 .avatar-view{height:330px;background:transparent}
.av20 #preview-hint{display:none}
.av20 .av20-switch{right:8px;bottom:8px;gap:0;background:#656668;border-radius:3px;overflow:hidden}
.av20 .av20-switch button{height:26px;min-width:34px;padding:0 8px;font-size:13px;font-weight:bold;color:#e3e3e3;background:transparent;border:0;cursor:pointer}
.av20 .av20-switch button:hover{color:#fff;background:rgba(255,255,255,.12)}
.av20 .av20-switch button.selected{color:#fff;background:#393b3d}
.av20-redraw{margin:8px 0 0;font-size:12px;color:var(--muted)}
.av20-redraw-link{padding:0;font:inherit;font-weight:600;color:#0074bd;background:none;border:0;cursor:pointer}
.av20-redraw-link:hover{text-decoration:underline}
body.dark .av20-redraw-link{color:#4ebeff}

/* Menu bar with drop-downs */
.av20-menu{display:flex;background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.18);position:relative;z-index:5}
body.dark .av20-menu{box-shadow:none}
.av20-tab{position:relative;flex:1}
.av20-tab>a{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 8px;font-size:16px;color:inherit;text-decoration:none;border-bottom:3px solid transparent}
.av20-tab>a:hover{text-decoration:none;color:#00a2ff}
.av20-tab.selected>a{border-bottom-color:#00a2ff}
.av20-caret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.av20-drop{display:none;position:absolute;top:100%;left:0;min-width:100%;padding:6px 0;background:var(--surface);box-shadow:0 3px 10px rgba(0,0,0,.25);border-radius:0 0 3px 3px}
.av20-tab:hover .av20-drop,.av20-tab:focus-within .av20-drop{display:block}
.av20-drop a{display:block;padding:7px 16px;font-size:14px;color:inherit;white-space:nowrap;text-decoration:none}
.av20-drop a:hover,.av20-drop a:focus{background:rgba(0,0,0,.06);text-decoration:none;outline:0}
body.dark .av20-drop a:hover,body.dark .av20-drop a:focus{background:rgba(255,255,255,.08)}
.av20-drop a.selected{color:#0074bd;font-weight:600}
body.dark .av20-drop a.selected{color:#4ebeff}

/* Breadcrumb row with the search box */
.av20 .wardrobe-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}
.av20 .ae-breadcrumb{font-size:16px;font-weight:500}
.av20 .ae-breadcrumb span:last-child{color:var(--muted);font-weight:400}
.av20 .wardrobe-heading .ae-search{margin:0}
.av20 .wardrobe-heading .ae-search input{width:220px;height:30px;font-size:13px}

/* Item cards: white, name under the picture, green corner with a check on what you wear */
.av20 .avatar-items{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.av20 .wearable-card{border:1px solid #e3e3e3;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.av20 .wearable-card h2{font-size:13px;padding:6px 7px}
.av20 .wearable-card.equipped{border:2px solid #02b757}
.av20 .wearable-card.equipped::before{content:'';position:absolute;top:3px;right:3px;width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);z-index:2;pointer-events:none}
.av20 .wearable-card.equipped::after{border-width:0 28px 28px 0}
.av20 .outfit-note{display:none}
.av20 .body-customization{background:var(--surface);padding:14px 16px;box-shadow:0 1px 4px rgba(0,0,0,.18)}
body.dark .av20 .body-customization{box-shadow:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media(max-width:900px){.av20.avatar-editor{grid-template-columns:240px minmax(0,1fr)}.av20-tab>a{font-size:14px}}
@media(max-width:700px){.av20.avatar-editor{grid-template-columns:1fr}.av20-menu{overflow-x:auto}.av20-tab{flex:none}.av20-tab>a{padding:0 12px}.av20-drop{position:fixed;top:auto;left:16px;right:16px}.av20 .wardrobe-heading{flex-wrap:wrap}.av20 .wardrobe-heading .ae-search input{width:100%}}