html { background: #222; font-size: 14px; }
html.zoom-00 { font-size: 12px; }
html.zoom-01 { font-size: 13px; }
html.zoom-02 { font-size: 14px; }
html.zoom-03 { font-size: 15px; }
html.zoom-04 { font-size: 16px; }
.page-center {
  position: relative;
}
/*.page-center { max-width: 1400px; }*/
/*html.zoom-00 .page-center { max-width: 1000px; }*/
/*html.zoom-01 .page-center { max-width: 1200px; }*/
/*html.zoom-02 .page-center { max-width: 1400px; }*/
/*html.zoom-03 .page-center { max-width: 1600px; }*/
/*html.zoom-04 .page-center { max-width: 1800px; }*/
body {
  /* In the event hover preview img is out of viewport */
  overflow-x: hidden;
}
body.dragging {
  cursor: grabbing !important;
}
body.user-login .user-type-only-guest {
  display: none;
}
body.user-guest .user-type-only-login {
  display: none;
}

div#hs-eu-cookie-confirmation {
  pointer-events: auto;
}

/*1.669*/
#art-scene-container {
  width: 100vw; 
  height: 56.25vw; /* 100/56.25 = 1.778 */
  height: 56.7vw;
  max-height: 100vh;
  max-width: 177.78vh; /* 16/9 = 1.778 */
  margin: auto;
  position: absolute;
  top:0;bottom:0; /* vertical center */
  left:0;right:0; /* horizontal center */
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  /*box-shadow: none;*/
  /*background: #222;*/
  /*overflow-y: scroll;*/
}
.card.start-card {
  padding-right: 1.47rem;
  /*cursor: initial;*/
  border-radius: 1rem;
  min-width: 320px;
  flex: 1 1 320px;
}
.card.start-card .btn {
  /*border-top-right-radius: 0;*/
  /*border-top-left-radius: 0;*/
}
.btn {
  overflow: visible;
}
.btn.disabled, .btn.disabled.special {
  border: none;
}
.btn.clear:hover, .btn.clear:active, .btn.clear:focus {
  background: rgba(255,255,255,0.25);
  /*color: #fff;*/
}
.btn.clear:hover .icon, .btn.clear:active .icon, .btn.clear:focus .icon {
  /*color: #fff;      */
}
.btn,
.btn.toggle,
.btn.toggle:hover,
.btn:hover,
.btn:active,
.btn.red, .btn.red:hover,
.btn.purple, .btn.purple:hover,
.btn.light:hover {
  color: #2741AE;
  border: 1px solid #2741AE;
  background: #fff;
  border-radius: 6px;
}
.btn.light {
  border: 1px solid #D4D9EF;
}
.btn.asset-view-change-btn-hide:hover {
  background: #2741AE;
  color: #fff;
}
.btn.special.purple,
.btn.special.purple:hover,
.btn.special.purple:active,
.btn.special.purple:focus,
.btn.toggle.active {
  background: #2741AE;
  color: #fff;
  border: none;
}
.btn.special.red,
.btn.special.red:hover,
.btn.special.red:active,
.btn.special.red:focus,
.nav-page .btn.toggle.active,
.nav-asset-container .btn.toggle.active,
.btn.btn-env-group-close {
  background: #E60800;
  color: #fff;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.btn.blue.light {
  background: #D3E2FF;
  color: #2741AE;
  border: none;
  box-shadow: none;
}
.btn.blue.light:hover,
.btn.blue.light:focus,
.btn.blue.light:active {
  background: #2741AE;
  color: #fff;
  border: none;
}
.btn:hover,
.btn.toggle:hover,
.btn.blue.light:hover,
.btn.blue.light:focus,
.btn.blue.light:active,
.btn.special.purple:hover,
.btn.special.purple:active,
.btn.special.purple:focus {
  box-shadow: 0 1px 4px rgba(39, 65, 174, 0.4);
}
.nav-page .btn.toggle-group.row,
.nav-asset-container .btn.toggle-group.row {
  box-shadow: none;
  border: 0;
}
.btn.toggle-group.row,
.btn.toggle-group.row.toggle {
  border-radius: 0;
}
.btn.toggle-group.row:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.btn.toggle-group.row:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
blockquote {
  border-left: 4px solid #D3E2FF;
}

label {
  font-size: 1.15rem;
}
.subheading {
  font-size: 0.94rem;
  color: rgba(0, 0, 0, 0.5);
}
.nav-page .btn.toggle-group.row:not(:first-child),
.nav-asset-container .btn.toggle-group.row:not(:first-child) {
  margin-left: 1px;
}
input:not([type="submit"]), select {
  border-radius: 9px;
  border: 1px solid #BECBD5;
  box-shadow: none;
}
input:not([type="submit"]):hover, select:hover,
input:not([type="submit"]):active, select:active,
input:not([type="submit"]):focus, select:focus {
  /* border: 1.5px solid #561AD6; */
  /* color: #561AD6; */
  border: 1px solid #505e69;
  box-shadow: 0 1px 5px rgba(10,0,30,0.15);
}

