#wrap {
  --page: #f3f5f6; --box: #ffffff; --line: #d4d6d5; --soft: #eaeeef; --dark: #27303a; --dark-line: #2b2f34;
  --dark-hi: #5d6977; --text: #515151; --muted: #828485; --green: #8cc63f; --green-dark: #70a425;
}
#wrap, #wrap * { box-sizing: border-box; }
#wrap .opt-selector h3, #wrap .avatar-preview-content h3 { font-weight: 700; color: var(--text); margin: 0 0 5px; font-size: 14px; }
#wrap #options-top, #wrap #options-bottom { display: flex; flex-wrap: wrap; }
#wrap .widget { margin: 10px; padding: 0; min-width: 250px; flex-grow: 1; background: var(--box); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
#wrap .widgettitle { margin: 0; padding: 10px 14px; background: var(--soft); border-bottom: 1px solid var(--line); box-shadow: inset 0 3px 0 0 #fff, inset 0 -3px rgb(0 0 0 / 5%); }
#wrap .avatar-preview { flex: 0 0 330px; max-width: 350px; }
#wrap .generator-closet { flex: 0.63 1 0%; }
#wrap .generator-palette { flex: 0.5 1; display: block; height: auto; }
#wrap .widget { height: auto; }
#wrap .generator-options { flex: 1 1 0%; }
#wrap .avatar-preview-content { padding: 18px 8px 8px 8px; }
#wrap #clothes, #wrap #colors, #wrap #colors2, #wrap .options-container, #wrap #avatar-generator, #wrap .buttonsund, #wrap #hotels, #wrap #main-nav, #wrap #sub-nav, #wrap #clothes img, #wrap #avatar-generator img { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
#wrap #avatar-generator { position: relative; width: 315px; max-width: 100%; height: 302px; margin: -18px auto 0 auto; }
#wrap #stand { position: absolute; left: 50%; transform: translateX(-50%); image-rendering: pixelated; }
#wrap #myHabbo { position: absolute; image-rendering: pixelated; }
#wrap #busy { position: absolute; top: 4px; right: 6px; font-size: 11px; color: var(--muted); display: none; }
#wrap #head-left, #wrap #head-right, #wrap #body-left, #wrap #body-right { background-repeat: no-repeat; position: absolute; cursor: pointer; transition: 0.3s; }
#wrap #head-left { background-image: url(look_editor_assets/media/icon_turn_left_s.png); width: 22px; height: 22px; left: 30px; top: 110px; }
#wrap #head-right { background-image: url(look_editor_assets/media/icon_turn_right_s.png); width: 22px; height: 22px; right: 30px; top: 110px; }
#wrap #body-left { background-image: url(look_editor_assets/media/icon_turn_left_l.png); width: 62px; height: 58px; left: 18px; top: 165px; }
#wrap #body-right { background-image: url(look_editor_assets/media/icon_turn_right_l.png); width: 62px; height: 58px; right: -7px; top: 165px; }
@keyframes moveleft { 0% { transform: translateX(0); opacity: .7 } 100% { transform: translateX(-0.4em); opacity: 1 } }
@keyframes moveright { 0% { transform: translateX(0); opacity: .7 } 100% { transform: translateX(0.4em); opacity: 1 } }
#wrap #head-left:hover, #wrap #body-left:hover { filter: brightness(130%); animation: moveleft .6s infinite alternate ease-in-out; }
#wrap #head-right:hover, #wrap #body-right:hover { filter: brightness(130%); animation: moveright .6s infinite alternate cubic-bezier(.4, 0, 1, 1); }
#wrap #head-left:active, #wrap #head-right:active, #wrap #body-left:active, #wrap #body-right:active { filter: brightness(70%); }
#wrap .buttonsund { display: flex; gap: 14px; margin: 0 0 14px; justify-content: center; }
#wrap .round-button { position: static; top: auto; left: auto; right: auto; width: 75px; height: 45px; border-radius: 40px; background-color: var(--green); background-repeat: no-repeat; background-position: center; cursor: pointer; border: 0;
  box-shadow: inset 0 3px rgb(255 255 255 / 30%), inset 0 -3px rgb(0 0 0 / 5%), 0 1px 0 1px var(--green-dark); }
#wrap .round-button:hover { filter: brightness(105%); }
#wrap .round-button:active { filter: brightness(90%); }
#wrap #copy-url { background-image: url(look_editor_assets/media/copy_url_look.png); }
#wrap #download { background-image: url(look_editor_assets/media/download_icon.png); }
#wrap #randomize { background-image: url(look_editor_assets/media/random_look.png); }
#wrap .opt-selector-box, #wrap .opt-selector-box-flag { background-color: #5d697712; border-radius: 4px; display: flex; padding: 5px; flex-wrap: wrap; }
#wrap .opt-selector-box-flag { justify-content: space-between; align-items: center; }
#wrap .opt-selector-box > div, #wrap .opt-selector-box-flag > div { background-repeat: no-repeat; background-position: center; cursor: pointer; box-shadow: inset 0 3px 0 0 #ffffffa1, inset 0 -3px rgb(0 0 0 / 5%);
  background-color: var(--soft); border: 1px solid var(--line); border-radius: 5px; margin: 4px; overflow: hidden; flex-grow: 1; text-align: center; color: var(--muted); transition: .15s linear; }
#wrap .opt-selector-box > div:hover, #wrap .opt-selector-box-flag > div:hover { filter: brightness(103%); }
#wrap .opt-selector-box > div.active, #wrap .opt-selector-box-flag > div.active, #wrap .opt-selector-box > div:active {
  background-color: var(--dark); box-shadow: inset 0 3px 0 0 var(--dark-hi), inset 0 -3px rgb(0 0 0 / 35%); color: #fff; border: 1px solid var(--dark-line); }
#wrap .hotel-opt { width: 32px; height: 25px; margin: 3px !important; flex-grow: 0 !important; flex-basis: calc(20% - 6px); }
#wrap .search-row { display: flex; gap: 6px; }
#wrap .search-field { position: relative; flex: 1; min-width: 0; }
#wrap #import-habbo-name { width: 100%; height: 44px; padding: 8px 8px 8px 50px; border: 1px solid var(--line); border-radius: 5px; font: inherit; color: var(--text); }
#wrap .travy_search { background-image: url(look_editor_assets/media/travy_search.png); width: 30px; height: 30px; background-position: -9px 2px; background-repeat: no-repeat; overflow: hidden;
  background-color: #e7e7e7; box-shadow: 0 0px 0 2px rgb(0 0 0 / 10%), inset 0 4px rgb(255 255 255 / 30%), inset 0 -2px rgb(0 0 0 / 10%); border: 1px solid #ffffff; border-radius: 50%;
  position: absolute; left: 10px; top: 7px; }
#wrap #import-go { padding: 0 14px; border: 1px solid var(--dark-line); border-radius: 5px; background: var(--dark); color: #fff; font-weight: 700; cursor: pointer; box-shadow: inset 0 3px 0 0 var(--dark-hi); }
#wrap .main-navigation ul, #wrap .sub-navigation ul { list-style: none; margin: 0; padding: 0; }
#wrap .main-navigation li, #wrap .sub-navigation li { list-style: none; margin: 0; padding: 0; }
#wrap .main-navigation li::before, #wrap .sub-navigation li::before { content: none; }
#wrap .main-navigation ul { display: flex; height: 40px; border-bottom: 1px solid var(--line); background: var(--soft); box-shadow: inset 0 3px 0 0 #fff, inset 0 -3px rgb(0 0 0 / 5%); }
#wrap .main-navigation li { height: 40px; flex: 1 1; transition: .15s linear; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#wrap .main-navigation li:hover { box-shadow: inset 0 3px 0 0 #fff, inset 0 -5px rgb(0 0 0 / 5%); filter: brightness(102%); }
#wrap .main-navigation li.active { background: var(--dark); box-shadow: inset 0 3px 0 0 var(--dark-hi), inset 0 -5px rgb(0 0 0 / 35%); }
#wrap .main-navigation li img { display: block; }
#wrap .sub-navigation { background: #eaeeef8c; border-bottom: 1px solid var(--line); box-shadow: inset 0 3px 0 0 #fff, inset 0 -3px rgb(0 0 0 / 5%); }
#wrap .sub-navigation li { height: 42px; width: 55px; display: inline-block; }
#wrap .sub-navigation li a { width: 100%; height: 100%; display: block; cursor: pointer; opacity: .2; transition: .15s linear; background-repeat: no-repeat; background-position: center; }
#wrap .sub-navigation li a.nav-selected, #wrap .sub-navigation li a:hover { opacity: 1; }
#wrap #clothes { height: 520px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); grid-auto-rows: 62px; padding: 6px; align-content: start; }
#wrap .clothes-object { position: relative; height: 55px; width: 55px; border: 1px solid var(--line); background-color: var(--soft); border-radius: 100%; margin: 3px auto;
  box-shadow: inset 0 3px 0 0 #ffffffa1, inset 0 -3px rgb(0 0 0 / 25%); cursor: pointer; transition: .15s linear; display: flex; align-items: center; justify-content: center; overflow: visible; }