input.input-file {
  /* display: none; */
  cursor: pointer;
}
input.input-file, input.input-file:hover, input.input-file:focus, input.input-file:active {
  background: #f5f5f5;
  border: 2px dashed #aaa;
  text-align: center;
}
input.input-file:hover, input.input-file:focus, input.input-file:active {
  background: #f2f2f2;
  border: 2px dashed #999;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}
input.input-file.filled {
  padding: 0.7rem;
  text-align: left;
  display: inline-block;
}
input.input-file + label {
  /* display: block; */
  display: none;
  cursor: pointer;
  color: #6b6b6b;
  background: #f5f5f5;
  border: 2px dashed #aaa;
  padding: 2rem;
  text-align: center;
  border-radius: 6px;
}
input.input-file + label .icon {
  font-size: 3rem;
  margin-bottom: 0.6rem;
}
input.input-file + label:hover, input.input-file:focus + label {
  background: #f2f2f2;
  border: 2px dashed #999;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}
input.input-file + label.filled {
  padding: 0.8rem;
  /* display: inline-flex; */
  align-items: center;
}
input.input-file + label.filled .icon {
  margin-bottom: 0;
  margin-right: 1rem;
  align-items: center;
  font-size: 1.6rem;
}

.icon {
  color: rgba(0,0,0,0.3);
}

.nav-page .btn.clear .icon {
  color: rgba(0,0,0,0.4);
  color: #B9C8FF;
  /*color: #aaa;*/
}
.btn-filter,
.btn-view {
  cursor: pointer;
  /*background: rgba(0,0,0,0.07);*/
  /*padding: 0.4rem 0;*/
}
.btn-filter i.fa,
.btn-view i.fa {
  font-size: 1.2rem;
  margin-left: 0;
}
.asset-container-inner {
  display: flex;
  position: relative;
}
.asset-control-bar {
  background:#fff;
  /*box-shadow:0 2px 15px rgba(0,0,0,0.3);*/
  z-index:10;
}
.asset-controls {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  justify-content: center;
}
.asset-controls label {
  /*color: #aaa;*/
  /* align-self: center; */
  font-size: 1rem;
  margin: 0;
  /* margin-right: 0.5rem; */
  margin-bottom: 0.6rem;
}
.asset-controls .select-wrap {
  align-self: flex-start;
  width: 100%;
}
.asset-controls .asset-filter-number {
  color: #888;
}
.asset-controls > div,
.asset-controls .asset-totals {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.asset-controls .assets-data .fa-search {
  display: none;
}
.asset-controls label .icon {
  margin-right: 0.5rem;
}
.asset-controls .assets-data {
  /*position: absolute;*/
  /*left: 0.9rem;*/
  /*top: 50%;*/
  /*transform: translateY(-50%);*/
  display: flex;
  flex-direction: column-reverse;
  /*padding-bottom: 0.9rem;*/
  padding-right: 0.3rem;
  padding-left: 0.3rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.asset-controls .assets-data > div {
  /*align-self: center;*/
}
.asset-controls .select-wrap select {
  padding-right: 1.5rem;
  width: 100%;
}
.hbs-container {
  display: block;
  overflow: hidden;
  z-index: 30;
  transition: opacity 0.2s;
  pointer-events: auto;
  position: fixed;
  bottom: 7.4rem;
  bottom: 9rem;
  top: 0;
  right: 0;
  left: 0;
  background: transparent;
  /*border-bottom-left-radius: 8px;*/
  /*border-bottom-right-radius: 8px;*/
}
.hbs-container .inner {
  z-index: 5;
}
.hbs-container .inner,
.asset-container,
.asset-container-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
html.view-grid .hbs-container {
  /*position: fixed;
  bottom: 5.2rem;
  top: 0;
  right: 0;
  left: 0;*/
}
html.view-hide .hbs-container {
  pointer-events: none;
  opacity: 0;
}
html.view-grid .nav-page {
  display: none;
}
.asset-view-change-btn.asset-view-change-btn-hide {
  /*position: absolute;*/
  /*right: 0.9rem;*/
  /*top: 50%;*/
  /*transform: translateY(-50%);*/
  border: none;
  box-shadow: none;
  flex: 1;
  margin-top: 1rem;
}
html.view-grid .nav-and-assets {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  background: #fff;
}
html.view-hide body.blank .nav-asset-container {
  display: table;
  margin-right: auto;
  margin-left: auto;
  padding: 1rem;
  padding-bottom: 0;
  background: rgba(0,0,0,0.6);
  border-radius: 10px;
}
html.view-grid .nav-asset-container {
  transform: none;
  bottom: 0;
  top: initial;
  background: #fff;
  box-shadow: 0 2px 15px rgba(0,0,0,0.3);
}
html.view-grid .asset-view-change-btn-grid {
  display: none;
}
html.view-grid .asset-view-change-btn-list {
  display: flex;
}
body.blank .nav-and-assets {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 0; left: 0;
  z-index: 100;
  /* display: flex;
  justify-content: space-around; */
}
body.blank .nav-asset-container {
  transform: translateY(-50%);
}
html.view-grid body.blank .nav-asset-container {
  transform: none;
}
html.view-grid body.blank .nav-and-assets {
  position: fixed;
  top: initial;
  transform: none;
}
.asset-container-inner {
/*html.view-grid .asset-container-inner {*/
  overflow: hidden;
  border-radius: 0;
  box-shadow: 0 2px 25px rgba(0,0,0,0.8);
  flex-direction: row;
}
.asset-controls {
/*html.view-grid .asset-controls {*/
  flex-direction: column;
}
.asset-view-change {
/*html.view-grid .asset-view-change {*/
  display: flex;
  /*display: none;*/
}
.asset-container-inner .scroll-outer {
/*html.view-grid .asset-container-inner .scroll-outer {*/
  overflow-y: auto;
  /*background: #fff;*/
  /*padding-top: 0.5rem;*/
}
.items-container {
/*html.view-grid .items-container {*/
  overflow-y: hidden;
  padding: 4px;
  padding-top: 0;
  /*max-height: 800px;*/
  overflow-x: hidden;
  flex-wrap: wrap;
}
.scroll-outer {
  min-width: 0;
  /*overflow: hidden;*/
}
.items-scroll-container {
  /*background:#272727;*/
  background: #f0f0f0;
  padding-bottom: 0.75rem;
}
.items-environments,
.items-hosts {
  pointer-events: auto;
}
.items-environments.disabled,
.items-hosts.disabled {
  pointer-events: none;
}

.tile {
  position: relative;
  cursor: pointer;
}
.tile .overlay {
  position: absolute;
  right: 0; left: 0;
  /* top: 0; */
  bottom: 0;
  pointer-events: none;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  z-index: 3;
  padding: 0.6rem;
  color: #fff;
  line-height: 1;
}
.tile .overlay ul {
  margin-bottom: 0.88rem;
  margin: 0rem;
  color: rgba(255,255,255,0.85);
}
.tile .overlay ul li {
  padding-bottom: 0.45rem;
}
.tile .overlay ul li:first-child {
  margin-top: 0.6rem;
}
.tile .overlay ul li:last-child {
  margin-bottom: 0;
}
.tile:hover .overlay {
  opacity: 1;
}
.items-avatars .tile:hover .name {
  display: none;
}
.tile .tag {
  padding: 0.4rem;
  position: absolute;
  right: 3px;
  top: 0.85rem;
  z-index: 5;
  color: #fff;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.tile .tag.testing {
  background: rgba(127, 95, 255, 0.9);
}
.tile .tag.brand {
  top: 1.3rem;
  background: rgba(243, 88, 235, 0.9);
  padding: 0.6rem 1.2rem 0.6rem 0.6rem;
}
.tile .tag .icon {
  color: rgba(0,0,0,0.5);
  margin-right: 0.35rem;
}
.tile .asset-info {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.45);
  padding: 2rem 2rem 3rem;
  opacity: 0;
  color: #fff;
  justify-content: center;
  /*transition: all 0.05s;*/
  font-size: 1.3rem;
}
.tile:hover .asset-info {
  /*opacity: 1;*/
}
.tile .asset-info .col-l,
.tile .asset-info .col-r {
  justify-content: center;
}
.tile .asset-info .col-l {
  padding-right: 2rem;
  color: rgba(255,255,255,0.7);
}
.tile.active {

}
.tile .tile-btn-download {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 10;
  pointer-events: auto;
}
.tile .img-placeholder {
  position: relative;
  z-index: 0;
  /*top: 6px; right: 3px; bottom: 0; left: 3px;*/
  opacity: 1;
  pointer-events: none;
}
.img-placeholder .spinner {
  text-align: center;
}
.items-outfits .img-placeholder .spinner {
  top: 37%;
}
.img-placeholder .spinner .icon {
  color: rgba(255,255,255,0.5);
  font-size: 2.5rem;
}
.items-container > .tile > .img-container {
  position: absolute;
  top: 0;
  z-index: 3;
  pointer-events: none;
}

.items-environments .tile,
.items-hosts .tile {
  margin-right: 7px;
  border-radius: 3px;
  overflow: hidden;
}
.items-environments .tile:last-child,
.items-hosts .tile:last-child {
  margin-right: 0;
}
.items-environments .tile > .img-container,
.items-hosts .tile > .img-container {
  display: flex;
  overflow: hidden;
  top: 6px; right: 3px; left: 3px;
}
.items-environments .tile .img-placeholder {
  /*top: 6px; right: 3px; left: 3px;*/
}
.items-environments .tile .name,
.items-hosts .tile .name {
  right: 3px;
  left: 3px;
  bottom: 0;
  display: flex;
}
.items-environments .tile > .img-container img {
  transition: transform 0.15s;
}
.items-environments .tile:hover > .img-container img {
  transform: scale(1.03, 1.03);
}
.items-environments .tile.env-group-tile > .img-container img,
.items-hosts .tile.env-group-tile > .img-container img {
  position: absolute;
  top: 0;
  font-size: 0;
}
.items-environments .tile.env-group-tile > .img-container img:first-child,
.items-hosts .tile.env-group-tile > .img-container img:first-child {
  position: relative;
}
.items-environments .tile.env-group-tile,
.items-hosts .tile.env-group-tile {
  cursor: zoom-in;
}
.tile.env-group-tile .env-group-container {
  /*display: none;*/
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.85);
  z-index: 50;
  cursor: initial;
  transform-origin: 50% 50%;
  transform: scale(0.7,0.7);
  opacity: 0;
  transition: transform 0.15s ease-in, opacity 0.15s;
  pointer-events: none;
  z-index: 0;
  overflow: auto;
}
.tile.env-group-tile .env-group-container.active {
  /*display: block;*/
  pointer-events: auto;
  opacity: 1;
  transform: scale(1,1);
  z-index: 10;
}
.tile.env-group-tile .env-group-perspectives {
  pointer-events: none;
  display: flex;
  flex-wrap: wrap;
  padding: 2.5rem 5rem;
  justify-content: center;
}
.tile.env-group-tile .env-perspective {
  flex: 0 0 calc(33.3333% - 10px);
  margin: 0 5px 10px;
}
.tile.env-group-tile .env-group-container.active .env-group-perspectives .env-perspective {
  pointer-events: auto;
  margin: 6px 3px 0;
}
.tile.env-group-tile .env-group-container .title-bar {
  position: sticky;
  top: 0;
  background: #151515;
  z-index: 20;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 1.5rem 5rem;
}
.tile.env-group-tile .env-group-container.active .title-bar {
  pointer-events: auto;
}
.items-avatars .tile {
  /*margin-right: 2px;*/
  cursor: grab;
}
.items-avatars .tile:last-child {
  margin-right: 0;
}
.items-hosts > .tile > .check,
.items-hosts > .tile > .add,
.items-environments > .tile > .check,
.items-environments > .tile > .add,
.items-avatars > .tile > .check,
.items-avatars > .tile > .add,
.items-outfits > .tile > .check,
.items-outfits > .tile > .add,
.env-group-perspectives > .tile > .check,
.env-group-perspectives > .tile > .add {
  /*background: rgba(0,0,0,0.15);*/
  opacity: 0;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  text-align: center;
  z-index: 10;
}
.items-scroll-container .tile.bundle-tile .img-container {
  border: 3px solid #2741AE;
  border-bottom: none;
  /*flex: 0 0 calc(25% - 14px);*/
}
.tile.bundle-tile .img-container img,
.tile.host-tile .img-container img {
  /* position: relative;
  z-index: 1;
  transition: z-index 1s; */
}
.tile.host-tile .img-container img:first-child {
  position: relative;
  opacity: 1;
  transition: none;
}
.tile.host-tile .img-container img:not(:first-child) {
  /* position: absolute;
  opacity: 0;
  transition: opacity 0.7s;
  top: 0; right: 0; bottom: 0; left: 0; */
}
.tile.host-tile:hover .img-container img {
  /* opacity: 1; */
}

.tile.bundle-tile .img-container img.slide,
.tile.host-tile .img-container img.slide {
  /* opacity: 0;
  transition: opacity 1.2s;
  position: absolute;
  right: 0; top: 0; bottom: 0; left: 0; */
}
.tile.bundle-tile .img-container img.show,
.tile.host-tile .img-container img.show {
  /* opacity: 1;
  z-index: 2; */
}
.tile .box {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0.7rem 0.7rem 0.4rem 0.7rem;
  background: rgba(110,74,255,0.8);
  background: rgba(39, 65, 174, 0.8);
  z-index: 8;
  border-bottom-left-radius: 5px;
  top: 6px;
  right: 3px;
}
.tile .box .icon {
  color: rgba(255,255,255,0.9);
  font-size: 2rem;
}
.asset-container.environments .items-scroll-container .tile.bundle-tile .name {
  background: rgba(39, 65, 174, 0.8);
}
.tile .box .subtext {
  font-size:0.7rem;
  line-height:1;
  color:rgba(255,255,255,0.7);
}
.items-container > .tile:hover {
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
  z-index: 20;
}
.tile:hover > .add {
  opacity: 0.9;
}
.tile > .name {
  text-align: left;
  color: rgba(255,255,255,0.8);
  font-size: 1.1rem;
  text-overflow: ellipsis;
  min-width: 0;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0,0,0,0.4);
  line-height: 1;
  padding: 0.6rem 0;
  padding-left: 0.6rem;
  white-space: nowrap;
  z-index: 3;
  pointer-events: none;
}
.tile .name .pos-dots {
  margin-left: 0.6rem;
}
.tile .name .pos-dots .icon {
  font-size: 0.8rem;
  margin-right: 0.3rem;
}
.tile .name .icon {
  color: rgba(255,255,255,0.8);
}
.tile.active:hover .add {
  opacity: 0;
}
.tile.active .name,
.tile.active:hover .name,
.tile.active:active .name {
  background: rgba(110,74,255,0.65);
  color: #fff;
}
.tile:hover > .name {
  background: rgba(0,0,0,0.65);
  color: #fff; 
}
.tile.active .name {
  /*background: #6E4AFF;*/
}
.tile > .check .icon,
.tile > .add .icon {
  font-size: 3rem;
  color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0; left: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
.items-scroll-container .items-environments .tile {
  height: auto;
  cursor: copy;
  /*width: 27.333rem;*/
  margin: 0;
  padding: 6px 3px 0;
  background: #fff;
  box-shadow: none;
  /* overflow: visible; */
  /* NOTE: Prevents hover jank */
  overflow: hidden;
  border-radius: 0;
  z-index: initial;
}
.items-scroll-container .items-hosts .tile {
  height: auto;
  cursor: copy;
  /*width: 27.333rem;*/
  flex: 0 0 calc(50% - 1px);
  margin: 0;
  padding: 6px 3px 0;
  background: #fff;
  box-shadow: none;
  overflow: visible;
  border-radius: 0;
  z-index: initial;
}
.items-scroll-container .items-environments .tile.env-perspective {
  padding: 0;
}
.items-scroll-container .items-environments .tile.env-perspective .name {
  left: 0; right: 0;
}
.items-scroll-container .items-environments .tile:hover .img-container,
.items-scroll-container .items-hosts .tile:hover .img-container {
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}
html.view-list .items-environments .tile {
  /*width: 410px;*/
  /*width: 27.333rem;*/
}
.items-avatars .tile .check .icon,
.items-avatars .tile .add .icon {
  top: 0.4rem;
  right: 0.4rem;
  left: auto;
  font-size: 2.2rem;
  transform: none;
}
.outfits-scroll {
  overflow-y: hidden;
}
.items-outfits {
  /*margin-top: -10px;*/
  /*margin-bottom: -9px;*/
}
.items-container.items-outfits .tile {
/*html.view-list .items-container.items-outfits .tile {*/
  cursor: grab;
  /*height: 249px;*/
  /*height: 16.6rem;*/
  /*width: auto;*/
}
.items-container.items-outfits .tile img {
/*html.view-list .items-container.items-outfits .tile img {*/
  /*height: 249px;*/
  /*height: 16.6rem;*/
  /*width: auto;*/
  font-size: 0;
}
.tile.active .check {
  opacity: 1;
}
.tile.active .check .icon {
  color: #7ECC9C;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.items-avatars .tile .img-container {
  /*width: 200px;*/
  /*height: 230px;*/
  width: 13.333rem;
  height: 15.333rem;
  overflow: hidden;
}
.items-avatars .tile .img-container img {
  transform: scale(1.01,1.01);
  transform-origin: 50% 50%;
  /*transform-origin: top;*/
}
.items-scroll-container .tile {
/*html.view-grid .items-scroll-container .tile {*/
  flex: 0 0 calc(25% - 1px);
  /*flex: 0 0 calc(33.333% - 6px);*/
  /*margin: 0 3px 6px;*/
  padding: 0;
  /*padding: 0 4px 8px 4px;*/
}
.items-avatars,
.items-outfits {
/*html.view-grid .items-avatars,*/
/*html.view-grid .items-outfits {*/
  padding: 0;
}
.items-avatars .tile {
/*html.view-grid .items-avatars .tile {*/
  flex: 0 0 20%;
  margin: 0;
  padding: 0;
}
.items-container.per-row-3 .tile {
  flex: 0 0 33.33%;
}
.items-container.per-row-3 .tile:nth-child(even) {
  /*margin-top: 40px;*/
}
.items-container.per-row-4 .tile {
  flex: 0 0 25%;
}
.items-container.per-row-5 .tile {
  flex: 0 0 20%;
}
.items-avatars .tile .img-container {
/*html.view-grid .items-avatars .tile .img-container {*/
  width: 100%;
  height: auto;
}
.items-avatars .tile .img-container img {
/*html.view-grid .items-avatars .tile .img-container img {*/
  /*transform: none;*/
  font-size: 0;
}
.items-outfits .tile {
/*html.view-grid .items-outfits .tile {*/
  flex: 0 0 10%;
  margin: 0;
  padding: 0;
}
.nav-assets-btn-confirm {
/*html.view-grid .nav-assets-btn-confirm {*/
  display: none;
}
.av-poi {
  position: absolute;
  text-align: center;
  font-weight: 600;
  transform: translate(-50%,-50%);
}
.av-poi .content-inner {
  overflow: hidden;
  border-radius: 20px;
  display: flex;
}
.av-poi .btn-remove {
  display: none;
  position: absolute;
  right: 0.6rem;
  top: 0.6rem;
  width: 30px; height: 30px;
  border-radius: 15px;
  color: #fff;
  background: rgba(0,0,0,0.4);
  cursor: pointer;
  font-size: 1.2rem;
}
.av-poi.filled .btn-remove {
  display: block;
  z-index: 10;
}
.av-poi:not(.filled) .poi-ctrls {
  display: none;
}
/*.av-poi .ctrl-bmi {
  display: none;
}
.av-poi.filled-avatar .ctrl-bmi {
  display: initial;
}*/
.av-poi.filled .content-inner {
  box-shadow: 0 3px 20px rgba(0,0,0,0.6);
}
.av-poi.filled-outfit .outfit-dropper {
  /*background: #fff;*/
  /*border-right: 2px solid #e6e6e6;*/
}
.av-poi .btn-remove:hover,
.av-poi .btn-remove:active {
  background: #6E4AFF;
}
.av-poi .number {
  position: absolute;
  font-size: 1.2rem;
  /*right: 0;*/
  left: 6px;
  top: 6px;
  margin: 0 auto;
  transform: translate(-50%, -50%);
  background: #E60800;
  color: #fff;
  width: 33px; height: 33px;
  border-radius: 20px;
  box-shadow: 0 3px 15px rgba(10,5,20,0.4);
}
.av-poi .av-dropper {
  position: relative;
  right: 0; left: 0;
  overflow: hidden;
}
.av-poi .av-dropper-img {
  transform: translateY(-50%) scale(1.3,1.3);
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  top: 50%;
  font-size: 0;
}
.av-poi .av-name {
  position: absolute;
  right: 0; bottom: 0; left: 0;
  text-align: center;
  padding: 0.2rem;
  background: rgba(0,0,0,0.2);
  color: rgba(255,255,255,0.9);
  font-size: 1rem;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.dragging-avatar .av-poi .av-dropper {
  animation: draggingPoiBg 1s infinite;
  box-shadow: inset 0 3px 25px rgba(0,0,0,0.7);
}
.dragging-avatar .av-poi .av-dropper .av-dropper-img {
  opacity: 0.65;
}
@keyframes draggingPoiBg {
  0% { background: rgba(0,0,0,0.55); }
  50% { background: rgba(0,0,0,0.9); }
  100% { background: rgba(0,0,0,0.55); }
}
.dragging-avatar .av-poi .av-dropper.hover,
.dragging-outfit-male .av-poi.gender-male .outfit-dropper.hover,
.dragging-outfit-female .av-poi.gender-female .outfit-dropper.hover {
  /*width: 170px;*/
  /*height: 210px;*/
  box-shadow: inset 0 3px 30px rgba(0,0,0,1);
  cursor: pointer;
}
.av-poi .av-dropper .inner {
  right: 12px; top: 12px; bottom: 12px; left: 12px;
  border-radius: 10px;
  border: 3px dashed rgba(255,255,255,0.2);
  transform: none;
}
.av-poi .av-dropper,
.av-poi .outfit-dropper {
  font-weight: 300;
  background: rgba(0,0,0,0.65);
  box-shadow: inset 0 3px 25px rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.5);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.av-poi .outfit-dropper {
  display: none;
  width: 92px;
  height: 200px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.outfit-dropper .bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
.av-poi .outfit-dropper .outfit-dropper-img {
  transform: translateY(-1%);
  transform-origin: 50% 50%;
  filter: brightness(0.97);
  font-size: 0;
}
.av-poi.filled .outfit-dropper {
  display: block;
}
.av-poi.outfit-override .outfit-dropper,
.av-poi.filled.outfit-override .outfit-dropper {
  pointer-events: none;
  display: none;
}
.av-poi.outfit-override-hidden .outfit-dropper,
.av-poi.filled.outfit-override-hidden .outfit-dropper {
  display: none;
}
.av-poi .av-dropper:hover,
.av-poi .outfit-dropper:hover {
  background: rgba(0,0,0,0.8);
}
.av-poi.filled .av-dropper:hover .av-dropper-img,
.av-poi.filled .outfit-dropper:hover .outfit-dropper-img {
  opacity: 0.75;
}
.poi-ctrls {
  bottom: 0;
  transform: translateY(100%);
  right: 0; left: 0;
  text-align: center;
  pointer-events: all;
}
/* TODO: Temporary, until controller support is finalized */
.poi-ctrls .ctrl-controller {
  display: none !important;
}
.poi-ctrls .btn {
  color: #fff;
  background: rgba(0,0,0,0.45);
  margin-top: 0.4rem;
  border: 1px solid transparent;
  padding: 0.3rem 0.6rem;
  /* font-size: 0.9rem; */
}
.poi-ctrls .btn .icon {
  font-size: 1.6rem;
}
.poi-ctrls .btn:hover,
.poi-ctrls .btn:focus {
  background: rgba(0,0,0,0.6);
}
.poi-ctrls .btn.active {
  background: rgba(0,0,0,0.8);
}
.poi-ctrls .btn.active .icon {
  color: #fff;
}
.poi-ctrls .poi-ctrl-window {
  display: none;
  background: rgba(0,0,0,0.6);
  margin-top: 0.4rem;
  border-radius: 10px;
  color: rgba(255,255,255,0.7);
  line-height: 1;
  overflow: hidden;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.poi-ctrls .poi-ctrl-window.active {
  display: flex;
}
.poi-ctrl-window .option {
  cursor: pointer;
}
.poi-ctrl-window .option:hover,
.poi-ctrl-window .option:focus {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.poi-ctrl-window .option.active {
  background: #6E4AFF;
  color: #fff;
}
.dragging-outfit-male .av-poi.gender-male .outfit-dropper {
  box-shadow: inset 0 3px 25px rgba(0,0,0,0.7);
  animation: draggingPoiBg 0.8s infinite;
}
.dragging-outfit-female .av-poi.gender-female .outfit-dropper {
  box-shadow: inset 0 3px 25px rgba(0,0,0,0.7); 
  animation: draggingPoiBg 1s infinite;
}
.dragging-outfit-male .av-poi.gender-male .outfit-dropper-img {
  opacity: 0.5;
}
.dragging-outfit-female .av-poi.gender-female .outfit-dropper-img {
  opacity: 0.5;
}

/*** Panel ***/
.items-bank {
  padding: 3rem;
  justify-content: center;
}
.bank-scene {
  position: relative;
  max-width:450px;
  height: auto;
  /*flex: 1;*/
  margin-bottom: 2.4rem;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 3px 20px rgba(10,5,20,0.4);
  cursor: pointer;
  transform-origin: 50% 50%;
  transition: all 0.1s;
}
.bank-scene:hover,
.bank-scene:active {
  box-shadow: 0 3px 25px rgba(10,5,20,0.6);
  transform: translateY(-2px) scale(1.01,1.01);
}
.sticker {
  position: fixed;
  z-index: 100;
  transform: translate(-50%,-50%) rotate(5deg);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 5px 30px rgba(0,0,0,0.6);
  cursor: grabbing;
  transition: transform 0.01s;
  /*border-radius: 43px;*/
}
.sticker.avatar {
  width: 205px;
  height: 205px;
}
.sticker.outfit {
  width: 110px;
  height: 250px;
}
.sticker.mouse-entered {
  transform: translate(-50%,-50%) rotate(5deg) scale(0.85, 0.85);
  opacity: 0.9;
}
.nav-page {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 15;
  padding: 1rem;
  padding-bottom: 1rem;
  background: rgba(255,255,255,0.65);
  background: linear-gradient(90.06deg, rgba(17, 35, 79, 0.9) 32.97%, rgba(41, 73, 188, 0.9) 107.76%);
  box-shadow: 0 2px 20px rgba(0,0,0,0.2);
  /*background: #181818;*/
  padding-bottom: 0.5rem;
}
.nav-scene-container-outer {
  /*background: 
    linear-gradient(#f4f4f3 33%, rgba(244,244,243, 0)),
    linear-gradient(rgba(244,244,243, 0), #f4f4f3 66%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(139,139,139, 0.5), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(139,139,139, 0.5), rgba(0,0,0,0)) 0 100%;
  background-color: #f4f4f3;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
  background-size: 100% 48px, 100% 48px, 100% 16px, 100% 16px;*/
}
.btn.nav-scene-btn {
  /*border-bottom-right-radius: 0 !important;*/
  /*border-bottom-left-radius: 0 !important;*/
  padding: 0.55rem 1.25rem;
  font-size: 1.1rem;
  position: relative;
}
.btn.nav-scene-btn.active {
  cursor: initial;
}
.btn.nav-scene-btn.nav-scene-btn-host {
  padding: 0.55rem 0.6rem;
}
.btn.nav-scene-btn .num {
  /* margin-left: 0.4rem; */
}
.btn.nav-scene-btn-ctrl {
  display: flex;
  flex-shrink: 0;
  align-self: center;
  padding: 0.45rem 0.5rem;
  text-decoration: none;
}
.btn.nav-scene-btn-ctrl .icon {
  font-size: 1.1rem;
  align-self: center;
}
.btn.nav-scene-btn-ctrl .ttip-text {
  font-size:1rem;
}
.nav-scene-move {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  justify-content: space-between;
}
.nav-scene-move-btn {
  width: 17px;
  display: flex;
  justify-content: center;
  background: rgba(0,0,0,0.08);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
}
.nav-scene-btn:hover .nav-scene-move-btn {
  opacity: 1;
  pointer-events: auto;
}
.btn.nav-scene-btn:only-child .nav-scene-move-btn {
  display: none;
}
.nav-scene-move-btn .icon {
  align-self: center;
  font-size: 0.8rem;
}
.nav-scene-move-btn:hover,
.nav-scene-move-btn:focus {
  background: rgba(0,0,0,0.15);
}
.nav-scene-btn.active .nav-scene-move {
  display: flex;
}
.av-holder {
  position: relative;
  /*padding: 1rem;*/
  /*box-shadow: 0 2px 5px rgba(0,0,0,0.14);*/
  border-radius: 4px;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
}
.av-holder .inner {
  display: flex;
  overflow: hidden;
}
.av-holder .left {
  /*background: #f6f6f6;*/
  flex: 0 0 127px;
  padding: 0.5rem;
  min-width: 0;
  line-height: 1.3;
}
.av-holder .right {
  background: #f6f6f6;
  flex: 1;
  position: relative;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 2px 20px rgba(0,0,0,0.1);
}
.av-holder .av-img {
  width: 110px;
  margin-bottom: 0.5rem;
  border: 1px solid #e9e9e9;
}
.av-holder .av-name {
  min-width: 0;
  /*text-overflow: ellipsis;*/
  /*overflow: hidden;*/
  /*white-space: nowrap;*/
}
.av-holder .right .bg {
  position: absolute;
  right: 0; bottom: 0; left: 0; top: 0;
  text-align: center;
}
.av-holder .outfit-poi {
  display: none;
}
.av-holder.has-avatar .outfit-poi {
  display: block;
}
.bg .outline {
  border: 3px dashed rgba(255,255,255,0.2);
  border-radius: 10px;
  position: absolute;
  right: 12px; bottom: 12px; left: 12px; top: 12px;
}
.outfit-poi.hover {
  background: rgba(0,0,0,0.05);
  box-shadow: inset 0 2px 15px rgba(0,0,0,0.15);
}
@keyframes draggingOutfitBg {
  0% { background: rgba(0,0,0,0.05); }
  50% { background: rgba(0,0,0,0.12); }
  100% { background: rgba(0,0,0,0.05); }
}
.av-holder .outfit-img {
  position: relative;
  z-index: 10;
}
.panel-av-poi-num-outer {
  position: absolute;
  left: -9px;
  top: -9px;
  background: #E60800;
  width: 25px;
  height: 25px;
  border-radius: 13px;
  color: #fff;
  text-align: center;
}


pre {
  -moz-tab-size:    2; /* Firefox 4+ */
  -o-tab-size:      2; /* Opera 11.5 & 12.1 only */
  tab-size:         2; /* Chrome 21+, Safari 6.1+, Opera 15+ */
}
.file-extension {
  color: rgba(0, 0, 0, 0.35);
  font-weight: 400;
  align-self: center;
  font-size: 1.3rem;
  margin-top: 0.1rem;
  margin-left: 0.2rem;
}
.nav-asset-container {
  /*background:rgba(0,0,0,0.3);*/
  z-index:25;
  right:0;
  left:0;
  top: 0;
  transform: translateY(-100%);
  /*box-shadow: 0 2px 15px rgba(0,0,0,0.3);*/
}
.nav-assets-btn-confirm {
  display: none;
}
.nav-assets-btn-confirm.show {
  display: block;
}
.nav-asset-container {
  pointer-events: none;
}
.nav-assets {
  pointer-events: auto;
  margin-bottom: 1.3rem;
  margin-bottom: 1.7rem;
}
.nav-assets-heading, h1 {
  color: #fff;
  font-weight: 800;
  margin-bottom: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.nav-assets-heading .subheading {
  font-size: 1.15rem;
  font-style: italic;
  color: #fff;
}
html.view-grid .nav-assets-heading,
html.view-grid body.blank .nav-assets-heading,
.nav-assets-heading {
  display: none;
}
body.blank .nav-assets-heading {
  /* display: block; */
}
.nav-assets .nav-assets-btn.btn {
  overflow: visible;
  background: rgba(211, 226, 255, 0.85);
  border: none;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 11px rgba(0,0,0,0.5);
  padding: 1rem 1.7rem;
  padding: 1.1rem;
  border-radius: 50px;
  justify-content: center;
  /*margin-right: 2.3rem;*/
  color: rgba(255,255,255,0.85);
  border: 1px solid transparent;
  color: #2741AE;
  font-weight: 700;
  margin-right: 2rem;
}
html.view-grid .nav-assets .nav-assets-btn.btn {
  margin-bottom: 0.88rem;
}
.nav-assets .nav-assets-btn.hide {
  display: none;
}
.nav-assets .nav-assets-btn:last-child {
  margin-right: 0;
}
.nav-assets .nav-assets-btn,
.nav-assets .nav-assets-btn.active,
.nav-assets .nav-assets-btn:hover {
  /*border: none;*/
  /*background: #567187;*/
  /*border-right: 1px solid rgba(255,255,255,0.25);*/
  margin-left: 0 !important;
}
.nav-assets .nav-assets-btn.btn:hover {
  background: rgba(211, 226, 255, 1);
}
.nav-assets .nav-assets-btn:last-child {
  /* border-right: none; */
  margin-right: none;
}
.nav-assets .nav-assets-btn .title {
  text-align: center;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
}
.nav-assets .nav-assets-btn:hover,
.nav-assets .nav-assets-btn:focus,
.nav-assets .nav-assets-btn:active {
  /* color: #fff; */
  /* background: #714DFF; */
  border: 1px solid rgba(39, 65, 174, 0.6);
  box-shadow: 0 6px 18px rgba(0,0,0,0.75);
}
.nav-assets .nav-assets-btn.btn.active,
.nav-assets .nav-assets-btn.btn.active:focus,
.nav-assets .nav-assets-btn.btn.active:hover {
  background: #2741AE;
  color: #fff;
}
.nav-assets .nav-assets-btn .icon {
  color: rgba(0,0,0,0.18);
  font-size: 1.9rem;
  font-size: 2.5rem;
  opacity: 0.3;
}
.nav-assets .nav-assets-btn.active .icon {
  color: rgba(255,255,255,0.9);
  filter: invert(1);
  opacity: 0.6;
}
.nav-assets .nav-assets-btn .num {
  /*color: rgba(255,255,255,0.8);*/
  margin-left: 0.8rem;
  font-size: 1.35rem;
  align-self: center;
  display: none;
}
body.blank .scene-bg-container {
  /*visibility: hidden;*/
}
html.view-grid .scene-container {
  opacity: 0.1;
}
.scene-container.is-bundle .av-poi {
  pointer-events: none;
}
.scene-container.is-bundle .av-poi:not(.filled) {
  display: none;
}
.scene-container.is-bundle .av-poi .ctrl-bmi {
  display: none;
}
.scene-container.is-bundle .av-poi .av-dropper .inner {
  display: none;
}
.scene-container.is-bundle .av-poi .btn-remove {
  display: none;
}
.scene-container.duplicated .scene-bg-container {
  animation: sceneContainerDuplicated 0.4s;
}
@keyframes sceneContainerDuplicated {
  from {
    opacity: 0.4;
    transform: scale(0.8, 0.8);
  }
  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}
.scene-bg-video {
  /*position: absolute;*/
  /*top: 0; right: 0; bottom: 0; left: 0;*/
  /*z-index: 0;*/
  opacity: 0.6;
}
.scene-bg-container {
  z-index: 10;
  visibility: initial;
  position: relative;
  /*position: absolute;*/
  /*top: 0; right: 0; bottom: 0; left: 0;*/
  /*overflow: hidden;*/
  /*border-top-right-radius: 8px;*/
  /*border-top-left-radius: 8px;*/
}
.scene-bg {
  opacity: 1;
  visibility: initial;
}
.scene-bg.blank {
  /*visibility: hidden;*/
  /*opacity: 0;*/
}
body.blank .scene-bg {
  /*opacity: 0.4;*/
  box-shadow: inset 0 0 40px rgba(0,0,0,0.6);
}
.scene-instruction-container {
  min-width: 480px;
}
.scene-instructions {
  z-index: 3;
  display: none;
  /*padding: 1.3rem;*/
  line-height: 1.1;
  /*background: #4A6173;*/
  text-align: left;
  color: rgba(255,255,255,0.9);
  font-weight: 400;
  font-size: 1.2rem;
}
.scene-instructions.show {
  display: block;
}
html.view-grid .hover-preview-img {
  display: none;
}
.hover-preview-img {
  position: absolute;
  box-shadow: 0 3px 15px rgba(0,0,0,0.3);
  transform: translateY(1rem);
  pointer-events: none;
  opacity: 0;
  transition: all 0.2s ease-out;
  z-index: 100;
  border: 7px solid rgba(240,240,240,0.6);
  border-radius: 8px;
}
.hover-preview-img.active {
  transform: translateY(0);
  opacity: 1;
}
body.dragging .hover-preview-img {
  display: none;
}
.filter-hidden,
.filter-hide-gender,
.filter-hide-age,
.filter-hide-seats,
.filter-hide-position,
.filter-hide-type,
.filter-hide-group,
.filter-hide-style,
.filter-hide-controllers,
.filter-hide-bmi,
.filter-hide-dimension,
.filter-hide-release,
.filter-hide-client,
.filter-hide-setting,
.filter-hide-bodyGroup,
.filter-hide-envAutoBrand {
  display: none;
}
.asset-auto-filter {
  display: none;
}
.asset-auto-filter.show {
  display: block;
}
.auto-filter-hide {
  display: none;
}
.scene-poi-container {
  z-index: 15;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}
.introjs-helperNumberLayer {
  background: #E60800;
  border: none;
  width: 27px;
  height: 27px;
  line-height: 27px;
}
.btn-view {
  display: flex;
}
.btn-view.hide {
  display: none;
}
.items-nav-btn {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  padding: 2rem 0.8rem;
  background: rgba(255,97,92,0.9);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  z-index: 10;
  cursor: pointer;
  display: block;
}
.items-nav-btn:hover,
.items-nav-btn:focus {
  background: rgba(255,97,92,1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.items-nav-btn .icon {
  font-size: 2rem;
  color: #fff;
}
.items-nav-btn-next {
  right: 0;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}
.items-nav-btn-prev {
  left: 0;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}
.items-nav-btn {
/*html.view-grid .items-nav-btn {*/
  display: none;
}
article {
  padding: 0;
  position: initial;
}

.main-container {
  /*display: none;*/
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 5;
  transform: translateX(0);
  pointer-events: none;
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.5s;
}
.main-container.init,
.main-container .main-container-art.init,
.main-container .main-container-scenario.init,
.main-container .main-container-config.init {
  transform: translateX(0);
  z-index: 5;
  opacity: 1;
}
.main-container.active {
  z-index: 100;
  opacity: 1;
  transform: translateX(0%);
  pointer-events: initial;
}
.main-container-art {
  transform: translateX(-100%);
  z-index: 5;
  background: #222;
}
.main-container-art.gen-4 #poi-ctrl-bmi {
  display: none;
}
.main-container-scenario, .main-container-config {
  transform: translateX(100%);
  overflow: hidden;
  background: #f1efee;
  display: flex;
  flex-direction: column;
}
.main-container-scenario:after {
  content: "";
  position: fixed;
  right: 1rem; left: 0; bottom: 0;
  height: 13%;
  pointer-events: none;
  background: linear-gradient(rgba(241,239,238, 0), rgba(241,239,238, 1));
}
.main-container-scenario blockquote {
  border-left-color: #FFBFC9;
}
.main-container-scenario .btn.toggle {
}
.main-container-scenario .btn.toggle.active {
  border: 1px solid #db5c58;
  background: linear-gradient(45deg, #FF615C, #f38950);
  color: #fff;
}
.main-container-art .nav-assets-heading {
  display: none;
  margin-bottom: 1.6rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
body.blank .main-container-art.scene-regular .nav-assets-heading.heading-regular,
body.blank .main-container-art.scene-host .nav-assets-heading.heading-host {
  display: block;
}
html.view-grid .main-container-art .nav-assets-heading {
  display: none !important;
}

.btn.main-nav-select-btn {
  /*border: none;*/
  /*color: #fff;*/
  font-size: 1.2rem;
  text-transform: uppercase;
  padding: 1rem 1rem;
  /*display: flex;*/
  /*justify-content: center;*/
}
.btn.main-nav-select-btn,
.btn.main-nav-select-btn:hover,
.btn.main-nav-select-btn:focus {
  /*box-shadow: none;*/
}
.btn.main-nav-select-btn .icon {
  font-size: 1.5rem;
}

.btn.main-nav-select-btn.art {
  /*background: #FFD670;*/
  /*color: #05243D;*/
  /*border: 1px solid #58aec3;*/
}
.btn.main-nav-select-btn.art .icon {
  /*color: #05243D;*/
}
.btn.main-nav-select-btn.art:hover,
.btn.main-nav-select-btn.art:focus {
  /*color: #fff;*/
  /*background: #FECD53;*/
}
.btn.main-nav-select-btn.scenario {
  /*background: #05243D;*/
  /*color: #FFD670;*/
  /*border: 1px solid #a344ac;*/
}
.btn.main-nav-select-btn.scenario .icon {
  /*color: #FFD670;*/
}
.btn.main-nav-select-btn.scenario:hover,
.btn.main-nav-select-btn.scenario:focus {
  /*color: #fff;*/
  /*background: #09365A;*/
}

.main-nav-preview {
  position: absolute;
  top: 7rem;
  z-index: 100;
  padding: 1rem;
  background: rgba(255,255,255,0.7);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  border-radius: 8px;
  padding: 1.8rem;
  padding-top: 4.2rem;
  /*height: 300px;*/
  transition: all 0.1s;
  cursor: pointer;
  overflow: hidden;
  color: #444;
}
.main-nav-preview.right {
  width: 350px;
  right: -1rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-right: 4.5rem;
}
.main-nav-preview.minimize {
  cursor: zoom-in;
}
.main-nav-preview.minimize .headline {
  /*transform: rotate(90deg);*/
}
.main-nav-preview.right.minimize {
  transform: translateX(90%);
}
.main-nav-preview.left {
  position: fixed;
  background: #fafafa;
  width: 350px;
  left: -1rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 4.5rem;
}
.main-nav-preview.left.minimize {
  transform: translateX(-90%);
}
.main-nav-preview .headline {
  position:absolute;
  right:0;top:0;left:0;
  z-index:10;
  padding: 0.6rem 1rem;
}
.main-nav-preview.left .headline {
  padding-left: 2.8rem;
  background: linear-gradient(30deg,#6E4AFF,#c75cff);
}
.main-nav-preview .headline h3 {
  color: rgba(255,255,255,0.94)
}
.main-nav-preview.right .headline {
  padding-right: 2.8rem;
  background: linear-gradient(45deg, #FF615C, #f38950);
}
.main-nav-preview .headline .icon {
  color: rgba(0,0,0,0.3);
}
.main-nav-preview .arrow {
  width: 3rem;
  position: absolute;
  top: 0; bottom: 0;
  height: 100%;
  /*background: #fff;*/
  background: rgba(0,0,0,0.05);
  text-align: center;
}
.main-nav-preview .preview-placeholder img {
  opacity: 0.95;
}
.main-nav-preview:hover .preview-placeholder img {
  opacity: 1;
}
.main-nav-preview:hover .arrow {
  background: rgba(0,0,0,0.11);
}
.main-nav-preview .preview-btn-hide {
  position: absolute;
  top: 0.6rem;
  background: rgba(0,0,0,0.1);
  color: #fff;
  z-index: 10;
}
.main-nav-preview .preview-btn-hide .icon {
  color: rgba(0,0,0,0.25);
}
.main-nav-preview.right .preview-btn-hide {
  right: 1.6rem;
}
.main-nav-preview.left .preview-btn-hide {
  right: 0.6rem;
}
.main-nav-preview .arrow .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.2rem;
  right: 0; left: 0;
}
.main-nav-preview .arrow.right {
  right: 0;
}
.main-nav-preview .arrow.left {
  left: 0;
}
.main-nav-preview .arrow.right .icon {
  transform: translate(-10%,-50%);
}
.main-nav-preview .arrow.left .icon {
  transform: translate(10%,-50%);
}
.main-nav-preview:hover {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
.main-nav-preview.right:hover {
  right: 0rem;
}
.main-nav-preview.right.minimize:hover {
  transform: translateX(85%);
}
.main-nav-preview.left:hover {
  left: 0rem;
}
.main-nav-preview.left.minimize:hover {
  transform: translateX(-85%);
}
.subnav.small {
  margin-bottom: 0;
}
.subnav.small button.subnav-btn {
  font-size: 1.3rem;
}
.preview-btn-show {
  top: 7rem;
  position: absolute;
  color: #fff;
  z-index: 10;
  padding: 0.8rem;
}
.preview-btn-show .icon {
  color: rgba(0,0,0,0.25);
}
.preview-btn-show.left {
  left: 0;
  background: #6fd1e8;
}
.preview-btn-show.right {
  right: 0;
  background: #c964d2;
}

.scenario-bank-card-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /*margin-right: -4%;*/
  /*padding-right: 2.5%;*/
  justify-content: center;
  /*padding: 0 2.5%;*/
}
.card.med.scenario-card {
  flex: 1 0 49%;
  min-width: 300px;
  margin-left: 0.5%;
  margin-right: 0.5%;
  margin-bottom: 1%;
  padding: 18px;
  align-self: start;
}
.scenario-bank-category-card-container-inner {
  /*margin-right: -0.5%;*/
  /*margin-left: -0.5%;*/
}
.scenario-bank-category-card-container-inner label.checkbox {
  font-size: 1.15rem;
}
.scenario-bank-category-card-container-inner .card.med.scenario-card {
  padding: 1.3rem;
  /*flex: 0 0 49%;*/
  /*margin-left: 0.5%;*/
  /*margin-right: 0.5%;*/
  /*margin-bottom: 1%;*/
}
.scenario-bank-category-card-container-inner .card.scenario-card h4 {
  font-size: 1.4rem;
}
.scenario-bank-scenario-card-container-inner {
  /*margin-right: -1%;*/
  /*margin-left: -1%;*/
}
.card.med.scenario-card {
  /*margin-bottom: 1.5%;*/
}
.card.export-action-btn {
  border-width: 2px;
  padding: 1rem;
}
.card.export-action-btn.selected {
  /* padding: 17px; */
  border: 2px solid #7ECC9C;
  background: #F9FFFB;
  /* box-shadow: 0 2px 10px rgba(28, 64, 42, 0.4); */
}
.card.export-action-btn > img {
  border: 1px solid #ddd;
  background:#fff;
}
.card.export-action-btn .selected-check {
  position: absolute;
  right: 0.6rem;
  top: 0.6rem;
  display: none;
  font-size: 2rem;
  color: #7ECC9C;
}
.card.export-action-btn.selected .selected-check {
  display: block;
}
.scenario-card .selected-check {
  display: none;
}
.card.med.scenario-card.selected,
.card.med.scenario-card.selected:hover {
  padding: 17px;
  border: 2px solid #7ECC9C;
  background: #F9FFFB;
  box-shadow: 0 2px 10px rgba(28, 64, 42, 0.4);
}
.scenario-card.selected .selected-check .icon {
  font-size: 2.5rem;
  color: #7ECC9C;
}
.scenario-card.selected .selected-check {
  display: block;
}
.scenario-card .inner {
  min-width: 0;
}
.scenario-card .subname {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}
.scenario-card .desc {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.scenario-card .overflow {
  display: none;
}
.scenario-card.active {
}
.scenario-card.hide {
  display: none;
}
.scenario-card.active .overflow {
  display: block;
}
.scenario-card.active .desc {
  -webkit-line-clamp: initial;
}
.scenario-card .tag-container {
  margin-top: 0.8rem;
}
.scenario-section-bank .tag,
.scenario-section-bank .tag:hover,
.scenario-section-bank .tag:focus {
  color: #fff;
  line-height: 1.5;
  opacity: 0.7;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
}
.scenario-card .tag-all { background: #aaa; }
.scenario-card .tag-all:hover { background: #999; }
.scenario-card .tag-most-popular { background: #83cff8; }
.scenario-card .tag-diversity-and-inclusion { background: #d7424c; }
.scenario-card .tag-customer-service { background: #ca89fe; }
.scenario-card .tag-education { background: #ffb968; }
.scenario-card .tag-negotiation { background: #75d4d7; }
.scenario-card .tag-working-remotely { background: #9590f6; }
.scenario-card .tag-covid-19 { background: #6ba446; }
.scenario-card .tag-healthcare { background: #cbad5e; }

.scenario-bank-filters .tag,
.scenario-bank-filters .tag:hover,
.scenario-bank-filters .tag:focus {
  color: #555;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  border-style: solid;
  border-width: 2px;
}
.scenario-bank-filters .tag-all { border-color: #aaa; }
.scenario-bank-filters .tag-most-popular { border-color: #83cff8; }
.scenario-bank-filters .tag-diversity-and-inclusion { border-color: #d7424c; }
.scenario-bank-filters .tag-customer-service { border-color: #ca89fe; }
.scenario-bank-filters .tag-education { border-color: #ffb968; }
.scenario-bank-filters .tag-negotiation { border-color: #75d4d7; }
.scenario-bank-filters .tag-working-remotely { border-color: #9590f6; }
.scenario-bank-filters .tag-covid-19 { border-color: #6ba446; }
.scenario-bank-filters .tag-healthcare { border-color: #cbad5e; }

.scenario-bank-filters .tag.active { color: #fff; }
.scenario-bank-filters .tag-all.active { background: #aaa; }
.scenario-bank-filters .tag-most-popular.active { background: #83cff8; }
.scenario-bank-filters .tag-diversity-and-inclusion.active { background: #d7424c; }
.scenario-bank-filters .tag-customer-service.active { background: #ca89fe; }
.scenario-bank-filters .tag-education.active { background: #ffb968; }
.scenario-bank-filters .tag-negotiation.active { background: #75d4d7; }
.scenario-bank-filters .tag-working-remotely.active { background: #9590f6; }
.scenario-bank-filters .tag-covid-19.active { background: #6ba446; }
.scenario-bank-filters .tag-healthcare.active { background: #cbad5e; }

.nav-page-mobile-btn {
  display: none;
  position: absolute;
  top: 1rem;
  left: 0;
  background: rgba(255,255,255,0.6);
  z-index: 20;
  padding: 0.5rem 0.8rem;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  cursor: pointer;
}
.nav-page-mobile-btn .icon {
  color: #555;
  font-size: 2rem;
}
.nav-page-mobile-btn:hover,
.nav-page-mobile-btn:focus {
  background: rgba(255,255,255,0.9);
  box-shadow: 0 2px 15px rgba(0,0,0,0.6);
}
.slideshow .slide {
  opacity: 0;
  transition: opacity 1.2s;
}
.slideshow .slide:first-of-type,
.slideshow .slide.show {
  opacity: 1;
}

.slideshow {
  position: relative;
}
.slideshow img {
  opacity: 0;
  transition: opacity 0.7s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* z-index: 1; */
  transition-delay: 1s;
}
.slideshow img:last-of-type {
  transition-delay: 0s;
}
.slideshow img:first-of-type {
  position: relative;
}
.slideshow img.show:first-of-type {
  position: relative;
  opacity: 1;
}

.slideshow img.show {
  opacity: 1;
  transition-delay: 0s;
  /*z-index: 2;*/
}

.spinner {
  animation: spinner 0.7s infinite linear;
  transform-origin: 50% 50%;
}
@keyframes spinner {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}
.blinking {
  animation: blinking 1s linear infinite;
}
@keyframes blinking {
  0% { opacity: 1; }
  49.9% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 0; }
}

.export-naming-container {
  position: relative;
  /*padding: 1rem;*/
  margin-top: 0.5rem;
  /*display: none !important;*/
  z-index: 50;
  /*border-radius: 8px;*/
}
.export-naming-container .heading {
  /*color: #fff;*/
  margin-bottom: 0.2rem;
}
.export-client-name-inner .heading .icon,
.export-project-name-inner .heading .icon {
  color: rgba(0,0,0,0.6);
}
.export-client-name-inner,
.export-project-name-inner,
.remote-art-list .inner {
  /*position: absolute;*/
  /*padding: 0.5rem;*/
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  /* height: 160px; */
  height: 200px;
  resize: vertical;
  min-height: 0;
  overflow-y: auto;
  /*background: rgba(0,0,0,0.8);*/
  /*color: rgba(255,255,255,0.8);*/
  border-radius: 4px;
  white-space: nowrap;
  background: 
    linear-gradient(rgba(234, 239, 243, 0.3) 33%, rgba(244,244,243, 0)),
    linear-gradient(rgba(244,244,243, 0), rgba(234, 239, 243, 0.3) 66%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(234, 239, 243, 0.3), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(234, 239, 243, 0.3), rgba(0,0,0,0)) 0 100%;
  background-color: rgba(234, 239, 243, 0.3);
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
  background-size: 100% 48px, 100% 48px, 100% 16px, 100% 16px;
}
.remote-art-list .inner {
  height: 240px;
}
.export-client-name-inner .readout,
.export-project-name-inner .readout {
  flex-shrink: 1;
  min-width: 0;
  /* text-overflow: ellipsis; */
  /* overflow-x: hidden; */
}
.export-naming-container .readout.bundles {
  /*padding: 0.5rem;*/
  background: rgba(0,0,0,0.04);
  border: 1px solid #e1ebff;
  border-radius: 4px;
}
.export-client-name-inner .readout .client,
.export-project-name-inner .readout .project,
.export-naming-container .bundles .bundle,
.remote-art-list .inner .client,
.remote-art-list .inner .project,
.remote-art-list .inner .bundle {
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  padding-right: 2rem;
  line-height: 1.2;
  border-bottom: 1px solid #D3E2FF;
  position: relative;
  min-width: 0;
  /* overflow-x: hidden; */
  overflow-y: visible;
  text-overflow: ellipsis;
  display: flex;
}
.export-naming-container .bundle-new {
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  line-height: 1.2;
  margin-top: 0.5rem;
  border-radius: 4px;
}
.export-naming-container .bundle-new:hover {
  background: rgba(0,0,0,0.05);
}
.export-client-name-inner .readout .client .icon.check,
.export-project-name-inner .readout .project .icon.check,
.export-naming-container .bundles .bundle .icon.check,
.remote-art-list .inner .client .icon.check,
.remote-art-list .inner .project .icon.check,
.remote-art-list .inner .bundle .icon.check {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  font-size: 1.2rem;
  color: #2741AE;
}
.export-client-name-inner .readout .client.active .icon.check,
.export-project-name-inner .readout .project.active .icon.check,
.export-naming-container .bundles .bundle.active .icon.check,
.remote-art-list .inner .client.active .icon.check,
.remote-art-list .inner .project.active .icon.check,
.remote-art-list .inner .bundle.active .icon.check {
  display: initial;
}
.export-client-name-inner .readout .client:last-child,
.export-project-name-inner .readout .project:last-child,
.export-naming-container .bundles .bundle:last-child,
.remote-art-list .inner .client:last-child,
.remote-art-list .inner .project:last-child,
.remote-art-list .inner .bundle:last-child {
  border-bottom: none;
}
.export-client-name-inner .readout .client:hover,
.export-project-name-inner .readout .project:hover,
.export-naming-container .bundles .bundle:hover,
.remote-art-list .inner .client:hover,
.remote-art-list .inner .project:hover,
.remote-art-list .inner .bundle:hover {
  /* background: rgba(0,0,0,0.05); */
  background: #D3E2FF;
  color: #2741AE;
}
.export-client-name-inner .readout .client.active,
.export-project-name-inner .readout .project.active,
.export-naming-container .bundles .bundle.active,
.remote-art-list .inner .client.active,
.remote-art-list .inner .project.active,
.remote-art-list .inner .bundle.active {
  background: #D3E2FF;
  color: #2741AE;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.export-client-name-inner .readout .client .name,
.export-project-name-inner .readout .project .name,
.export-naming-container .bundles .bundle .name,
.remote-art-list .inner .client .name,
.remote-art-list .inner .project .name,
.remote-art-list .inner .bundle .name {
  min-width: 0;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.export-field-env-brand-logo-preview-container {
  background: #f6f6f6;
  padding-top: 56.3%;
  position: relative;
  /* border: 1px solid #ccc; */
  background-image:
    linear-gradient(45deg, #eaeaea 25%, transparent 25%), 
    linear-gradient(135deg, #eaeaea 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eaeaea 75%),
    linear-gradient(135deg, transparent 75%, #eaeaea 75%);
  background-size:25px 25px; /* Must be a square */
  background-position:0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; /* Must be half of one side of the square */
}
.export-field-env-brand-logo-preview {
  /* border: 1px solid #ccc; */
  position: absolute;
  right: 0;
  top: 50%;
  left: 0;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  transform: translateY(-50%);
}

body > #hubspot-messages-iframe-container {
  display: none !important;
}
.poi-add-remove {
  position: absolute;
  top: 62px;
  /* border-radius: 1rem; */
  right: 0;
  left: 0;
  z-index: 20;
  margin-right: auto;
  margin-left: auto;
  padding: 1rem;
  background: rgba(0,0,0,0.7);
  display: table;
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow-x: auto;
}
.poi-add-remove.hide {
  display: none;
}
.poi-add-remove .heading {
  color: #fff;
  text-shadow: 0 1px 5px rgba(0,0,0,0.6);
  font-size: 1.45rem;
  line-height: 1.3;
}
body.blank .poi-add-remove {
  display: none;
}
.av-poi-btn {
  /*flex: 1;*/
}
.av-poi-btn:not(:first-child) {
  margin-left: 0.8rem;
}

/*Host design custom*/
.main-container-art.scene-host .scene-container {
  /*display: flex;*/
  /*flex-direction: row;*/
}
.main-container-art.scene-host .scene-bg-container {
  overflow: hidden;
}
body.blank .main-container-art.scene-host .scene-poi-container {
  display: none;
}
.main-container-art.scene-host .scene-poi-container {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  right: 2rem;
  left: 2rem;
  top: 121px;
  bottom: initial;
  flex-shrink: 0;
  padding-top: 2rem;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  padding-bottom: 1.7rem;
  /* overflow-x: auto; */
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.5);
  /* border: 1px solid #11234F; */
  /* box-shadow: 0 0 25px rgba(0,0,0,0.55); */
  margin-left: auto;
  margin-right: auto;
  min-height: 0;
  flex-wrap: wrap;
  justify-content: center;
  /* max-height: 70%; */
  height: calc(100% - 250px);
  /* padding-bottom: 180px; */
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
.main-container-art.scene-host .av-poi {
  position: relative;
  transform: none;
  left: initial !important;
  top: initial !important;
  align-self: center;
  align-self: flex-start;
  margin: 0;
  margin-bottom: 3rem;
  transform: scale(0.9, 0.9);
  margin-right: 2rem;
}

.main-container-art.scene-host .av-poi:nth-child(1) { z-index: 30; }
.main-container-art.scene-host .av-poi:nth-child(2) { z-index: 29; }
.main-container-art.scene-host .av-poi:nth-child(3) { z-index: 28; }
.main-container-art.scene-host .av-poi:nth-child(4) { z-index: 27; }
.main-container-art.scene-host .av-poi:nth-child(5) { z-index: 26; }
.main-container-art.scene-host .av-poi:nth-child(6) { z-index: 25; }
.main-container-art.scene-host .av-poi:nth-child(7) { z-index: 24; }
.main-container-art.scene-host .av-poi:nth-child(8) { z-index: 23; }
.main-container-art.scene-host .av-poi:nth-child(9) { z-index: 22; }
.main-container-art.scene-host .av-poi:nth-child(10) { z-index: 21; }
.main-container-art.scene-host .av-poi:nth-child(11) { z-index: 20; }
.main-container-art.scene-host .av-poi:nth-child(12) { z-index: 19; }
.main-container-art.scene-host .av-poi:nth-child(13) { z-index: 18; }

.main-container-art.scene-host .av-poi .number,
.main-container-art.scene-host .av-poi .btn-remove {
  display: block;
  z-index: 20;
}
.main-container-art.scene-host .poi-add-remove {
  /* top: 50%; */
  /* transform: translateY(-50%); */
  /*left: initial;
  right: 1.2rem;
  top: initial;
  bottom: 1rem;
  z-index: 30;*/
}
.main-container-art.scene-host .ctrl-bmi {
  /* display: none; */
}
#status-msg-text h4 {
  padding-top: 1rem;
  border-top: 1px solid #dcdcdc;
}
#status-msg-text h4:first-child {
  padding-top: 0;
  border-top: none;
}

/* @media (max-width: 850px) {
  .nav-asset-container {
  }
  .scene-instructions-container {
    min-width: 0;
    padding: 0 !important;
  }
  .nav-page {
    display: none;
  }
  .main-nav-preview {
    top: 1rem;
    padding: 0;
    width: auto;
  }
  .main-nav-preview.right,
  .main-nav-preview.left {
    width: auto;
    padding: 0;
  }
  .main-nav-preview.right {
    right: 0;
  }
  .main-nav-preview.left {
    left: 0;
  }
  .main-nav-preview .headline {
    position: relative;
  }
  .main-nav-preview .arrow {
    z-index: 10;
    background: transparent;
    width: 2rem;
  }
  .main-nav-preview .arrow.right .icon {
    transform: translate(0,-53%);
  }
  .main-nav-preview .arrow.left .icon {
    transform: translate(0,-53%);
  }
  .main-nav-preview .arrow .icon {
    color: rgba(255,255,255,0.55);
  }
  .preview-placeholder {
    display: none;
  }
  .main-nav-preview .preview-btn-hide {
    display: none;
  }
  .nav-page-mobile-btn {
    display: block;
  }
  html.view-grid .nav-asset-container {
    padding: 0;
  }
  html.view-grid .nav-and-assets {
    background: none;
    opacity: 0;
    pointer-events: none;
  }
  html.view-grid #art-scene-container {
    opacity: 0;
    pointer-events: none;
  }
  .hbs-container {
    bottom: 0;
    z-index: 0;
  }
  html.view-grid .scene-container {
    opacity: 0;
    pointer-events: none;
  }
  .nav-assets {
    margin-bottom: 0;
    position: fixed;
    right: 0;
    left: 0;
    transform: translateY(-100%);
  }
  .nav-assets .nav-assets-btn {
    padding: 0.6rem 1rem 1rem;
    margin: 0;
    border-radius: 0;
  }
  .nav-assets .nav-assets-btn .num {
    display: none;
  }
  .items-avatars .tile, .items-container.per-row-3 .tile {
    flex: 0 0 50%;
  }
  .items-container.items-outfits .tile, .items-container.per-row-5 .tile {
    flex: 0 0 33.33%;
  }
  .items-scroll-container .items-environments .tile,
  .items-scroll-container .items-hosts .tile {
    flex: 0 0 calc(50% - 6px);
  }
  .asset-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 1rem;
    padding-bottom: 0;
    margin-right: -0.7rem;
    margin-left: -0.7rem;
    border-bottom: 1px solid #ddd;
  }
  .asset-controls > div {
    margin-bottom: 0.9rem;
    margin-right: 0.7rem;
    margin-left: 0.7rem;
    padding-right: 0;
    padding-left: 0;
  }
  .asset-controls .assets-data {
    position: relative;
    transform: none;
    top: initial;
    left: initial;
  }
  .asset-view-change-btn.asset-view-change-btn-hide {
    position: relative;
    top: initial;
    transform: none;
    right: initial;
    margin-right: 1rem;
  }
} */


/** POI Sizes **/
@media (min-width: 0) {
  .av-poi .av-dropper {
    width: 5.8rem;
    height: 6.65rem;
  }
  .av-poi .outfit-dropper {
    width: 3.2rem;
    height: 6.64rem;
  }
}
@media (min-width: 950px) {
  .av-poi .av-dropper {
    width: 8.7rem;
    height: 10rem;
  }
  .av-poi .outfit-dropper {
    width: 4.8rem;
    height: 10rem;
  }
}
@media (min-width: 1300px) {
  .av-poi .av-dropper {
    height: 13.3rem;
    width: 11.6rem;
  }
  .av-poi .outfit-dropper {
    height: 13.3rem;
    width: 6.4rem;
  }
}
@media (min-width: 1600px) {
  .av-poi .av-dropper {
    width: 13.3rem;
    height: 15.3rem;
  }
  .av-poi .outfit-dropper {
    width: 7.34rem;
    height: 15.29rem;
  }
}
@media (min-width: 1900px) {
  .av-poi .av-dropper {
    width: 16.3rem;
    height: 19.3rem;
  }
  .av-poi .outfit-dropper {
    width: 9rem;
    height: 19.3rem;
  }
}