#wrap .clothes-object .pic { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#wrap .clothes-object .pic img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
#wrap .clothes-object:hover, #wrap .clothes-object.selected { background-color: var(--dark); border: 1px solid #19212a; box-shadow: inset 0 3px 0 0 #5d6977c7, inset 0 -3px rgb(0 0 0 / 25%); }
#wrap .clothes-object.removable { background-image: url(look_editor_assets/removable.png); background-repeat: no-repeat; background-position: center; }
#wrap .clothes-object .badge { position: absolute; right: -3px; bottom: -3px; margin: 0; background-repeat: no-repeat; }
#wrap .clothes-hc { background-image: url(look_editor_assets/media/hc_icon.png); width: 19px; height: 19px; }
#wrap .clothes-sell { background-image: url(look_editor_assets/media/clothing_icon.png); width: 17px; height: 16px; }
#wrap .clothes-nft { background-image: url(look_editor_assets/media/collectibles_icon.png); width: 14px; height: 14px; }
#wrap .clothes-ltd { background-image: url(look_editor_assets/media/icon_LTD_small.png); width: 21px; height: 15px; }
#wrap .clothes-rare { background-image: url(look_editor_assets/media/clothing_rare_icon.png); width: 17px; height: 16px; }
#wrap .palette { margin: 6px 10px 10px; height: 256px; max-height: none; overflow-y: auto; overflow-x: hidden; }
#wrap .palette.disabled-palette { opacity: .4; pointer-events: none; }
#wrap .color-object { display: inline-block; width: 27px; height: 25px; border: 1px solid #ffffff; margin: 3px; border-radius: 7px; cursor: pointer;
  box-shadow: 0 0px 0 2px rgb(0 0 0 / 10%), inset 0 4px rgb(255 255 255 / 30%), inset 0 -2px rgb(0 0 0 / 10%); box-sizing: border-box; vertical-align: top; }
#wrap .color-object.selected { border: 3px solid #ffffff; }
#wrap .color-object .color-hc { position: static; background: url(look_editor_assets/media/hc_small_icon.png) no-repeat; width: 19px; height: 19px; margin: 12px; }
#wrap .options-container { display: flex; flex-wrap: wrap; padding: 5px; }
#wrap .opt-selector { margin: 5px; flex-grow: 1; }
#wrap .face-opt, #wrap .obj-opt, #wrap .sig-opt { width: 40px; height: 40px; flex-grow: 0 !important; }
#wrap .action-opt { width: 40px; height: 50px; flex-grow: 0 !important; }
#wrap .size-opt { height: 40px; line-height: 38px; padding: 0 10px; font-weight: 700; }
#wrap .obj-opt, #wrap .sig-opt { image-rendering: pixelated; }
#wrap .seg { gap: 0; display: inline-flex; }
#wrap .seg > div { flex-grow: 0 !important; margin: 0 !important; border-radius: 0 !important; height: 30px; line-height: 28px; font-weight: 700; padding: 0 10px; }
#wrap .seg > div:first-child { border-radius: 5px 0 0 5px !important; }
#wrap .seg > div:last-child { border-radius: 0 5px 5px 0 !important; }
#wrap .opt-selector-box.disabled { opacity: .4; pointer-events: none; }
#wrap #obj-selector, #wrap #sig-selector { margin-top: 6px; max-height: 196px; overflow-y: auto; }
#wrap .clothes-object.fx .pic img { max-width: 44px; max-height: 44px; }
#wrap .generator-palette.off { display: none; }
#wrap .generator-closet.wide { flex: 1 1 0%; }
#wrap .ui-tooltip { position: absolute; z-index: 10000; max-width: 260px; padding: 6px 10px; background: var(--dark); color: #fff;
  border-radius: 5px; font-size: 12px; box-shadow: 0 2px 6px rgb(0 0 0 / 25%); pointer-events: none; }
#wrap .look-tip { position: absolute; z-index: 10000; pointer-events: none; }
#wrap #look-search-row { padding: 6px 10px 0; }
#wrap #look-search-row.off { display: none; }
#wrap #look-search { width: 100%; padding: 6px 10px; border: 1px solid var(--line); border-radius: 5px; font: inherit; font-size: 13px; color: var(--text); }
#wrap #reset-look { display: block; margin: 0 auto 14px; padding: 6px 16px; border: 1px solid var(--dark-line); border-radius: 5px; background: var(--dark);
  color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: inset 0 3px 0 0 var(--dark-hi); }
#wrap #import-habbo-name.not-found { border-color: #c0392b; box-shadow: 0 0 0 2px rgb(192 57 43 / 25%); }
@media (max-width: 960px) {
#wrap .avatar-preview, #wrap .generator-closet, #wrap .generator-palette, #wrap .generator-options { flex: 1 1 calc(100% - 20px); max-width: calc(100% - 20px); min-width: 0; }
}
@media (max-width: 720px) {
#wrap .widget { margin: 8px; }
#wrap .avatar-preview, #wrap .generator-closet, #wrap .generator-palette, #wrap .generator-options { flex: 1 1 calc(100% - 16px); max-width: calc(100% - 16px); min-width: 0; }
}