/*css!/common/withme/js/widget/shoppingTile/ShoppingTile.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.shopping-tile .product-info,
.small-shopping-tile .product-info {
  display: grid;
  grid-auto-columns: 1fr min-content;
  grid-template-rows: 25px; }
  .shopping-tile .product-info .product-name,
  .small-shopping-tile .product-info .product-name {
    grid-column-start: 1;
    grid-column-end: 3; }
  .shopping-tile .product-info .price-info,
  .small-shopping-tile .product-info .price-info {
    display: flex;
    line-height: 20px;
    grid-column: 1; }
  .shopping-tile .product-info .cart-button,
  .small-shopping-tile .product-info .cart-button {
    grid-column: 2; }

.shopping-tile .owned-label,
.small-shopping-tile .owned-label {
  display: none; }

.shopping-tile .displayonly-label,
.small-shopping-tile .displayonly-label {
  display: none; }

.shopping-tile .price-credits,
.small-shopping-tile .price-credits {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.shopping-tile.is-wearing.cannot-remove .remove-button,
.small-shopping-tile.is-wearing.cannot-remove .remove-button {
  display: none; }

.shopping-tile.owned > .tile-body .remove-button,
.small-shopping-tile.owned > .tile-body .remove-button {
  display: none; }

.shopping-tile.owned > .product-info .price-info .price-credits,
.small-shopping-tile.owned > .product-info .price-info .price-credits {
  display: none; }

.shopping-tile.owned > .product-info .price-info .price-vcoin,
.small-shopping-tile.owned > .product-info .price-info .price-vcoin {
  display: none; }

.shopping-tile.owned > .product-info .price-info .price-vcoin,
.small-shopping-tile.owned > .product-info .price-info .price-vcoin {
  display: none; }

.shopping-tile.owned > .product-info .price-info .owned-label,
.small-shopping-tile.owned > .product-info .price-info .owned-label {
  display: inline-block; }

.shopping-tile.displayonly > .tile-body .remove-button,
.small-shopping-tile.displayonly > .tile-body .remove-button {
  display: none; }

.shopping-tile.displayonly > .product-info .price-info .price-credits,
.small-shopping-tile.displayonly > .product-info .price-info .price-credits {
  display: none; }

.shopping-tile.displayonly > .product-info .price-info .price-vcoin,
.small-shopping-tile.displayonly > .product-info .price-info .price-vcoin {
  display: none; }

.shopping-tile.displayonly > .product-info .price-info .displayonly-label,
.small-shopping-tile.displayonly > .product-info .price-info .displayonly-label {
  display: inline-block;
  color: #a8a8a8;
  letter-spacing: 1px; }

.shopping-tile.owned.displayonly > .product-info .price-info .displayonly-label,
.small-shopping-tile.owned.displayonly > .product-info .price-info .displayonly-label {
  display: none; }

.shopping-tile.admin-select-view .tile-body .unselected-icon,
.small-shopping-tile.admin-select-view .tile-body .unselected-icon {
  bottom: 4px;
  display: block;
  height: 25px;
  position: absolute;
  right: 4px;
  width: 25px; }

.shopping-tile.admin-select-view .tile-body .selected-icon,
.small-shopping-tile.admin-select-view .tile-body .selected-icon {
  bottom: 2px;
  display: none;
  height: 25px;
  position: absolute;
  right: 2px;
  width: 25px; }

.shopping-tile.admin-select-view.is-selected .tile-body::after,
.small-shopping-tile.admin-select-view.is-selected .tile-body::after {
  opacity: 1;
  transition: none;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid #404040;
  overflow: hidden; }

.shopping-tile.admin-select-view.is-selected .tile-body .selected-icon,
.small-shopping-tile.admin-select-view.is-selected .tile-body .selected-icon {
  display: block; }

.shopping-tile.admin-select-view.is-selected .tile-body .unselected-icon,
.small-shopping-tile.admin-select-view.is-selected .tile-body .unselected-icon {
  display: none; }
/*css!/common/withme/js/widget/ProductTile.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.product-tile:after {
  content: none; }

.product-tile.loaded > .tile-body:hover::before {
  opacity: 1; }

.product-tile > .tile-body {
  position: relative; }
  .product-tile > .tile-body::before {
    transition: opacity 0.15s ease;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.2);
    content: "";
    opacity: 0; }
  .product-tile > .tile-body > .info {
    transition: opacity 0.15s ease;
    position: absolute;
    right: 3px;
    bottom: 5px;
    display: block;
    padding: 0;
    background: none;
    color: #fff;
    font-size: 23px;
    line-height: 25px;
    width: 25px;
    height: 25px;
    min-height: 25px;
    opacity: 0; }
    .product-tile > .tile-body > .info::before {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    .product-tile > .tile-body > .info::before {
      content: ""; }
  .product-tile > .tile-body .ap ~ .distinguish-status-shields {
    top: 27px; }

.product-tile .price-vcoin {
  color: #22144F; }
  .product-tile .price-vcoin svg .color-1 {
    fill: #22144F; }

.product-tile .more-info {
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  color: #deb359;
  float: right;
  line-height: 20px;
  cursor: pointer; }
  .product-tile .more-info::before {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
  .product-tile .more-info::before {
    content: ""; }

.product-tile .cart-button {
  width: 25px;
  height: 25px; }
  .product-tile .cart-button > svg {
    width: 25px;
    height: 25px; }

.product-tile .in-cart-btn {
  display: none;
  cursor: default; }

.product-tile.owned .cart-button, .product-tile.displayonly .cart-button {
  display: none !important; }

.product-tile.in-cart .cart-button.add-to-cart-btn {
  display: none; }

.product-tile.in-cart .cart-button.in-cart-btn {
  display: block; }

.product-tile .roomdeco2-replace {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 6px;
  border-radius: 15px;
  width: 30px;
  height: 30px;
  background-color: #fff;
  color: #404040;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  opacity: 0.5; }
  .product-tile .roomdeco2-replace:hover {
    opacity: 1; }
  .product-tile .roomdeco2-replace:active {
    opacity: 0.5625; }
  .product-tile .roomdeco2-replace svg {
    pointer-events: none;
    position: relative;
    top: -1px; }

.product-tile .roomdeco2-trash {
  position: absolute;
  left: 5px;
  bottom: calc(62px + 5px);
  cursor: pointer;
  width: 26px;
  height: 26px;
  padding: 5px;
  color: #404040; }
  .product-tile .roomdeco2-trash:hover {
    opacity: 0.75; }
  .product-tile .roomdeco2-trash:active {
    opacity: 0.5625; }
  .product-tile .roomdeco2-trash svg {
    pointer-events: none; }

.product-tile .roomdeco2-trash-all {
  position: absolute;
  right: 5px;
  bottom: calc(62px + 5px);
  cursor: pointer;
  width: 32px;
  height: 32px;
  padding: 5px;
  color: #404040; }
  .product-tile .roomdeco2-trash-all:hover {
    opacity: 0.75; }
  .product-tile .roomdeco2-trash-all:active {
    opacity: 0.5625; }
  .product-tile .roomdeco2-trash-all svg {
    pointer-events: none; }

.product-tile .instance-picker {
  position: absolute;
  bottom: 32px;
  height: 30px;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.5); }
  .product-tile .instance-picker .instance-picker-text {
    position: absolute;
    inset: 0;
    text-align: center;
    line-height: 30px; }
  .product-tile .instance-picker .instance-picker-left {
    left: 0;
    text-align: left; }
  .product-tile .instance-picker .instance-picker-right {
    text-align: right;
    right: 0; }
  .product-tile .instance-picker .instance-picker-left,
  .product-tile .instance-picker .instance-picker-right {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    transition: all ease-in 0.05s; }
    .product-tile .instance-picker .instance-picker-left:hover,
    .product-tile .instance-picker .instance-picker-right:hover {
      opacity: 0.5; }
    .product-tile .instance-picker .instance-picker-left:active,
    .product-tile .instance-picker .instance-picker-right:active {
      opacity: 0.25; }
    .product-tile .instance-picker .instance-picker-left svg,
    .product-tile .instance-picker .instance-picker-right svg {
      pointer-events: none;
      height: 100%;
      padding: 4px;
      margin: 0 3px; }
  .product-tile .instance-picker .instance-picker-right svg {
    transform: scaleX(-1); }
/*css!/common/withme/js/widget/productStatus/ProductStatusShields.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.product-status-shields {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  transition: all 0.3s;
  opacity: 1;
  pointer-events: none; }
  .product-status-shields .product-status-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); }
  .product-status-shields .product-status-icon-row {
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    position: relative;
    display: flex;
    align-items: center; }
    .product-status-shields .product-status-icon-row + .product-status-icon-row {
      margin-top: 2px; }
  .product-detail-widget .product-status-shields {
    align-items: flex-start;
    justify-content: flex-start;
    color: #404040; }
    .product-detail-widget .product-status-shields .product-status-icon-group {
      padding: 1em; }
    .product-detail-widget .product-status-shields .product-status-icon-row {
      background-color: #fff;
      flex-direction: column;
      width: 80px;
      height: 80px;
      justify-content: center;
      align-items: center;
      font-size: 10px; }
      .product-detail-widget .product-status-shields .product-status-icon-row + .product-status-icon-row {
        margin-top: 6px; }
    .product-detail-widget .product-status-shields .product-status-icon {
      font-size: 24px; }
/*css!/common/waf/js/widget/distinguishStatus/DistinguishStatus.css*/
.distinguish-status-shields {
  font-size: 12px;
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  height: 100%;
  display: flex;
  pointer-events: none; }
  .distinguish-status-shields.start-end {
    justify-content: flex-start;
    align-items: flex-end; }
  .distinguish-status-shields.end-start {
    justify-content: flex-end;
    align-items: flex-start; }
  .distinguish-status-shields.start-start {
    justify-content: flex-start;
    align-items: flex-start; }
  .distinguish-status-shields.end-end {
    justify-content: flex-end;
    align-items: flex-end; }
  .distinguish-status-shields.offset .distinguish-border {
    display: none; }
  .distinguish-status-shields.offset .distinguish-status {
    margin: 10px; }
  .distinguish-status-shields.small .distinguish-border {
    display: none; }
  .distinguish-status-shields.small .distinguish-status {
    font-size: 0.6em;
    margin: 5px; }

.distinguish-border {
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  height: 100%;
  border-style: solid;
  background-color: #AF339A;
  border-image-slice: 1;
  border-width: 1px; }

.distinguish-status svg {
  vertical-align: middle;
  width: 25px;
  height: 16px; }
/*css!/common/withme/js/widget/productDetailSidebar/SubproductList.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.subproduct-list {
  display: flex;
  flex-wrap: wrap; }
  .subproduct-list .product-tile {
    width: calc(50% - 8px);
    height: auto;
    position: relative; }
    .subproduct-list .product-tile:nth-child(n+3) {
      margin-top: 15px; }
    .subproduct-list .product-tile:not(:nth-child(2n)) {
      margin-right: 15px; }
    .subproduct-list .product-tile .price-info {
      white-space: nowrap; }
/*css!/common/withme/js/dialog/inventoryOutfitLightbox/InventoryOutfitLightbox.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.lightbox-dialog.inventory-outfit-lightbox .main-container {
  background: url(/asset/dda1635ac47b868a/common/withme/img/ftux_dressingroom_landscape.jpg) no-repeat 50% 50%/cover; }

.lightbox-dialog.inventory-outfit-lightbox .inventory-outfit-headpiece .picture {
  overflow: hidden; }
  .lightbox-dialog.inventory-outfit-lightbox .inventory-outfit-headpiece .picture > img {
    width: 100%;
    height: auto;
    background-color: #d4d4d4; }

.lightbox-dialog.inventory-outfit-lightbox .panel-container .scroller:not(.scroll-wrapper) > * {
  margin-right: 15px;
  margin-left: 15px; }

.lightbox-dialog.inventory-outfit-lightbox .accordion-section:first-child {
  margin-top: 10px; }
/*css!/common/withme/js/widget/AccordionSection/AccordionSection.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.accordion-section {
  border-bottom: solid 1px #d4d4d4; }
  .accordion-section .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 55px;
    cursor: pointer; }
    .accordion-section .title h2.body-heading {
      margin: 0; }
    .accordion-section .title .toggle {
      width: 25px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      font-size: 16px; }
      .accordion-section .title .toggle .icon-page-right {
        transform: rotate(90deg);
        transition: transform 0.3s; }
  .accordion-section .content-wrapper {
    overflow: hidden;
    height: 0;
    transition: height 0.3s; }
  .accordion-section .content {
    margin-bottom: 20px; }
  .accordion-section.open .title .toggle .icon-page-right {
    transform: rotate(-90deg); }
  .accordion-section.open .content-wrapper {
    height: auto; }
  .accordion-section.accordion-section-small {
    border: 0; }
    .accordion-section.accordion-section-small .title {
      font-size: 10px;
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      color: #a8a8a8;
      text-transform: uppercase;
      letter-spacing: 1px;
      line-height: 16px;
      border-bottom: 1px solid #d4d4d4;
      margin-bottom: 10px;
      height: auto; }
      .accordion-section.accordion-section-small .title .body-heading {
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal;
        padding: 3px 0;
        color: inherit;
        font-size: inherit;
        height: auto; }
      .accordion-section.accordion-section-small .title .toggle {
        margin: 0 5px -2px 0; }
/*css!/common/waf/js/widget/standardHeadpiece/StandardHeadpiece.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.standard-headpiece .main-info {
  height: 75px;
  display: flex;
  font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: normal;
  font-style: normal;
  box-sizing: border-box; }
  .standard-headpiece .main-info .picture {
    margin-right: 10px;
    position: relative;
    width: 75px;
    height: 75px;
    flex-shrink: 0; }
    .standard-headpiece .main-info .picture > img {
      width: 100%;
      height: 100%; }
    .standard-headpiece .main-info .picture.loading {
      background: none;
      cursor: default;
      overflow: hidden; }
      .standard-headpiece .main-info .picture.loading::before {
        background: linear-gradient(-45deg, #d4d4d4 0%, #d4d4d4 20%, #bbbbbb 40%, #d4d4d4 60%);
        animation: shimmer 1s forwards infinite linear, opacity 0.15s;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        content: '';
        width: 800px;
        height: 150px;
        box-shadow: none;
        z-index: 1; }
    .standard-headpiece .main-info .picture.error .image-placeholder {
      width: 100%;
      height: 100%;
      background: #a8a8a8;
      display: inline-flex;
      align-items: center;
      justify-content: center; }
      .standard-headpiece .main-info .picture.error .image-placeholder svg {
        width: 50px;
        height: 50px; }
  .standard-headpiece .main-info .text {
    overflow: hidden;
    max-width: 230px; }
    .standard-headpiece .main-info .text .primary-text {
      text-transform: capitalize;
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 18px;
      line-height: 20px;
      max-height: 40px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden; }
    .standard-headpiece .main-info .text .secondary-text {
      line-height: 16px;
      color: #a8a8a8;
      padding-top: 5px; }
      .standard-headpiece .main-info .text .secondary-text .name {
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal; }
    .standard-headpiece .main-info .text .display-name {
      margin-top: 5px; }

html[dir="rtl"]
.standard-headpiece .main-info .picture {
  margin-right: 0;
  margin-left: 10px; }
/*css!/common/waf/js/widget/nftStatusBadge/NFTStatusBadge.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.nft-status-badge {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 100%; }
  .nft-status-badge .nft-status-badge-container {
    width: 25px;
    height: 25px;
    background: conic-gradient(from 167.84deg at 46% 50%, #2F1F00 -4deg, #2F1F00 95.47deg, #7D5200 142.56deg, #2F1F00 188.53deg, #2F1F00 289.6deg, #7D5200 324.81deg, #2F1F00 356deg, #2F1F00 455.47deg); }
    .nft-status-badge .nft-status-badge-container.offset-10 {
      margin: 10px; }
    .nft-status-badge .nft-status-badge-container.offset-5 {
      margin: 5px; }
    .nft-status-badge .nft-status-badge-container svg {
      width: 25px;
      height: 27px; }
/*css!/common/waf/js/dialog/lightboxDialog/LightboxDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.lightbox-dialog .lightbox {
  background-color: #f2f2f2; }
  .lightbox-dialog .lightbox .main-container {
    position: relative;
    height: 100%; }
    .lightbox-dialog .lightbox .main-container:empty {
      background-color: #404040; }
    .lightbox-dialog .lightbox .main-container .avatar-2d {
      background-size: cover;
      background-image: url("/asset/dda1635ac47b868a/common/withme/img/ftux_dressingroom_landscape.jpg"); }
      .lightbox-dialog .lightbox .main-container .avatar-2d .silhouette {
        display: none; }
      .lightbox-dialog .lightbox .main-container .avatar-2d::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        background: rgba(0, 0, 0, 0.75);
        transition: opacity 0.65s ease;
        opacity: 1; }
      .lightbox-dialog .lightbox .main-container .avatar-2d.populated::before {
        opacity: 0; }
  .lightbox-dialog .lightbox .mobile-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 1; }
    .lightbox-dialog .lightbox .mobile-overlay > * {
      pointer-events: auto; }
    .lightbox-dialog .lightbox .mobile-overlay .panel-footers {
      position: absolute;
      bottom: 0;
      width: 100%; }
      .lightbox-dialog .lightbox .mobile-overlay .panel-footers [data-panel]:not(.selected) {
        display: none; }
  .lightbox-dialog .lightbox .panel-container:not(.selected) {
    display: none; }
  .lightbox-dialog .lightbox .panel-container > * {
    transition: opacity 0.3s; }
  .lightbox-dialog .lightbox .panel-container.loading::after {
    top: 40px; }
  .lightbox-dialog .lightbox .panel-container.loading > * {
    opacity: 0; }
  .lightbox-dialog .lightbox .panel-footers .panel-container.loading::after {
    display: none; }
  .lightbox-dialog .lightbox .sticky-content {
    background-color: #fff;
    width: 100%; }
    .lightbox-dialog .lightbox .sticky-content .nav-container {
      display: none;
      height: 50px;
      line-height: 50px;
      position: relative;
      text-align: center; }
      .lightbox-dialog .lightbox .sticky-content .nav-container .nav.center-nav {
        display: block;
        margin: 0 auto;
        padding: 0; }
        .lightbox-dialog .lightbox .sticky-content .nav-container .nav.center-nav li {
          transition: opacity 0.15s;
          padding: 0 15px; }
          .lightbox-dialog .lightbox .sticky-content .nav-container .nav.center-nav li:hover {
            opacity: 0.75; }
          .lightbox-dialog .lightbox .sticky-content .nav-container .nav.center-nav li:active {
            opacity: 0.5625; }
          .lightbox-dialog .lightbox .sticky-content .nav-container .nav.center-nav li.active {
            font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
            font-weight: 500;
            font-style: normal;
            color: #404040; }
      .lightbox-dialog .lightbox .sticky-content .nav-container .magic-line {
        transition: margin-left 0.3s, width 0.3s;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 0;
        margin-left: 0;
        border-bottom: solid 2px #404040; }
  .lightbox-dialog .lightbox .lightbox-sidebar .sidebar-content .headpiece .widgets {
    background-color: #fff; }
    .lightbox-dialog .lightbox .lightbox-sidebar .sidebar-content .headpiece .widgets:not(:empty) {
      padding: 15px; }
  .lightbox-dialog .lightbox .lightbox-sidebar .sidebar-content .headpiece.has-buttons .widgets:not(:empty), .lightbox-dialog .lightbox .lightbox-sidebar .sidebar-content .headpiece.has-nav .widgets:not(:empty) {
    padding-bottom: 0; }
  .lightbox-dialog .lightbox .lightbox-sidebar .sidebar-content .sidebar-panels {
    flex-grow: 1;
    position: relative; }
    .lightbox-dialog .lightbox .lightbox-sidebar .sidebar-content .sidebar-panels .panel-container {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden; }
      .lightbox-dialog .lightbox .lightbox-sidebar .sidebar-content .sidebar-panels .panel-container .scroller {
        overflow-y: auto;
        height: 100%; }
        .lightbox-dialog .lightbox .lightbox-sidebar .sidebar-content .sidebar-panels .panel-container .scroller::after {
          content: '';
          height: 30px;
          display: block; }

.desktop [data-ui-role="modal-dialog"].lightbox-dialog {
  height: auto;
  min-width: 0;
  max-width: none;
  padding: 50px;
  min-width: 1000px; }
  .desktop [data-ui-role="modal-dialog"].lightbox-dialog .dialog-container {
    background: none;
    padding: 0;
    max-height: none;
    height: 100%; }
    .desktop [data-ui-role="modal-dialog"].lightbox-dialog .dialog-container .dialog-header {
      display: none; }
    .desktop [data-ui-role="modal-dialog"].lightbox-dialog .dialog-container .dialog-title {
      display: none; }
    .desktop [data-ui-role="modal-dialog"].lightbox-dialog .dialog-container .dialog-body {
      margin: 0;
      padding: 0;
      height: auto; }
    .desktop [data-ui-role="modal-dialog"].lightbox-dialog .dialog-container .dialog-x {
      z-index: 1; }
  .desktop [data-ui-role="modal-dialog"].lightbox-dialog .lightbox {
    display: flex; }
    .desktop [data-ui-role="modal-dialog"].lightbox-dialog .lightbox .main-container {
      min-width: 555px;
      flex-shrink: 0; }
    .desktop [data-ui-role="modal-dialog"].lightbox-dialog .lightbox .lightbox-sidebar {
      min-width: 345px;
      width: 345px;
      flex-shrink: 0;
      position: relative; }
      .desktop [data-ui-role="modal-dialog"].lightbox-dialog .lightbox .lightbox-sidebar .sidebar-content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column; }

.mobile [data-ui-role="modal-dialog"].lightbox-dialog {
  position: relative;
  padding: 40px 15px 15px 15px;
  min-width: 0;
  max-width: 500px;
  max-height: 755px;
  height: 100%; }
  .mobile [data-ui-role="modal-dialog"].lightbox-dialog .dialog-container {
    position: relative;
    max-width: 470px;
    min-width: 0;
    padding: 0;
    background: none;
    display: block; }
    .mobile [data-ui-role="modal-dialog"].lightbox-dialog .dialog-container .dialog-header {
      background-color: #fff;
      border-radius: 4px 4px 0 0; }
      .mobile [data-ui-role="modal-dialog"].lightbox-dialog .dialog-container .dialog-header .dialog-title {
        height: 50px;
        line-height: 50px; }
    .mobile [data-ui-role="modal-dialog"].lightbox-dialog .dialog-container .dialog-body {
      border-radius: 0 0 4px 4px;
      overflow: hidden;
      display: block;
      height: calc(100% - 50px); }
    .mobile [data-ui-role="modal-dialog"].lightbox-dialog .dialog-container.no-header .dialog-body {
      height: 100%; }
    .mobile [data-ui-role="modal-dialog"].lightbox-dialog .dialog-container.no-header .dialog-body {
      border-radius: 4px; }
  .mobile [data-ui-role="modal-dialog"].lightbox-dialog .lightbox {
    display: block;
    height: 100%;
    position: relative; }
    .mobile [data-ui-role="modal-dialog"].lightbox-dialog .lightbox .main-container {
      min-width: 0;
      overflow: hidden;
      z-index: 0; }
    .mobile [data-ui-role="modal-dialog"].lightbox-dialog .lightbox .lightbox-sidebar {
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      z-index: 1;
      position: relative; }
      .mobile [data-ui-role="modal-dialog"].lightbox-dialog .lightbox .lightbox-sidebar .panel-container {
        position: relative;
        background-color: #f2f2f2;
        min-height: 80px; }
        .mobile [data-ui-role="modal-dialog"].lightbox-dialog .lightbox .lightbox-sidebar .panel-container .scroller {
          height: auto;
          overflow-y: visible; }
  .mobile [data-ui-role="modal-dialog"].lightbox-dialog.lightbox-b {
    padding: 0;
    width: 100%; }
    .mobile [data-ui-role="modal-dialog"].lightbox-dialog.lightbox-b .dialog-container {
      max-width: 100%; }
      .mobile [data-ui-role="modal-dialog"].lightbox-dialog.lightbox-b .dialog-container .dialog-body {
        border-radius: 0;
        height: 100%; }
      .mobile [data-ui-role="modal-dialog"].lightbox-dialog.lightbox-b .dialog-container .dialog-header {
        display: flex;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
        width: 100%;
        position: absolute;
        height: 50px;
        border-radius: 0; }
      .mobile [data-ui-role="modal-dialog"].lightbox-dialog.lightbox-b .dialog-container .dialog-x {
        position: absolute;
        top: 0;
        left: 0;
        line-height: 50px;
        padding-left: 15px;
        padding-bottom: 0;
        color: #fff; }
      .mobile [data-ui-role="modal-dialog"].lightbox-dialog.lightbox-b .dialog-container.non-transparent .dialog-header {
        background: #fff;
        border-bottom: 1px solid #f2f2f2; }
        .mobile [data-ui-role="modal-dialog"].lightbox-dialog.lightbox-b .dialog-container.non-transparent .dialog-header .dialog-title, .mobile [data-ui-role="modal-dialog"].lightbox-dialog.lightbox-b .dialog-container.non-transparent .dialog-header .edit-profile {
          color: #404040; }
      .mobile [data-ui-role="modal-dialog"].lightbox-dialog.lightbox-b .dialog-container.non-transparent .dialog-x {
        color: #404040 !important; }
/*css!/common/waf/js/dialog/lightboxDialog/LightboxButtons.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.lightbox-buttons {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  padding: 15px; }
  .lightbox-buttons .btn {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 150px;
    padding-left: 0;
    padding-right: 0;
    height: 44px; }
  .lightbox-buttons .btn-ghost {
    margin-right: 10px; }
    .lightbox-buttons .btn-ghost.in-cart {
      color: #a8a8a8;
      border-color: #a8a8a8; }
/*css!/common/waf/js/widget/stickyContainer/StickyContainer.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
/*css!/common/withme/js/dialog/inventoryOutfitLightbox/InventoryOutfitActionBar.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.inventory-outfit-action-bar {
  font-size: 24px;
  margin-top: 15px;
  position: relative; }
  .inventory-outfit-action-bar .credits {
    font-size: 18px;
    letter-spacing: 0;
    color: #deb359;
    line-height: 20px; }
  .inventory-outfit-action-bar .owned-label, .inventory-outfit-action-bar .displayonly-label {
    font-size: 12px;
    color: #a8a8a8;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }
  .inventory-outfit-action-bar .wishlist-container {
    display: inline-block;
    overflow: hidden;
    width: 26px;
    height: 26px; }
    .inventory-outfit-action-bar .wishlist-container.hidden {
      display: none; }
  .inventory-outfit-action-bar .price-info, .inventory-outfit-action-bar .icons {
    display: inline-block; }
  .inventory-outfit-action-bar .icons {
    float: right; }
    .inventory-outfit-action-bar .icons .icon {
      transition: opacity 0.15s;
      cursor: pointer;
      color: #a8a8a8;
      display: inline-block; }
      .inventory-outfit-action-bar .icons .icon:hover {
        opacity: 0.75; }
      .inventory-outfit-action-bar .icons .icon:active {
        opacity: 0.5625; }
      .inventory-outfit-action-bar .icons .icon.more-info::before {
        font-family: 'icomoon';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
      .inventory-outfit-action-bar .icons .icon.more-info::before {
        content: ""; }
      .inventory-outfit-action-bar .icons .icon.gift::before {
        font-family: 'icomoon';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
      .inventory-outfit-action-bar .icons .icon.gift::before {
        content: ""; }
      .inventory-outfit-action-bar .icons .icon.wishlist::before {
        font-family: 'icomoon';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
      .inventory-outfit-action-bar .icons .icon.wishlist::before {
        content: ""; }
      .inventory-outfit-action-bar .icons .icon {
        margin-right: 10px; }
      .inventory-outfit-action-bar .icons .icon.hidden {
        display: none; }
      .inventory-outfit-action-bar .icons .icon.in-wishlist {
        width: 25px;
        height: 25px; }
        .inventory-outfit-action-bar .icons .icon.in-wishlist svg {
          width: 28px;
          height: 28px;
          position: relative;
          top: 1px;
          right: 3px; }
    .inventory-outfit-action-bar .icons .icon.add-to-wishlist::before {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    .inventory-outfit-action-bar .icons .icon.add-to-wishlist::before {
      content: ""; }
    .inventory-outfit-action-bar .icons .icon.remove-from-wishlist::before {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    .inventory-outfit-action-bar .icons .icon.remove-from-wishlist::before {
      content: ""; }
    .inventory-outfit-action-bar .icons .wishlist-container,
    .inventory-outfit-action-bar .icons > .icon {
      margin-left: 10px; }
/*css!/common/withme/js/widget/bundleCount/BundleCount.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.bundle-count {
  width: 25px;
  height: 25px;
  position: absolute;
  left: 5px;
  bottom: 5px; }
  .bundle-count svg {
    width: 100%;
    height: 100%; }
  .bundle-count .count {
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    line-height: 22px;
    color: #404040;
    font-size: 10px;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }
/*css!/common/withme/js/widget/productDetailSidebar/ActionTile.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.action-tile .tile-body.playable {
  cursor: pointer;
  transition: opacity 0.15s; }
  .action-tile .tile-body.playable:hover {
    opacity: 0.75; }
  .action-tile .tile-body.playable:active {
    opacity: 0.5625; }

.action-tile .name-overlay {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 18px 2px 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 15px;
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal; }
  .action-tile .name-overlay .trigger-name {
    cursor: default; }
  .action-tile .name-overlay svg {
    position: absolute;
    left: 5px;
    bottom: 5px;
    width: 25px;
    height: 25px; }
/*css!/common/withme/js/widget/productDetailSidebar/ActionList.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.action-list .action-product:not(:last-child) {
  margin-bottom: 10px; }
/*css!/common/withme/js/dialog/shoppingCartLightbox/ShoppingCartLightbox.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.lightbox-dialog.shopping-cart-lightbox .main-container {
  background: url(/asset/dda1635ac47b868a/common/withme/img/ftux_dressingroom_landscape.jpg) no-repeat 50% 50%/cover; }

.lightbox-dialog.shopping-cart-lightbox .panel-container .scroller:not(.scroll-wrapper) > * {
  margin-right: 15px;
  margin-left: 15px; }

.lightbox-dialog.shopping-cart-lightbox .scroller > .Wipe-Reveal,
.lightbox-dialog.shopping-cart-lightbox .scroller > .credits-widget {
  margin-top: 15px; }

.lightbox-dialog.shopping-cart-lightbox .cart-error,
.lightbox-dialog.shopping-cart-lightbox .cart-product-list,
.lightbox-dialog.shopping-cart-lightbox .inventory-product-list {
  margin-top: 10px; }

.lightbox-dialog.shopping-cart-lightbox .loading-placeholder-list {
  padding: 0; }
  .lightbox-dialog.shopping-cart-lightbox .loading-placeholder-list .loading-placeholder-list-item .thumbnail-wrap {
    width: 75px;
    height: 75px;
    padding: 0;
    margin: 10px 10px 10px 0; }

.lightbox-dialog.shopping-cart-lightbox .undo-widget {
  position: absolute;
  right: 15px;
  top: 15px; }
/*css!/common/withme/js/widget/cart/CartProductList.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.cart-product-list .cart-notification {
  display: none; }
  .cart-product-list .cart-notification.cart-empty-content svg {
    margin-left: 10px; }

.cart-product-list.is-empty:not(.has-unavailables):not(.has-errors) .cart-empty-content {
  display: block; }

.cart-product-list.has-unavailables .cart-unavailable-content {
  display: block; }

.cart-product-list.has-errors .cart-error-content {
  display: block; }
/*css!/common/withme/js/widget/cart/CartProductItem.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.cart-product-item {
  display: none;
  position: relative;
  border-bottom: solid 1px #d4d4d4; }
  .cart-product-item:not(:empty) {
    display: block; }
  .cart-product-item .cart-item-info {
    display: flex; }
    .cart-product-item .cart-item-info .product-row {
      flex-grow: 1;
      overflow: hidden; }
      .cart-product-item .cart-item-info .product-row .row {
        border-bottom: none; }
        .cart-product-item .cart-item-info .product-row .row .ap ~ .distinguish-status-shields {
          top: 27px; }
    .cart-product-item .cart-item-info .buttons {
      height: 100%;
      color: #a8a8a8; }
      .cart-product-item .cart-item-info .buttons .more {
        font-size: 20px;
        margin-top: 5px;
        margin-left: 15px;
        cursor: pointer;
        transition: opacity 0.15s; }
        .cart-product-item .cart-item-info .buttons .more::before {
          font-family: 'icomoon';
          speak: none;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          /* Better Font Rendering =========== */
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale; }
        .cart-product-item .cart-item-info .buttons .more::before {
          content: ""; }
        .cart-product-item .cart-item-info .buttons .more:hover {
          opacity: 0.75; }
        .cart-product-item .cart-item-info .buttons .more:active {
          opacity: 0.5625; }
      .cart-product-item .cart-item-info .buttons .remove {
        position: absolute;
        top: 62px;
        right: -6px;
        cursor: pointer;
        transition: opacity 0.15s; }
        .cart-product-item .cart-item-info .buttons .remove:hover {
          opacity: 0.75; }
        .cart-product-item .cart-item-info .buttons .remove:active {
          opacity: 0.5625; }
        .cart-product-item .cart-item-info .buttons .remove svg {
          width: 25px;
          height: 25px; }
  .cart-product-item .expanding-section {
    display: none;
    text-align: center;
    color: #a8a8a8;
    font-size: 12px;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }
    .cart-product-item .expanding-section.shown {
      display: block; }
    .cart-product-item .expanding-section .show,
    .cart-product-item .expanding-section .hide {
      cursor: pointer;
      width: 100%;
      padding-bottom: 15px;
      text-transform: capitalize; }
    .cart-product-item .expanding-section .show {
      padding-top: 5px; }
    .cart-product-item .expanding-section .hide {
      padding-top: 10px;
      display: none; }
    .cart-product-item .expanding-section .list-container {
      margin-bottom: 5px;
      display: none; }
  .cart-product-item .expanding-section.expanded .show {
    display: none; }
  .cart-product-item .expanding-section.expanded .hide,
  .cart-product-item .expanding-section.expanded .list-container {
    display: block; }
  .cart-product-item .expanding-section.subproducts.shown + .expanding-section.actions.shown {
    margin-top: -5px; }

html[dir="rtl"] .cart-product-item .cart-item-info .buttons .more {
  margin-left: 0;
  margin-right: 15px; }

html[dir="rtl"] .cart-product-item .cart-item-info .buttons .remove {
  right: auto;
  left: -6px; }
/*css!/common/withme/js/widget/productRow/ProductRow.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.product-row .row {
  display: flex;
  padding: 10px 0;
  border-bottom: solid 1px #d4d4d4; }
  .product-row .row.can-toggle {
    cursor: pointer; }
  .product-row .row .product-img {
    width: 75px;
    height: 75px;
    position: relative;
    background-color: #d4d4d4;
    flex-shrink: 0; }
    .product-row .row .product-img img {
      width: 100%;
      height: 100%; }
    .product-row .row .product-img .ap-badge {
      position: absolute;
      top: 5px;
      right: 5px; }
    .product-row .row .product-img .wearing-indicator {
      display: none;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      box-shadow: inset 0 0 0 2px #404040;
      color: #404040;
      font-size: 20px; }
      .product-row .row .product-img .wearing-indicator::before {
        font-family: 'icomoon';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
      .product-row .row .product-img .wearing-indicator::before {
        content: "";
        position: absolute;
        right: 5px;
        bottom: 0px; }
  .product-row .row .product-info {
    width: 100%;
    margin-left: 10px;
    position: relative;
    font-size: 12px;
    overflow: hidden; }
    .product-row .row .product-info .product-name {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      color: #404040;
      line-height: 16px;
      max-height: 32px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical; }
    .product-row .row .product-info .created-by {
      margin-top: 2px;
      color: #a8a8a8; }
      .product-row .row .product-info .created-by .creator-name {
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal; }
    .product-row .row .product-info .price-info {
      position: absolute;
      bottom: 0; }

.product-row.is-wearing .row .wearing-indicator {
  display: block; }

.product-row.error {
  background: none;
  cursor: pointer; }
  .product-row.error .product-img .cover-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d4d4d4;
    transition: opacity 0.15s ease; }
    .product-row.error .product-img .cover-image-placeholder svg {
      width: 80px;
      height: 80px; }
  .product-row.error:hover > .product-img .preview-image-placeholder {
    background: #a8a8a8; }

html[dir="rtl"] .product-row .row .product-img .ap-badge {
  right: auto;
  left: 5px; }

html[dir="rtl"] .product-row .row .product-img .wearing-indicator::before {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

html[dir="rtl"] .product-row .row .product-img .wearing-indicator::before {
  content: "";
  right: auto;
  left: 5px;
  bottom: 0px; }

html[dir="rtl"] .product-row .row .product-info {
  margin-left: 0;
  margin-right: 10px; }
/*css!/common/withme/js/widget/wipeReveal/WipeReveal.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
@keyframes happy-crown {
  0% {
    transform: rotate(-15deg); }
  4% {
    transform: rotate(15deg); }
  8% {
    transform: rotate(-18deg) scale(1); }
  12% {
    transform: rotate(18deg) scale(1); }
  16% {
    transform: rotate(-22deg) scale(1);
    opacity: 1; }
  20% {
    transform: rotate(22deg) scale(1);
    opacity: 1; }
  24% {
    transform: rotate(-18deg) scale(1);
    opacity: 1; }
  28% {
    transform: rotate(18deg) scale(1);
    opacity: 1; }
  32% {
    transform: rotate(-12deg);
    opacity: 1; }
  36% {
    transform: rotate(12deg);
    opacity: 1; }
  100%, 40% {
    transform: rotate(0deg); } }

.Wipe-Reveal {
  height: 74px;
  margin-bottom: 10px; }
  .Wipe-Reveal.hide-upsell .wipe-trigger,
  .Wipe-Reveal.hide-upsell .wipe {
    display: none; }
  .Wipe-Reveal .above {
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: width 0.3s ease-in;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    color: #a8a8a8;
    z-index: 1;
    height: 74px;
    background: #fff;
    width: 100%;
    font-size: 10px;
    white-space: nowrap;
    opacity: 1; }
  .Wipe-Reveal .above:hover {
    cursor: pointer; }
  .Wipe-Reveal .below-base {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 74px;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    z-index: 3; }
  .Wipe-Reveal .below-base:hover {
    cursor: pointer; }
  .Wipe-Reveal .below-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    transition: all 0.3s ease-in;
    text-align: center;
    opacity: 0;
    width: 0;
    height: 74px;
    overflow: hidden; }
  .Wipe-Reveal .below {
    position: absolute;
    right: 0;
    white-space: nowrap;
    height: 60px; }
  .Wipe-Reveal .wipe-container {
    position: relative;
    height: 74px;
    margin: 0 auto;
    font-size: 10px;
    overflow: hidden; }
  .Wipe-Reveal .wipe-container .wipe {
    transition: transform 0.3s ease-in, margin-right 0.3s ease-in; }
  .Wipe-Reveal .wipe-container .wipe-trigger.hover,
  .Wipe-Reveal .wipe-container .wipe-trigger.peeled-back {
    width: 50%;
    height: 100%; }
    .Wipe-Reveal .wipe-container .wipe-trigger.hover .crown-icon-wrapper,
    .Wipe-Reveal .wipe-container .wipe-trigger.peeled-back .crown-icon-wrapper {
      transition: opacity 0.4s ease-in-out;
      opacity: 0; }
    .Wipe-Reveal .wipe-container .wipe-trigger.hover + .below-base .below-wrapper,
    .Wipe-Reveal .wipe-container .wipe-trigger.peeled-back + .below-base .below-wrapper {
      opacity: 1; }
    .Wipe-Reveal .wipe-container .wipe-trigger.hover + .below-base .below-wrapper,
    .Wipe-Reveal .wipe-container .wipe-trigger.peeled-back + .below-base .below-wrapper {
      width: 127.5px; }
    .Wipe-Reveal .wipe-container .wipe-trigger.hover + .below-base + .wipe,
    .Wipe-Reveal .wipe-container .wipe-trigger.peeled-back + .below-base + .wipe {
      transform: rotate(15deg) translateY(-10px);
      margin-right: 100px; }
  .Wipe-Reveal .wipe-trigger {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
    z-index: 4;
    opacity: 1;
    cursor: pointer; }
    .Wipe-Reveal .wipe-trigger .crown-icon {
      transform-origin: bottom center;
      animation-name: happy-crown;
      animation-duration: 2.5s;
      animation-timing-function: ease-in;
      animation-iteration-count: infinite;
      position: absolute;
      right: 4px;
      bottom: 4px;
      width: 12px;
      height: 12px;
      color: #fff;
      opacity: 1;
      fill-rule: evenodd;
      fill: #fff; }
    .Wipe-Reveal .wipe-trigger .crown-icon-wrapper {
      transition: opacity 0.4s ease-in-out;
      opacity: 1; }
  .Wipe-Reveal .wipe {
    transform: rotate(45deg);
    width: 255px;
    height: 255px;
    position: absolute;
    right: -210px;
    top: 0;
    background: #deb359;
    margin-right: 0;
    z-index: 2; }
/*css!/common/waf/js/widget/buyCreditList/BuyCreditList.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.buy-credit-list .system-info-header {
  margin-bottom: 10px; }
/*css!/common/waf/js/widget/buyCreditList/BuyCreditListItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.buy-credit-list-item {
  position: relative;
  background: #fff; }
  .buy-credit-list-item .item-info {
    color: #a8a8a8;
    text-transform: uppercase; }
  .buy-credit-list-item .item-price {
    color: #deb359;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }
    .buy-credit-list-item .item-price span.original-price {
      text-decoration: line-through; }
    .buy-credit-list-item .item-price .title {
      text-transform: uppercase; }

.dialog-body .buy-credit-list-item, .submode-buycredit .buy-credit-list-item {
  padding: 0 15px; }
  .dialog-body .buy-credit-list-item:hover, .submode-buycredit .buy-credit-list-item:hover {
    cursor: pointer; }
  .dialog-body .buy-credit-list-item .wrapper, .submode-buycredit .buy-credit-list-item .wrapper {
    height: 70px;
    display: flex;
    border-bottom: solid 1px #f2f2f2; }
    .dialog-body .buy-credit-list-item .wrapper .item-info, .submode-buycredit .buy-credit-list-item .wrapper .item-info {
      line-height: 70px;
      width: 70px;
      text-align: center; }
      .dialog-body .buy-credit-list-item .wrapper .item-info .image-container, .submode-buycredit .buy-credit-list-item .wrapper .item-info .image-container {
        width: 50px;
        height: 100%;
        padding: 10px 0; }
        .dialog-body .buy-credit-list-item .wrapper .item-info .image-container img, .submode-buycredit .buy-credit-list-item .wrapper .item-info .image-container img {
          width: 50px; }
    .dialog-body .buy-credit-list-item .wrapper .item-price, .submode-buycredit .buy-credit-list-item .wrapper .item-price {
      color: #404040;
      padding-top: 20px; }
      .dialog-body .buy-credit-list-item .wrapper .item-price .has-discount.prices, .submode-buycredit .buy-credit-list-item .wrapper .item-price .has-discount.prices {
        color: #ff374d; }
      .dialog-body .buy-credit-list-item .wrapper .item-price .title, .submode-buycredit .buy-credit-list-item .wrapper .item-price .title {
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal; }
      .dialog-body .buy-credit-list-item .wrapper .item-price span.original-price, .submode-buycredit .buy-credit-list-item .wrapper .item-price span.original-price {
        color: #404040; }
    .dialog-body .buy-credit-list-item .wrapper .promo-banner, .submode-buycredit .buy-credit-list-item .wrapper .promo-banner {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      position: absolute;
      right: 20px;
      top: 25px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      color: #fff;
      font-size: 10px; }
      .dialog-body .buy-credit-list-item .wrapper .promo-banner.sale, .submode-buycredit .buy-credit-list-item .wrapper .promo-banner.sale {
        width: 50px;
        background: #ff374d; }
      .dialog-body .buy-credit-list-item .wrapper .promo-banner.best-value, .dialog-body .buy-credit-list-item .wrapper .promo-banner.most-popular, .submode-buycredit .buy-credit-list-item .wrapper .promo-banner.best-value, .submode-buycredit .buy-credit-list-item .wrapper .promo-banner.most-popular {
        width: 100px;
        background: #404040; }
  .dialog-body .buy-credit-list-item.selected-item, .submode-buycredit .buy-credit-list-item.selected-item {
    background: #404040; }
    .dialog-body .buy-credit-list-item.selected-item .item-price, .submode-buycredit .buy-credit-list-item.selected-item .item-price {
      color: #fff; }
      .dialog-body .buy-credit-list-item.selected-item .item-price .has-discount.prices, .submode-buycredit .buy-credit-list-item.selected-item .item-price .has-discount.prices {
        color: #ff374d; }
      .dialog-body .buy-credit-list-item.selected-item .item-price span.original-price, .submode-buycredit .buy-credit-list-item.selected-item .item-price span.original-price {
        color: #fff; }
    .dialog-body .buy-credit-list-item.selected-item .wrapper, .submode-buycredit .buy-credit-list-item.selected-item .wrapper {
      border: 0; }

.submode-store .buy-credit-list .buy-credit-list-item, .submode-payment-methods .buy-credit-list .buy-credit-list-item {
  font-size: 12px;
  text-align: center;
  width: 150px;
  height: 190px;
  display: inline-block;
  padding-right: 0; }
  .submode-store .buy-credit-list .buy-credit-list-item:hover, .submode-payment-methods .buy-credit-list .buy-credit-list-item:hover {
    cursor: pointer;
    opacity: 0.75; }
  .submode-store .buy-credit-list .buy-credit-list-item:nth-child(3n+1), .submode-payment-methods .buy-credit-list .buy-credit-list-item:nth-child(3n+1) {
    margin-right: 0; }
  .submode-store .buy-credit-list .buy-credit-list-item .item-info, .submode-payment-methods .buy-credit-list .buy-credit-list-item .item-info {
    height: 150px;
    width: 150px;
    line-height: 1.4; }
    .submode-store .buy-credit-list .buy-credit-list-item .item-info .image-container, .submode-payment-methods .buy-credit-list .buy-credit-list-item .item-info .image-container {
      height: 115px;
      width: 100%;
      padding: 25px 35px 10px; }
      .submode-store .buy-credit-list .buy-credit-list-item .item-info .image-container .helper, .submode-payment-methods .buy-credit-list .buy-credit-list-item .item-info .image-container .helper {
        display: inline-block;
        vertical-align: middle;
        height: 100%; }
      .submode-store .buy-credit-list .buy-credit-list-item .item-info .image-container img, .submode-payment-methods .buy-credit-list .buy-credit-list-item .item-info .image-container img {
        vertical-align: middle;
        width: 80px; }
  .submode-store .buy-credit-list .buy-credit-list-item .item-price, .submode-payment-methods .buy-credit-list .buy-credit-list-item .item-price {
    background: #deb359;
    color: #fff;
    height: 40px;
    width: 150px;
    line-height: 40px; }
  .submode-store .buy-credit-list .buy-credit-list-item .promo-banner.best-value, .submode-store .buy-credit-list .buy-credit-list-item .promo-banner.most-popular, .submode-payment-methods .buy-credit-list .buy-credit-list-item .promo-banner.best-value, .submode-payment-methods .buy-credit-list .buy-credit-list-item .promo-banner.most-popular {
    position: absolute;
    top: 10px;
    left: -5px;
    height: 25px;
    width: 120px;
    color: #fff;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 10px;
    padding-left: 10px;
    text-align: left;
    line-height: 25px;
    background: #404040; }
    .submode-store .buy-credit-list .buy-credit-list-item .promo-banner.best-value .triangle, .submode-store .buy-credit-list .buy-credit-list-item .promo-banner.most-popular .triangle, .submode-payment-methods .buy-credit-list .buy-credit-list-item .promo-banner.best-value .triangle, .submode-payment-methods .buy-credit-list .buy-credit-list-item .promo-banner.most-popular .triangle {
      position: absolute;
      top: 15px;
      left: 0px;
      z-index: -1;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 5px 10px 0;
      border-color: transparent #0d0d0d transparent transparent; }
  .submode-store .buy-credit-list .buy-credit-list-item .promo-banner.sale, .submode-payment-methods .buy-credit-list .buy-credit-list-item .promo-banner.sale {
    position: absolute;
    top: 10px;
    left: -5px;
    height: 25px;
    width: 80px;
    color: #fff;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 10px;
    padding-left: 10px;
    text-align: left;
    line-height: 25px;
    background: #ff374d; }
    .submode-store .buy-credit-list .buy-credit-list-item .promo-banner.sale .triangle, .submode-payment-methods .buy-credit-list .buy-credit-list-item .promo-banner.sale .triangle {
      position: absolute;
      top: 15px;
      left: 0px;
      z-index: -1;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 5px 10px 0;
      border-color: transparent #d00017 transparent transparent; }

@media screen and (max-width: 550px) {
  .mode[data-layout=c3] .submode.submode-store .buy-credit-list .buy-credit-list-item,
  .mode[data-layout=c3] .submode.submode-payment-methods .buy-credit-list .buy-credit-list-item {
    margin-right: 0; }
    .mode[data-layout=c3] .submode.submode-store .buy-credit-list .buy-credit-list-item:nth-child(even),
    .mode[data-layout=c3] .submode.submode-payment-methods .buy-credit-list .buy-credit-list-item:nth-child(even) {
      margin-right: 10px; } }

@media screen and (max-width: 380px) {
  .dialog-body .buy-credit-list .buy-credit-list-item.has-promo .item-price, .submode-buycredit .buy-credit-list .buy-credit-list-item.has-promo .item-price {
    padding-top: 7px; }
  .dialog-body .buy-credit-list .buy-credit-list-item.has-promo .promo-banner, .submode-buycredit .buy-credit-list .buy-credit-list-item.has-promo .promo-banner {
    left: 90px;
    top: 40px; } }

@media screen and (max-width: 320px) {
  .submode-store .buy-credit-list .buy-credit-list-item,
  .submode-payment-methods .buy-credit-list .buy-credit-list-item {
    width: 140px; }
    .submode-store .buy-credit-list .buy-credit-list-item .item-price, .submode-store .buy-credit-list .buy-credit-list-item .item-info,
    .submode-payment-methods .buy-credit-list .buy-credit-list-item .item-price,
    .submode-payment-methods .buy-credit-list .buy-credit-list-item .item-info {
      width: 140px; }
    .submode-store .buy-credit-list .buy-credit-list-item .item-info .image-container,
    .submode-payment-methods .buy-credit-list .buy-credit-list-item .item-info .image-container {
      padding: 25px 30px 10px; } }

html[dir="rtl"]
.submode-store .buy-credit-list .buy-credit-list-item:hover, .submode-payment-methods .buy-credit-list .buy-credit-list-item:hover {
  cursor: pointer;
  opacity: 0.75; }

html[dir="rtl"]
.submode-store .buy-credit-list .buy-credit-list-item:nth-child(3n+1), .submode-payment-methods .buy-credit-list .buy-credit-list-item:nth-child(3n+1) {
  margin-right: 10px;
  margin-left: 0; }

html[dir="rtl"] .dialog-body .buy-credit-list-item .wrapper .promo-banner, html[dir="rtl"] .submode-buycredit .buy-credit-list-item .wrapper .promo-banner {
  right: auto;
  left: 20px; }
/*css!/common/withme/js/dialog/ppc/RedemptionChoiceDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.redemption-choice-dialog .dialog-body {
  padding: 10px 15px 0; }
  .redemption-choice-dialog .dialog-body .celled-list-presenter {
    margin-top: 10px;
    margin-bottom: 20px; }
    .redemption-choice-dialog .dialog-body .celled-list-presenter .celled-item-title {
      text-transform: uppercase;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden; }
  .redemption-choice-dialog .dialog-body .bonus-items-list {
    display: flex;
    margin-top: 10px; }
    .redemption-choice-dialog .dialog-body .bonus-items-list .bonus-item-tile {
      margin: 0 10px 10px 0;
      cursor: default; }
      .redemption-choice-dialog .dialog-body .bonus-items-list .bonus-item-tile img {
        width: 150px;
        height: 150px; }
      .redemption-choice-dialog .dialog-body .bonus-items-list .bonus-item-tile .free {
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal;
        letter-spacing: 0;
        color: #deb359; }
      .redemption-choice-dialog .dialog-body .bonus-items-list .bonus-item-tile .product-info {
        cursor: default; }

@media screen and (max-width: 320px) {
  .redemption-choice-dialog .dialog-body .celled-list-presenter .celled-item-title {
    max-width: 170px; } }
/*css!/common/withme/js/widget/celledListPresenter/CelledListPresenter.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.celled-list-presenter {
  background: #fff; }
  .celled-list-presenter .celled-list .celled-list-item:last-child .wrapper {
    border-bottom: 0; }
/*css!/common/withme/js/widget/celledListPresenter/CelledListItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.celled-list-item {
  background: #fff;
  padding: 0 15px; }
  .celled-list-item .wrapper {
    height: 70px;
    display: flex;
    align-items: center;
    position: relative;
    border-bottom: solid 1px #f2f2f2; }
    .celled-list-item .wrapper .thumbnail {
      display: flex;
      flex-direction: column;
      justify-content: center; }
      .celled-list-item .wrapper .thumbnail img {
        width: 50px; }
    .celled-list-item .wrapper .description {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 10px; }
      .celled-list-item .wrapper .description .celled-item-title {
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal; }
    .celled-list-item .wrapper .extra {
      position: absolute;
      right: 0;
      top: 0;
      display: flex;
      align-items: center;
      height: 70px;
      line-height: 70px; }
      .celled-list-item .wrapper .extra .icon-tooltip-icon {
        font-size: 14px; }
      .celled-list-item .wrapper .extra .icon-action-more {
        font-size: 25px;
        color: #deb359;
        cursor: pointer; }
  .celled-list-item .wrapper:hover {
    cursor: pointer; }
  .celled-list-item .wrapper.disabled:hover,
  .celled-list-item .wrapper.ignore-click:hover {
    cursor: default; }
  .celled-list-item.is-selected {
    color: #fff;
    background: #404040; }
    .celled-list-item.is-selected .wrapper {
      border: 0; }
/*css!/common/waf/js/widget/tooltip/Tooltip.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.tooltip {
  transition: opacity .07s;
  position: absolute;
  width: 300px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.95);
  text-transform: none;
  pointer-events: none;
  opacity: 0;
  left: 0;
  /* XXXcrr: UiContext will trigger:
       "Tried to trigger a "hidden" event on a *visible* element." if we only
       use opacity here, when clicking Username instead of VIP Badge in the
       account drawer. So, tooltips will not have the brief opacity fade until
       we figure out what's going on there. */
  display: none;
  box-shadow: inset 0 0 0 1px #eaeaea;
  overflow: hidden; }
  .tooltip.tooltip-snug {
    width: auto;
    white-space: nowrap;
    padding: 10px; }
  .tooltip .tooltip-header {
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    text-transform: capitalize; }
  .tooltip .tooltip-body > div {
    margin: 10px 0; }
  .tooltip .tooltip-body ul {
    margin-left: 25px; }
    .tooltip .tooltip-body ul li {
      list-style-type: disc;
      padding-left: 5px; }
  .tooltip .tooltip-body .icon-payment-csc {
    font-size: 30px; }
  .tooltip .tooltip-body .icon-ppc-tooltip {
    font-size: 50px; }
  .tooltip .tooltip-body span.or {
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }
  .tooltip .tooltip-body .note {
    color: #a8a8a8;
    font-size: 10px; }
  .tooltip.tooltip-wide {
    width: 400px; }
  .tooltip .cookie-tooltip {
    height: 400px;
    overflow-y: scroll; }
  .tooltip .scene-mode-tooltip .icon {
    font-size: 40px;
    text-align: center; }
/*css!/common/waf/js/dialog/tooltip/TooltipDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.mobile .tooltip-dialog .dialog-header .dialog-title {
  text-overflow: ellipsis;
  max-width: calc(100% - 140px);
  overflow: hidden; }

.mobile .tooltip-dialog .dialog-body {
  justify-content: flex-start;
  padding: 0 15px;
  overflow-y: auto; }
  .mobile .tooltip-dialog .dialog-body .tooltip-header {
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    margin: 15px 0 0 0; }
  .mobile .tooltip-dialog .dialog-body .tooltip-body > div {
    margin: 10px 0; }
  .mobile .tooltip-dialog .dialog-body .tooltip-body ul {
    margin-left: 25px; }
    .mobile .tooltip-dialog .dialog-body .tooltip-body ul li {
      list-style-type: disc;
      padding-left: 5px; }
  .mobile .tooltip-dialog .dialog-body .tooltip-body .icon-payment-csc {
    font-size: 30px; }
  .mobile .tooltip-dialog .dialog-body .tooltip-body .icon-ppc-tooltip {
    font-size: 50px; }
  .mobile .tooltip-dialog .dialog-body .tooltip-body span.or {
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }
  .mobile .tooltip-dialog .dialog-body .tooltip-body .note {
    color: #a8a8a8;
    font-size: 10px; }

.mobile .tooltip-dialog .creator-badge-tooltip-cta,
.mobile .tooltip-dialog .vip-badge-tooltip-cta {
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  margin-top: 15px; }
/*css!/common/withme/js/widget/ppcRedeem/PPCRedeem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.ppc-redeem .redeem-title {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between; }

.ppc-redeem .redeem-field {
  padding: 0 5px; }
  .ppc-redeem .redeem-field input {
    box-shadow: inset 0 0 0 1px #d4d4d4;
    padding-right: 30px;
    height: 40px; }
    .ppc-redeem .redeem-field input.has-error {
      box-shadow: inset 0 0 0 1px #ff374d; }

.ppc-redeem .redeem-button {
  padding: 10px 5px 0; }

.ppc-redeem div.input-error {
  display: none;
  color: #ff374d;
  margin: 5px 0 0; }
  .ppc-redeem div.input-error.error-visible {
    display: block; }

.ppc-redeem .icon-tooltip-icon {
  float: right;
  font-size: 14px; }

.mobile .ppc-redeem .redeem-wrapper {
  display: flex;
  justify-content: space-between; }
  .mobile .ppc-redeem .redeem-wrapper .redeem-field {
    width: 100%;
    padding: 0;
    display: flex; }
    .mobile .ppc-redeem .redeem-wrapper .redeem-field input {
      flex-grow: 1;
      margin-right: 10px; }
  .mobile .ppc-redeem .redeem-wrapper .redeem-button {
    flex-shrink: 0;
    padding: 0;
    width: 80px; }
    .mobile .ppc-redeem .redeem-wrapper .redeem-button button {
      padding: 0 10px; }

html[dir="rtl"] .ppc-redeem .redeem-field input {
  padding-right: 10px;
  padding-left: 30px; }

html[dir="rtl"] .ppc-redeem .icon-tooltip-icon {
  float: left; }

html[dir="rtl"] .mobile .ppc-redeem .redeem-wrapper .redeem-field input {
  margin-right: 0;
  margin-left: 10px; }
/*css!/common/withme/js/dialog/shop/BuyCreditDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
[data-ui-role="modal-dialog"].buycredit-dialog {
  width: 100%; }
  [data-ui-role="modal-dialog"].buycredit-dialog .dialog-header .back-button {
    position: absolute;
    left: 10px;
    top: 0;
    line-height: 50px;
    text-transform: none; }
  [data-ui-role="modal-dialog"].buycredit-dialog .dialog-body .products-container {
    height: 100%;
    overflow: auto; }
    [data-ui-role="modal-dialog"].buycredit-dialog .dialog-body .products-container .products {
      padding: 10px 15px 0; }
    [data-ui-role="modal-dialog"].buycredit-dialog .dialog-body .products-container .ppc-redeem {
      padding: 20px 15px 0; }
      [data-ui-role="modal-dialog"].buycredit-dialog .dialog-body .products-container .ppc-redeem .redeem-wrapper {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px; }
        [data-ui-role="modal-dialog"].buycredit-dialog .dialog-body .products-container .ppc-redeem .redeem-wrapper .redeem-field {
          padding: 0 10px 0 0;
          width: 320px; }
          [data-ui-role="modal-dialog"].buycredit-dialog .dialog-body .products-container .ppc-redeem .redeem-wrapper .redeem-field input {
            height: 30px;
            line-height: 30px; }
        [data-ui-role="modal-dialog"].buycredit-dialog .dialog-body .products-container .ppc-redeem .redeem-wrapper .redeem-button {
          padding: 0;
          width: 110px; }
          [data-ui-role="modal-dialog"].buycredit-dialog .dialog-body .products-container .ppc-redeem .redeem-wrapper .redeem-button button {
            min-height: 30px;
            height: 30px;
            line-height: 30px; }
  [data-ui-role="modal-dialog"].buycredit-dialog .dialog-body .needs-credit {
    margin-bottom: 15px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #a8a8a8;
    background: #fff; }
    [data-ui-role="modal-dialog"].buycredit-dialog .dialog-body .needs-credit span {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal; }

.mobile [data-ui-role="modal-dialog"].buycredit-dialog .dialog-body {
  padding-bottom: 40px; }

@media screen and (max-width: 370px) {
  [data-ui-role="modal-dialog"].buycredit-dialog .dialog-body .needs-credit.large-amount {
    line-height: 1.4;
    padding-top: 8px; } }

@media screen and (max-width: 349px) {
  [data-ui-role="modal-dialog"].buycredit-dialog .dialog-body .needs-credit {
    line-height: 1.4;
    padding-top: 8px; } }
/*css!/common/withme/js/mode/store/InlinePurchaseCheckoutButton.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.inline-purchase-checkout-button {
  width: 100%; }
  .inline-purchase-checkout-button button {
    width: 100%; }
/*css!/common/withme/js/dialog/store/MultiCartError.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.mobile [data-ui-role="modal-dialog"].multicart-error-dialog .dialog-body {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 40px;
  left: 0;
  height: calc(100% - 50px);
  margin: 0; }

.mobile [data-ui-role="modal-dialog"].multicart-error-dialog p.id-body-contents .content-container {
  height: 100%; }

[data-ui-role="modal-dialog"].multicart-error-dialog .dialog-body {
  padding: 0; }

[data-ui-role="modal-dialog"].multicart-error-dialog .alert-message {
  padding: 10px;
  text-align: left; }

[data-ui-role="modal-dialog"].multicart-error-dialog p.id-body-contents {
  margin: 0;
  padding: 10px 15px;
  font-weight: normal;
  width: 100%;
  height: 100%;
  text-align: left;
  background-color: #f2f2f2; }
  [data-ui-role="modal-dialog"].multicart-error-dialog p.id-body-contents .content-container {
    height: 100%; }
  [data-ui-role="modal-dialog"].multicart-error-dialog p.id-body-contents legend {
    margin-top: 15px; }
  [data-ui-role="modal-dialog"].multicart-error-dialog p.id-body-contents .info-block {
    font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    font-style: normal;
    padding: 10px;
    margin: 10px 0;
    background: #fff; }
    [data-ui-role="modal-dialog"].multicart-error-dialog p.id-body-contents .info-block.message {
      text-align: center;
      margin: 0; }
      [data-ui-role="modal-dialog"].multicart-error-dialog p.id-body-contents .info-block.message .title {
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal; }
  [data-ui-role="modal-dialog"].multicart-error-dialog p.id-body-contents .product-name {
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }
/*css!/common/waf/js/dialog/paymentWallDialog/PaymentWallDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.payment-wall-dialog {
  min-width: 600px; }
  .payment-wall-dialog .dialog-container .dialog-header {
    position: relative;
    display: block; }
    .payment-wall-dialog .dialog-container .dialog-header h3.overflowed {
      margin-left: 0px;
      margin-right: 0px;
      text-align: center; }
  .payment-wall-dialog.openbucks {
    min-width: 725px; }

#imvu .contextual-dialogs .transparent-overlay .dialog-type-B.payment-wall-dialog {
  width: 600px; }
/*css!/common/waf/js/dialog/iframeDialog/IframeDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.iframe-dialog {
  padding: 0; }
  .iframe-dialog .dialog-container {
    margin: 0px;
    padding: 0px; }
    .iframe-dialog .dialog-container .hide {
      display: none;
      height: 0px; }
    .iframe-dialog .dialog-container .dialog-body {
      margin: 0px;
      padding: 0px;
      min-width: 100%;
      width: 100%;
      max-width: 100%;
      min-height: 100%;
      height: 100%;
      max-height: 100%; }
      .iframe-dialog .dialog-container .dialog-body .frame-base {
        margin: 0px;
        padding: 0px;
        min-width: 100%;
        width: 100%;
        max-width: 100%;
        min-height: 100%;
        height: 100%;
        max-height: 100%; }
        .iframe-dialog .dialog-container .dialog-body .frame-base.seamless {
          border-width: 0px; }

.mobile [data-ui-role="modal-dialog"].iframe-dialog {
  min-width: 100%;
  width: 100%;
  max-width: 100%; }
  .mobile [data-ui-role="modal-dialog"].iframe-dialog .dialog-container {
    padding: 0; }
  .mobile [data-ui-role="modal-dialog"].iframe-dialog .simple-scroller,
  .mobile [data-ui-role="modal-dialog"].iframe-dialog .simple-scroller .simple-scroller-viewport {
    height: 100%; }
  .mobile [data-ui-role="modal-dialog"].iframe-dialog .dialog-body {
    height: 100%;
    width: 100%;
    overflow: hidden; }
  .mobile [data-ui-role="modal-dialog"].iframe-dialog.has-multi-cards {
    width: 100%; }
    .mobile [data-ui-role="modal-dialog"].iframe-dialog.has-multi-cards .dialog-body:before, .mobile [data-ui-role="modal-dialog"].iframe-dialog.has-multi-cards .dialog-body:after {
      width: 25px;
      height: 100%;
      display: inline-block;
      content: ' '; }
/*css!/common/withme/js/dialog/store/MultiCartSuccess.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
[data-ui-role="modal-dialog"].multicart-success-dialog {
  width: 100%; }
  [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body {
    display: flex;
    flex-direction: column;
    font-weight: normal;
    width: 100%;
    position: relative;
    text-align: left;
    background-color: #f2f2f2;
    padding: 10px 15px;
    overflow-y: auto; }
    [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body .payment-content-container {
      height: 100%; }
    [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body legend {
      margin-top: 15px; }
    [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body .billing-info {
      background: #fff;
      margin-top: 10px;
      padding: 10px; }
    [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body .info-block {
      font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: normal;
      font-style: normal;
      padding: 10px;
      background: #fff; }
      [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body .info-block.message {
        text-align: center; }
        [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body .info-block.message .title {
          font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
          font-weight: 500;
          font-style: normal;
          margin-bottom: 10px; }
        [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body .info-block.message .text {
          margin: 0; }
    [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body .product-name {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal; }
    [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body .order-row {
      display: block;
      color: #404040;
      margin: 10px 0px;
      background: #fff; }
      [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body .order-row .order-item {
        margin: 0 10px;
        display: flex; }
        [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body .order-row .order-item .image-container {
          width: 50px;
          height: 70px;
          padding: 10px 0; }
          [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body .order-row .order-item .image-container img {
            width: 50px; }
        [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body .order-row .order-item .item-info {
          padding: 20px 10px; }
          [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body .order-row .order-item .item-info .item-name {
            font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
            font-weight: 500;
            font-style: normal;
            text-transform: capitalize; }
          [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body .order-row .order-item .item-info .product-price {
            font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
            font-weight: normal;
            font-style: normal; }
          [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body .order-row .order-item .item-info .product-price .item-info-price {
            margin-left: 19px; }
          [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body .order-row .order-item .item-info .product-price img {
            position: absolute; }
    [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body .summary-block {
      background: #fff;
      padding: 10px;
      margin-bottom: 10px; }
      [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-body .summary-block .order-total {
        display: inline-block;
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal; }
  [data-ui-role="modal-dialog"].multicart-success-dialog .dialog-footer {
    position: relative !important; }
/*css!/common/withme/js/dialog/2fa/TwoFactorEnrollment.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
[data-ui-role="modal-dialog"].two-factor-enrollment-dialog .dialog-body {
  display: flex;
  flex-direction: column;
  font-weight: normal;
  width: 100%;
  position: relative;
  margin-top: 50px;
  overflow-y: auto; }
  [data-ui-role="modal-dialog"].two-factor-enrollment-dialog .dialog-body .content-block {
    margin-top: 30px; }
    [data-ui-role="modal-dialog"].two-factor-enrollment-dialog .dialog-body .content-block p.desc {
      margin-bottom: 30px; }
    [data-ui-role="modal-dialog"].two-factor-enrollment-dialog .dialog-body .content-block .input-panel {
      margin-bottom: 30px;
      display: flex;
      flex-direction: column;
      align-items: center; }
      [data-ui-role="modal-dialog"].two-factor-enrollment-dialog .dialog-body .content-block .input-panel .two-factor-code {
        height: 40px;
        width: 250px;
        line-height: 20px;
        text-align: center;
        font-weight: bold;
        letter-spacing: 0.2em;
        color: #404040;
        border: 0;
        box-shadow: inset 0 0 0 1px #d4d4d4; }
        [data-ui-role="modal-dialog"].two-factor-enrollment-dialog .dialog-body .content-block .input-panel .two-factor-code::placeholder {
          font-weight: normal;
          font-size: 12px;
          letter-spacing: 0em; }
        [data-ui-role="modal-dialog"].two-factor-enrollment-dialog .dialog-body .content-block .input-panel .two-factor-code:focus {
          box-shadow: inset 0 0 0 1px #404040; }
        [data-ui-role="modal-dialog"].two-factor-enrollment-dialog .dialog-body .content-block .input-panel .two-factor-code.error-visible {
          box-shadow: inset 0 0 0 1px #ff374d; }
      [data-ui-role="modal-dialog"].two-factor-enrollment-dialog .dialog-body .content-block .input-panel .enrollment-error {
        text-align: center;
        width: 250px;
        padding: 5px 0px 0px 0px;
        color: #ff374d;
        display: none; }
        [data-ui-role="modal-dialog"].two-factor-enrollment-dialog .dialog-body .content-block .input-panel .enrollment-error.error-visible {
          display: block; }
    [data-ui-role="modal-dialog"].two-factor-enrollment-dialog .dialog-body .content-block .link-panel {
      text-align: center; }
      [data-ui-role="modal-dialog"].two-factor-enrollment-dialog .dialog-body .content-block .link-panel p {
        margin-bottom: 10px; }
        [data-ui-role="modal-dialog"].two-factor-enrollment-dialog .dialog-body .content-block .link-panel p span {
          cursor: pointer;
          color: #deb359;
          font-weight: bold; }

[data-ui-role="modal-dialog"].two-factor-enrollment-dialog .dialog-footer {
  padding: 15px 15px 0px 15px;
  position: relative !important;
  background: white; }
  [data-ui-role="modal-dialog"].two-factor-enrollment-dialog .dialog-footer button {
    line-height: 35px;
    width: 100%;
    background: #404040; }
    [data-ui-role="modal-dialog"].two-factor-enrollment-dialog .dialog-footer button.disabled {
      background: #d4d4d4; }

@media screen and (min-width: 470px) {
  [data-ui-role="modal-dialog"].two-factor-enrollment-dialog .dialog-container {
    min-height: 354px !important;
    height: auto !important; } }
/*css!/common/withme/js/dialog/2fa/TwoFactorChangeEmail.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
[data-ui-role="modal-dialog"].two-factor-change-email-dialog {
  width: 100%; }
  [data-ui-role="modal-dialog"].two-factor-change-email-dialog .dialog-header .back-button {
    position: absolute;
    left: 20px;
    top: 0;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 15px;
    cursor: pointer; }
    [data-ui-role="modal-dialog"].two-factor-change-email-dialog .dialog-header .back-button::before {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    [data-ui-role="modal-dialog"].two-factor-change-email-dialog .dialog-header .back-button::before {
      content: ""; }
  [data-ui-role="modal-dialog"].two-factor-change-email-dialog .dialog-body {
    display: flex;
    flex-direction: column;
    font-weight: normal;
    width: 100%;
    position: relative;
    margin-top: 50px;
    overflow-y: auto; }
    [data-ui-role="modal-dialog"].two-factor-change-email-dialog .dialog-body .error-message {
      color: #ff374d;
      margin-top: 5px; }
    [data-ui-role="modal-dialog"].two-factor-change-email-dialog .dialog-body .content-block {
      margin: 20px 15px 0px 15px; }
      [data-ui-role="modal-dialog"].two-factor-change-email-dialog .dialog-body .content-block .system-info-header {
        margin-bottom: 10px; }
      [data-ui-role="modal-dialog"].two-factor-change-email-dialog .dialog-body .content-block .input-panel {
        text-align: left;
        margin-bottom: 30px; }
        [data-ui-role="modal-dialog"].two-factor-change-email-dialog .dialog-body .content-block .input-panel input {
          height: 40px;
          width: 100%;
          line-height: 20px;
          text-align: left;
          padding-left: 10px;
          border: 1px solid #d4d4d4; }
          [data-ui-role="modal-dialog"].two-factor-change-email-dialog .dialog-body .content-block .input-panel input.two-factor-password {
            margin-top: 10px; }
  [data-ui-role="modal-dialog"].two-factor-change-email-dialog .dialog-footer {
    padding: 15px 15px 0px 15px;
    position: relative !important;
    background: white; }
    [data-ui-role="modal-dialog"].two-factor-change-email-dialog .dialog-footer button {
      line-height: 35px;
      width: 100%;
      background: #404040; }
      [data-ui-role="modal-dialog"].two-factor-change-email-dialog .dialog-footer button.disabled {
        background: #d4d4d4; }
  [data-ui-role="modal-dialog"].two-factor-change-email-dialog .dialog-container {
    min-height: 354px !important;
    height: auto !important; }
/*css!/common/withme/js/widget/billingInfo/BillingInfo.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.billing-info .info-line {
  width: 100%; }

.billing-info .name-on-card,
.billing-info .card-type {
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal; }

.billing-info .card-type {
  padding-top: 10px; }
/*css!/common/withme/js/dialog/store/MultiCartCheckout.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
body.waiting * {
  cursor: progress !important; }

body.mobile .multicart-checkout-dialog .dialog-header .back-button {
  left: 100px; }

[data-ui-role="modal-dialog"].multicart-checkout-dialog {
  width: 100%; }
  [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body {
    display: flex;
    flex-direction: column;
    font-weight: normal;
    width: 100%;
    position: relative;
    text-align: left;
    margin-top: 50px;
    background-color: #f2f2f2;
    padding-bottom: 0;
    overflow-y: auto; }
    [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .price-summary {
      margin: 10px 15px; }
      [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .price-summary span {
        font-weight: bold; }
        [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .price-summary span.price {
          float: right; }
    [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .status-block {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      position: sticky;
      position: -webkit-sticky;
      /* Safari */
      top: 0px;
      z-index: 100; }
      [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .status-block .error-message {
        display: none;
        padding: 10px 10px;
        background-color: #ff374d;
        color: #fff;
        width: 100%;
        text-align: center;
        overflow: hidden; }
        [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .status-block .error-message.error-visible {
          display: block; }
      [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .status-block .notice-message {
        padding: 10px 10px;
        background-color: #deb359;
        color: #fff;
        width: 100%;
        text-align: center;
        overflow: hidden; }
    [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .terms .imvu-terms-and-conditions {
      display: block; }
    [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .terms .vcoin-terms-and-conditions a {
      font-weight: bold;
      color: #404040; }
    [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .terms p ~ p {
      margin-top: 1em; }
    [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .checkout-container, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-checkout-container {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      height: 100%;
      margin: 0px 20px 20px 20px;
      user-select: none; }
      [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .checkout-container p.title, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-checkout-container p.title {
        border-bottom: solid 1px #d4d4d4;
        margin: 10px 0px 10px 0px;
        color: #a8a8a8;
        text-align: left;
        font-size: 10px;
        letter-spacing: 1px;
        line-height: normal;
        font-weight: 500; }
        [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .checkout-container p.title.payment-method, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-checkout-container p.title.payment-method {
          margin: 10px 0px 0px 0px; }
    [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-checkout-container {
      max-height: 0px;
      opacity: 0;
      transition: max-height 0.5s ease; }
      [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-checkout-container * {
        max-height: 0px; }
      [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-checkout-container.active {
        max-height: 100%;
        opacity: 1; }
        [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-checkout-container.active * {
          max-height: 100%; }
    [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .pending-panel {
      position: absolute;
      top: 50px;
      margin: 10px; }
      [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .pending-panel h2 {
        text-align: center; }
    [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .payment-channel-list li, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-payment-channel-list li {
      cursor: pointer;
      margin: 10px 0px 10px 0px;
      padding: 0px 0px 0px 10px;
      background: #fff;
      line-height: 30px;
      text-transform: capitalize;
      font-weight: 500;
      position: relative; }
      [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .payment-channel-list li.is-selected, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-payment-channel-list li.is-selected {
        background: #404040;
        color: #fff; }
      [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .payment-channel-list li span, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-payment-channel-list li span {
        pointer-events: none; }
        [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .payment-channel-list li span.right-arrow, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-payment-channel-list li span.right-arrow {
          position: absolute;
          top: 0px;
          right: 15px; }
          [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .payment-channel-list li span.right-arrow::before, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-payment-channel-list li span.right-arrow::before {
            font-family: 'icomoon';
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            /* Better Font Rendering =========== */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale; }
          [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .payment-channel-list li span.right-arrow::before, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-payment-channel-list li span.right-arrow::before {
            content: ""; }
        [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .payment-channel-list li span.down-arrow, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-payment-channel-list li span.down-arrow {
          transform: rotate(90deg);
          position: absolute;
          top: 0px;
          right: 15px; }
          [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .payment-channel-list li span.down-arrow::before, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-payment-channel-list li span.down-arrow::before {
            font-family: 'icomoon';
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            /* Better Font Rendering =========== */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale; }
          [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .payment-channel-list li span.down-arrow::before, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-payment-channel-list li span.down-arrow::before {
            content: ""; }
      [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .payment-channel-list li .card-info, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-payment-channel-list li .card-info {
        pointer-events: none;
        padding: 10px 0px; }
        [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .payment-channel-list li .card-info p, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-payment-channel-list li .card-info p {
          margin: 0px;
          line-height: 20px;
          text-align: left; }
          [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .payment-channel-list li .card-info p .card-type, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-payment-channel-list li .card-info p .card-type {
            font-weight: 700; }
      [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .payment-channel-list li img, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-payment-channel-list li img {
        pointer-events: none;
        position: absolute;
        top: 4px;
        right: 5px;
        width: 60px; }
      [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .payment-channel-list li[id='https://api.imvu.com/payment_channel/payment_channel-next-vcoin'] img, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-payment-channel-list li[id='https://api.imvu.com/payment_channel/payment_channel-next-vcoin'] img {
        pointer-events: none;
        position: absolute;
        margin-right: 20px;
        top: 4px;
        right: 5px;
        width: 20px; }
      [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .payment-channel-list li[id=different_card] img, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-body .other-payment-channel-list li[id=different_card] img {
        top: 7px;
        width: auto; }
  [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-header .back-button {
    position: absolute;
    top: 25px;
    left: 25px;
    transform: translateX(-50%) translateY(-50%);
    width: 50px;
    height: 50px;
    text-align: center;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 15px;
    cursor: pointer; }
    [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-header .back-button::before {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-header .back-button::before {
      content: ""; }
  [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-footer {
    position: relative !important; }
    [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-footer button {
      line-height: 35px;
      width: 100%; }
      [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-footer button.processing::before, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-footer button.processing::after {
        opacity: 0;
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle closest-side at center, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 37%, rgba(255, 255, 255, 0.2) 45%, rgba(255, 255, 255, 0.95) 48%, rgba(255, 255, 255, 0.95) 52%, rgba(255, 255, 255, 0.2) 55%, rgba(255, 255, 255, 0) 63%, rgba(255, 255, 255, 0) 100%);
        background-repeat: no-repeat;
        background-position: 50% 50%;
        animation-name: spin;
        animation-duration: 1.4s;
        animation-iteration-count: infinite;
        animation-fill-mode: initial;
        animation-delay: 0s; }
      [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-footer button.processing::after {
        animation-delay: 0.7s; }
      [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-footer button.processing::after, [data-ui-role="modal-dialog"].multicart-checkout-dialog .dialog-footer button.processing::before {
        height: 300%;
        top: -100%;
        width: 150%;
        left: -25%; }
  [data-ui-role="modal-dialog"].multicart-checkout-dialog .checkout-bottom-container {
    flex-shrink: 0;
    margin: 10px 0px;
    background: #fff; }
    [data-ui-role="modal-dialog"].multicart-checkout-dialog .checkout-bottom-container .vip-status-widget {
      margin: 10px 15px 0 15px; }
      [data-ui-role="modal-dialog"].multicart-checkout-dialog .checkout-bottom-container .vip-status-widget p {
        margin: 0;
        text-align: left;
        font-size: 12px;
        color: #404040; }
  [data-ui-role="modal-dialog"].multicart-checkout-dialog .agreement {
    font-size: 12px;
    margin: 0px 0px 5px 0px; }
    [data-ui-role="modal-dialog"].multicart-checkout-dialog .agreement .vip-panel {
      margin: 5px 0 20px 0; }
      [data-ui-role="modal-dialog"].multicart-checkout-dialog .agreement .vip-panel label {
        display: inline; }
        [data-ui-role="modal-dialog"].multicart-checkout-dialog .agreement .vip-panel label span:nth-of-type(1) {
          margin-left: 5px; }
      [data-ui-role="modal-dialog"].multicart-checkout-dialog .agreement .vip-panel .vip-toc-tooltip {
        margin-top: 15px; }
    [data-ui-role="modal-dialog"].multicart-checkout-dialog .agreement .bold {
      font-weight: 700;
      cursor: pointer; }
    [data-ui-role="modal-dialog"].multicart-checkout-dialog .agreement p {
      text-align: left;
      margin: 0px 0px 0px 0px; }
  [data-ui-role="modal-dialog"].multicart-checkout-dialog .cart-list-container {
    flex-grow: 1;
    overflow: hidden;
    overflow-y: auto; }
/*css!/common/withme/js/dialog/store/MultiCartSavedCards.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.desktop [data-ui-role="modal-dialog"].multicart-saved-cards-dialog .dialog-header .back-button {
  position: absolute;
  left: 20px;
  top: 0;
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 15px;
  cursor: pointer; }
  .desktop [data-ui-role="modal-dialog"].multicart-saved-cards-dialog .dialog-header .back-button::before {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
  .desktop [data-ui-role="modal-dialog"].multicart-saved-cards-dialog .dialog-header .back-button::before {
    content: ""; }

[data-ui-role="modal-dialog"].multicart-saved-cards-dialog {
  width: 100%; }
  [data-ui-role="modal-dialog"].multicart-saved-cards-dialog .dialog-body {
    display: flex;
    flex-direction: column;
    font-weight: normal;
    width: 100%;
    position: relative;
    text-align: left;
    margin-top: 50px;
    background-color: #f2f2f2;
    padding-bottom: 0;
    overflow-y: auto; }
    [data-ui-role="modal-dialog"].multicart-saved-cards-dialog .dialog-body .credit-card-container {
      margin: 15px;
      user-select: none; }
      [data-ui-role="modal-dialog"].multicart-saved-cards-dialog .dialog-body .credit-card-container p.title {
        text-align: left;
        font-size: 10px;
        color: #a8a8a8;
        border-bottom: solid 1px #d4d4d4;
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal; }
      [data-ui-role="modal-dialog"].multicart-saved-cards-dialog .dialog-body .credit-card-container li.add-new-credit-card {
        cursor: pointer;
        margin: 10px 0px 10px 0px;
        padding: 0px 0px 0px 10px;
        background: #fff;
        line-height: 30px;
        position: relative; }
        [data-ui-role="modal-dialog"].multicart-saved-cards-dialog .dialog-body .credit-card-container li.add-new-credit-card img {
          top: 7px;
          right: 10px;
          width: auto;
          pointer-events: none;
          position: absolute; }
      [data-ui-role="modal-dialog"].multicart-saved-cards-dialog .dialog-body .credit-card-container li.saved-card-item {
        background: #fff;
        cursor: pointer;
        margin: 10px 0px 10px 0px;
        line-height: 30px; }
        [data-ui-role="modal-dialog"].multicart-saved-cards-dialog .dialog-body .credit-card-container li.saved-card-item .card-info {
          padding: 12px;
          pointer-events: none;
          position: relative; }
          [data-ui-role="modal-dialog"].multicart-saved-cards-dialog .dialog-body .credit-card-container li.saved-card-item .card-info p {
            margin: 0px;
            line-height: 20px;
            text-align: left; }
            [data-ui-role="modal-dialog"].multicart-saved-cards-dialog .dialog-body .credit-card-container li.saved-card-item .card-info p .card-type {
              font-weight: 700; }
          [data-ui-role="modal-dialog"].multicart-saved-cards-dialog .dialog-body .credit-card-container li.saved-card-item .card-info .primary {
            position: absolute;
            right: 12px;
            top: 14px;
            text-transform: uppercase;
            color: #a8a8a8;
            font-size: 10px;
            font-weight: 700; }
        [data-ui-role="modal-dialog"].multicart-saved-cards-dialog .dialog-body .credit-card-container li.saved-card-item.is-selected {
          background: #404040;
          color: #fff; }
  [data-ui-role="modal-dialog"].multicart-saved-cards-dialog .dialog-footer {
    position: relative !important; }
/*css!/common/withme/js/dialog/store/MultiCartReview.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.desktop [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-header .back-button {
  position: absolute;
  left: 20px;
  top: 0;
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 15px;
  cursor: pointer; }
  .desktop [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-header .back-button::before {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
  .desktop [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-header .back-button::before {
    content: ""; }

[data-ui-role="modal-dialog"].multicart-credit-card-review-dialog {
  width: 100%; }
  [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body {
    display: flex;
    flex-direction: column;
    font-weight: normal;
    width: 100%;
    position: relative;
    text-align: left;
    margin-top: 50px;
    background-color: #f2f2f2;
    padding-bottom: 0;
    overflow-y: auto; }
    [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .content-container .content-container-content {
      padding: 10px 15px 0px 15px; }
    [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .info-block {
      font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: normal;
      font-style: normal;
      padding: 10px;
      margin: 10px 0;
      background: #fff; }
      [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .info-block.message {
        text-align: center;
        margin: 0; }
        [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .info-block.message .title {
          font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
          font-weight: 500;
          font-style: normal; }
      [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .info-block .other-payment-channel-list img {
        float: right; }
    [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .multicart-order-list {
      margin: 10px 0; }
      [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .multicart-order-list .order-row {
        display: block;
        margin: 10px 0px 0px 0px;
        color: #404040;
        background: #fff; }
      [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .multicart-order-list .order-row:last-child .order-item {
        border: 0; }
      [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .multicart-order-list .order-item {
        margin: 0 10px;
        display: flex; }
        [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .multicart-order-list .order-item .image-container {
          width: 50px;
          height: 70px;
          padding: 10px 0; }
          [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .multicart-order-list .order-item .image-container img {
            width: 50px; }
        [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .multicart-order-list .order-item .item-info {
          padding: 20px 10px; }
          [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .multicart-order-list .order-item .item-info .item-name {
            font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
            font-weight: 500;
            font-style: normal;
            text-transform: capitalize; }
          [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .multicart-order-list .order-item .item-info .product-price {
            font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
            font-weight: normal;
            font-style: normal; }
            [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .multicart-order-list .order-item .item-info .product-price img {
              margin-right: 5px; }
            [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .multicart-order-list .order-item .item-info .product-price .normal-price {
              text-decoration: line-through; }
            [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .multicart-order-list .order-item .item-info .product-price .sale-price {
              font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
              font-weight: 500;
              font-style: normal;
              color: #ff374d; }
          [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .multicart-order-list .order-item .item-info .item-info-price {
            margin-left: 21px; }
          [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .multicart-order-list .order-item .item-info .img-position img {
            position: absolute; }
        [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .multicart-order-list .order-item .product-sale {
          flex-grow: 1; }
          [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .multicart-order-list .order-item .product-sale span {
            text-align: center;
            color: #fff;
            background: #ff374d;
            margin-top: 25px;
            width: 50px;
            height: 20px;
            line-height: 20px;
            float: right; }
      [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .multicart-order-list .supporting-text {
        display: block;
        margin: 10px 0px 0px 0px;
        color: #404040;
        font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: normal;
        font-style: normal;
        font-size: 12px;
        line-height: 133%; }
    [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .order-row-amount {
      display: inline-block;
      float: right; }
    [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .order-total {
      display: inline-block;
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal; }
    [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-body .btn.btn-primary.buy-now.disabled {
      background: #404040;
      pointer-events: none; }
  [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-footer {
    position: relative !important; }
  [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-footer img {
    margin-top: -2px;
    position: absolute; }
  [data-ui-role="modal-dialog"].multicart-credit-card-review-dialog .dialog-footer .order-total-converted {
    margin-left: 19px; }
/*css!/common/withme/js/dialog/store/MultiCartAddCreditCard.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.mobile [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-body {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 40px;
  left: 0; }
  .mobile [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-body .half-row {
    display: block; }

.multicart-add-credit-card-dialog .alert-message {
  padding: 10px;
  text-align: center; }

[data-ui-role="modal-dialog"].multicart-add-credit-card-dialog {
  width: 100%; }
  [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog.loading {
    opacity: 0.7;
    pointer-events: none;
    touch-action: none; }
    [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog.loading .dropdown {
      pointer-events: none;
      touch-action: none; }
  [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container {
    display: block; }
    [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-header {
      position: static; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-header .back-button {
        position: absolute;
        left: 20px;
        top: 0;
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 15px;
        cursor: pointer; }
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-header .back-button::before {
          font-family: 'icomoon';
          speak: none;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          /* Better Font Rendering =========== */
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale; }
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-header .back-button::before {
          content: ""; }
    [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body {
      display: block;
      width: 100%;
      text-align: left;
      background-color: #f2f2f2;
      padding: 0;
      margin: 0;
      height: calc(100% - 50px); }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .content-container {
        height: calc(100% - 40px); }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .billing-address-block,
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .payment-block {
        margin: 10px 0;
        padding: 0 15px;
        width: 100%; }
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .billing-address-block .worldpay-eprotect-iframe,
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .payment-block .worldpay-eprotect-iframe {
          width: 100%; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .billing-address-block .system-info-header {
        margin-bottom: 5px; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .half-row {
        display: inline-block; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .input-container {
        display: inline-block;
        vertical-align: top;
        padding-bottom: 2px; }
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .input-container .security-code-row .security-code {
          width: 100px; }
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .input-container .security-code-row .icon-tooltip-icon {
          position: relative;
          right: -75px;
          top: -26px;
          opacity: 0.5;
          padding: 0 1px;
          width: 15px;
          height: 0px; }
          [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .input-container .security-code-row .icon-tooltip-icon:hover {
            cursor: pointer; }
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .input-container .security-code-row .security-code-tooltip {
          display: none; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .cardnumber {
        width: 100%; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .security-code {
        width: 60px; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .card-number-container {
        position: relative; }
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .card-number-container .cardimages-container {
          display: flex;
          position: absolute;
          right: 8px;
          top: 37px; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .cardimage {
        opacity: 0.5;
        font-size: 15px;
        width: 28px;
        overflow: hidden;
        padding-top: 3px; }
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .cardimage.card-number-present:not(.card-type-active) {
          opacity: 0;
          font-size: 0;
          width: 0; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .exp-date-container {
        display: inline-block;
        min-width: 90px;
        width: 100px;
        padding-right: 2px; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .state-province-container {
        display: inline-block;
        min-width: 36%;
        width: 36%;
        float: right;
        height: 40px; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .name-on-card,
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .address {
        width: 100%; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .city {
        width: 63%; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .zip,
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .postal {
        width: 36%;
        margin-top: 5px; }
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .zip.intl,
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .postal.intl {
          float: right;
          margin: 0; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .us-fields,
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .ca-fields,
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .non-us-fields {
        display: inline-block; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .country-container {
        float: right;
        display: inline-block;
        min-width: 100px;
        width: 100%;
        height: 40px;
        margin: 5px 0 10px 0; }
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .country-container.canada, [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .country-container.us {
          width: 63%;
          margin-bottom: 0; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .error-block {
        width: 100%;
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal; }
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .error-block.has-error {
          padding: 5px 0;
          background-color: #ff374d; }
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .error-block .error-message {
          color: #fff;
          width: 100%;
          text-align: center;
          transition: height 0.15s;
          opacity: 0;
          height: 0;
          overflow: hidden; }
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .error-block .error-message.error-visible {
          padding: 2px 10px;
          opacity: 1;
          height: auto; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .dropdown {
        color: #404040; }
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .dropdown.payment-error {
          border: 1px solid #ff374d !important; }
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .dropdown .dropdown-label {
          height: 40px;
          line-height: 40px; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .input-label {
        color: #404040;
        font-size: 10px;
        text-transform: uppercase;
        margin: 5px 0;
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body .input-row {
        display: block;
        padding-top: 5px;
        padding-bottom: 0; }
      [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body input {
        display: inline-block;
        height: 40px;
        font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: normal;
        font-style: normal;
        font-size: 12px;
        line-height: 1.4;
        color: #404040;
        padding-left: 10px;
        padding-right: 10px;
        border: 1px solid #d4d4d4; }
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body input::placeholder {
          color: #a8a8a8; }
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body input.payment-error {
          border: 1px solid #ff374d !important; }
        [data-ui-role="modal-dialog"].multicart-add-credit-card-dialog .dialog-container .dialog-body input.checkbox {
          height: auto; }
/*css!/common/waf/js/Dropdown.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.dropdown {
  outline: none;
  box-shadow: inset 0 0 0 1px #d4d4d4;
  position: relative;
  background: #fff;
  height: 40px;
  color: #404040;
  line-height: 40px;
  height: 40px; }
  .dropdown.is-open {
    pointer-events: all;
    position: absolute; }
    .dropdown.is-open .dropdown-option-list-container {
      display: block; }
  .dropdown.dim-no-value .dropdown-label span.no-value,
  .dropdown.dim-no-value .dropdown-option[data-value=""] {
    color: #a8a8a8; }
  .dropdown.hide-arrow .dropdown-label {
    padding-right: 10px; }
    .dropdown.hide-arrow .dropdown-label::before {
      display: none; }
  .dropdown.light-text .dropdown-label span {
    color: #a8a8a8; }
  .dropdown .dropdown-label {
    display: block;
    min-height: 40px;
    padding: 0 10px;
    padding-right: 40px;
    text-align: initial; }
    .dropdown .dropdown-label::before {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    .dropdown .dropdown-label::before {
      content: "";
      position: absolute;
      top: 1px;
      right: 0;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-size: 6px;
      font-weight: bold;
      color: #404040; }
  .dropdown .dropdown-option-list-container {
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    display: none;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    overflow: hidden;
    z-index: 1; }
  .dropdown .dropdown-scroll-up,
  .dropdown .dropdown-scroll-down {
    transition: opacity 0.15s;
    z-index: 2;
    width: 100%;
    height: 40px;
    background: rgba(255, 255, 255, 0.95);
    opacity: 0;
    pointer-events: none; }
    .dropdown .dropdown-scroll-up::before,
    .dropdown .dropdown-scroll-down::before {
      position: absolute;
      left: calc(50% - 20px);
      transform: rotate(90deg);
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-size: 10px;
      font-weight: bold;
      color: #404040; }
    .dropdown .dropdown-scroll-up:hover::before,
    .dropdown .dropdown-scroll-down:hover::before {
      opacity: 0.75; }
    .dropdown .dropdown-scroll-up:active::before,
    .dropdown .dropdown-scroll-down:active::before {
      opacity: 0.5625; }
  .dropdown .dropdown-scroll-up {
    position: absolute;
    top: 0;
    right: 0;
    left: 0; }
    .dropdown .dropdown-scroll-up::before {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    .dropdown .dropdown-scroll-up::before {
      content: ""; }
  .dropdown .dropdown-scroll-down {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0; }
    .dropdown .dropdown-scroll-down::before {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    .dropdown .dropdown-scroll-down::before {
      content: ""; }
  .dropdown .dropdown-option-list {
    width: calc(100% + 20px);
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; }
  .dropdown .dropdown-option {
    height: 40px;
    line-height: 40px;
    padding: 0 10px; }
  .dropdown.testing-middle {
    margin-top: 160px; }
  .dropdown.testing-bottom {
    margin-top: 470px; }

body.desktop .dropdown.can-scroll-up .dropdown-scroll-up {
  opacity: 1;
  pointer-events: all; }

body.desktop .dropdown.can-scroll-down .dropdown-scroll-down {
  opacity: 1;
  pointer-events: all; }

.dropdown .dropdown-option.is-selected,
.dropdown.is-open .dropdown-label:hover,
.dropdown.is-open .dropdown-label:hover::before {
  background: #404040;
  color: #fff; }

.dropdown .dropdown-label {
  transition: opacity 0.15s;
  opacity: 0; }

.dropdown.is-ready .dropdown-label {
  opacity: 1; }
/*css!/common/withme/js/widget/store/MultiCartVipStatus.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.multi-cart-vip-status {
  margin: 5px 0 0 5px;
  color: #a8a8a8;
  font-size: 10px;
  font-weight: 500;
  /* text-align: left !important; */
  line-height: normal;
  letter-spacing: normal; }
  .multi-cart-vip-status span.price {
    float: right; }
/*css!/common/withme/js/dialog/store/MultiCartCheckoutItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
@keyframes removed-item-anim {
  0% {
    background: #ff374d; }
  100% {
    background: none; } }

.multi-cart-checkout-item {
  display: block;
  position: relative;
  height: 70px;
  background: #fff; }
  .multi-cart-checkout-item .multi-cart-item-info {
    display: flex;
    height: 100%; }
    .multi-cart-checkout-item .multi-cart-item-info .checkbox[type="checkbox"]:checked + label::before {
      font-size: 9px;
      line-height: 16px; }
    .multi-cart-checkout-item .multi-cart-item-info .product-label {
      height: 14px;
      margin: 25px 0 0 20px; }
      .multi-cart-checkout-item .multi-cart-item-info .product-label:before {
        height: 14px;
        width: 14px;
        font-size: 10px; }
      .multi-cart-checkout-item .multi-cart-item-info .product-label.removed:before {
        animation: removed-item-anim 0.5s; }
    .multi-cart-checkout-item .multi-cart-item-info .product-img {
      height: 50px;
      width: 50px;
      margin: 0 10px 0 0;
      align-self: center; }
      .multi-cart-checkout-item .multi-cart-item-info .product-img img {
        max-width: 50px;
        max-height: 50px;
        vertical-align: middle; }
    .multi-cart-checkout-item .multi-cart-item-info .product-info {
      color: #404040;
      align-self: center;
      margin-left: 5px; }
      .multi-cart-checkout-item .multi-cart-item-info .product-info .product-name {
        font-weight: bold; }
      .multi-cart-checkout-item .multi-cart-item-info .product-info .product-price {
        font-weight: normal; }
        .multi-cart-checkout-item .multi-cart-item-info .product-info .product-price .normal-price {
          text-decoration: line-through; }
        .multi-cart-checkout-item .multi-cart-item-info .product-info .product-price .sale-price {
          font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
          font-weight: 500;
          font-style: normal;
          color: #ff374d; }
    .multi-cart-checkout-item .multi-cart-item-info.credits {
      /* ^^^^^^ */ }
      .multi-cart-checkout-item .multi-cart-item-info.credits .product-img img {
        position: relative;
        bottom: 10px; }
      .multi-cart-checkout-item .multi-cart-item-info.credits .product-info {
        font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: normal;
        font-style: normal; }
    .multi-cart-checkout-item .multi-cart-item-info .product-sale {
      color: #fff;
      background: #ff374d;
      text-align: center;
      width: 50px;
      height: 20px;
      line-height: 20px;
      position: absolute;
      right: 10px;
      top: 25px; }
/*css!/common/withme/js/widget/store/MultiCartList.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
/*css!/common/withme/js/widget/store/MultiCartItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.multi-cart-item {
  display: block;
  position: relative;
  height: 70px;
  user-select: none;
  border-bottom: solid 1px #d4d4d4; }
  .multi-cart-item .multi-cart-item-info {
    display: flex;
    padding: 0px 10px;
    height: 100%; }
    .multi-cart-item .multi-cart-item-info .product-img {
      align-self: center;
      height: 50px;
      width: 50px;
      margin: 0 5px; }
      .multi-cart-item .multi-cart-item-info .product-img img {
        max-width: 50px;
        max-height: 50px;
        vertical-align: middle; }
    .multi-cart-item .multi-cart-item-info .product-info {
      flex-basis: 165px;
      align-self: center;
      margin: auto;
      color: #404040; }
      .multi-cart-item .multi-cart-item-info .product-info .product-name {
        font-weight: bold; }
      .multi-cart-item .multi-cart-item-info .product-info .product-price {
        font-weight: normal; }
        .multi-cart-item .multi-cart-item-info .product-info .product-price .normal-price {
          text-decoration: line-through; }
        .multi-cart-item .multi-cart-item-info .product-info .product-price .sale-price {
          font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
          font-weight: 500;
          font-style: normal;
          color: #ff374d; }
        .multi-cart-item .multi-cart-item-info .product-info .product-price .renews-text {
          font-weight: normal; }
      .multi-cart-item .multi-cart-item-info .product-info.credits {
        font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: normal;
        font-style: normal; }
    .multi-cart-item .multi-cart-item-info .product-remove {
      color: #a8a8a8;
      cursor: pointer;
      align-self: center;
      transition: opacity 0.15s; }
      .multi-cart-item .multi-cart-item-info .product-remove:hover {
        opacity: 0.75; }
      .multi-cart-item .multi-cart-item-info .product-remove:active {
        opacity: 0.5625; }
      .multi-cart-item .multi-cart-item-info .product-remove svg {
        width: 25px;
        height: 25px; }
/*css!/common/waf/js/widget/buyUpgradeList/BuyUpgradeList.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.buy-upgrade-list .system-info-header {
  margin-bottom: 10px; }

.buy-upgrade-list .vip-description {
  background: #fff;
  padding: 10px 15px 10px 15px;
  margin-bottom: 10px; }
  .buy-upgrade-list .vip-description .crown-icon {
    display: inline-block;
    padding: 0;
    margin: 0 0 10px 0;
    height: 50px;
    width: 100%; }
    .buy-upgrade-list .vip-description .crown-icon .image {
      position: relative;
      left: 50%;
      transform: translateX(-50%); }
      .buy-upgrade-list .vip-description .crown-icon .image.for-creator-landing {
        color: #deb359; }
  .buy-upgrade-list .vip-description .title {
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0 0 10px 0;
    text-align: center;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 12px;
    font-style: normal;
    font-stretch: normal;
    line-height: 15px;
    letter-spacing: 0.7px;
    color: #404040; }
  .buy-upgrade-list .vip-description .title:hover {
    cursor: default; }
  .buy-upgrade-list .vip-description .sentence {
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0 0 10px 0;
    text-align: center;
    font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 12px;
    font-style: normal;
    font-stretch: normal;
    line-height: 12px;
    letter-spacing: normal;
    color: #404040; }
  .buy-upgrade-list .vip-description .sentence:hover {
    cursor: default; }
  .buy-upgrade-list .vip-description .learn-link-outer {
    display: inline-block;
    width: 100%;
    height: 15px;
    padding: 0;
    margin: 0; }
    .buy-upgrade-list .vip-description .learn-link-outer .learn-link-inner {
      display: inline-block;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: normal;
      font-style: normal;
      font-size: 12px;
      font-style: normal;
      font-stretch: normal;
      line-height: 15px;
      letter-spacing: normal;
      color: #deb359;
      clear: both; }
    .buy-upgrade-list .vip-description .learn-link-outer .learn-link-inner:hover {
      cursor: pointer; }

.buy-upgrade-list.bottom-padding {
  margin-bottom: 20px; }

.list-like-submode .buy-upgrade-list.is-responsive-tile-list {
  display: flex;
  flex-wrap: wrap; }
  .list-like-submode .buy-upgrade-list.is-responsive-tile-list.two-columns .is-responsive-tile-list-item {
    width: calc((100% - 15px)/2); }
    .list-like-submode .buy-upgrade-list.is-responsive-tile-list.two-columns .is-responsive-tile-list-item:nth-of-type(3n) {
      margin-right: 15px; }
    .list-like-submode .buy-upgrade-list.is-responsive-tile-list.two-columns .is-responsive-tile-list-item:nth-of-type(2n) {
      margin-right: 0; }

.dialog-body .buy-upgrade-list .system-info-header {
  margin-top: 20px; }

@media screen and (max-width: 550px) {
  .mode[data-layout=c3] .submode .buy-upgrade-list .system-info-header {
    margin-top: 15px; } }

@media screen and (max-width: 320px) {
  .mode[data-layout=c3] .submode.submode-store .buy-upgrade-list .vip-description span.icon svg,
  .mode[data-layout=c3] .submode.submode-payment-methods .buy-upgrade-list .vip-description span.icon svg {
    width: 230px; } }
/*css!/common/waf/js/widget/buyUpgradeList/BuyUpgradeListItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.buy-upgrade-list-item {
  background: #fff; }
  .buy-upgrade-list-item.clickblocked {
    cursor: default !important; }
  .buy-upgrade-list-item .show-price {
    display: inline-block; }
  .buy-upgrade-list-item .show-active {
    display: none; }
  .buy-upgrade-list-item.active {
    opacity: 0.5;
    cursor: default !important; }
    .buy-upgrade-list-item.active .item-price .show-price {
      display: none; }
    .buy-upgrade-list-item.active .item-price .show-active {
      display: inline-block; }
  .buy-upgrade-list-item .item-info {
    color: #a8a8a8;
    z-index: 0; }
    .buy-upgrade-list-item .item-info .check-mark {
      display: block;
      position: absolute;
      width: 25px;
      height: 25px;
      bottom: 37px;
      right: 0px;
      z-index: 1; }
    .buy-upgrade-list-item .item-info .check-mark-hidden {
      display: none; }
  .buy-upgrade-list-item .item-price-white {
    height: 30px !important;
    padding-left: 10px;
    text-align: left;
    font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 12px !important;
    font-style: normal !important;
    font-stretch: normal !important;
    line-height: 30px !important;
    letter-spacing: normal !important;
    color: #a8a8a8 !important;
    background: #fff !important; }
  .buy-upgrade-list-item .item-price-charcoal {
    height: 30px !important;
    padding-left: 10px;
    text-align: left;
    font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 12px !important;
    font-style: normal !important;
    font-stretch: normal !important;
    line-height: 30px !important;
    letter-spacing: normal !important;
    color: #fff !important;
    background: #404040 !important; }
  .buy-upgrade-list-item.selected-item {
    border: #404040 solid 1px; }

.list-like-submode .buy-upgrade-list .buy-upgrade-list-item.is-responsive-tile-list-item {
  margin: 0 15px 15px 0;
  width: calc((100% - 30px)/3);
  height: auto; }
  .list-like-submode .buy-upgrade-list .buy-upgrade-list-item.is-responsive-tile-list-item:nth-of-type(3n) {
    margin-right: 0; }
  .list-like-submode .buy-upgrade-list .buy-upgrade-list-item.is-responsive-tile-list-item .item-info {
    height: 136px; }
    .list-like-submode .buy-upgrade-list .buy-upgrade-list-item.is-responsive-tile-list-item .item-info .image-container {
      height: 110px; }

.submode .buy-upgrade-list .buy-upgrade-list-item, .list-like-submode .buy-upgrade-list .buy-upgrade-list-item {
  position: relative;
  margin-right: 10px;
  font-size: 12px;
  text-align: center;
  width: 150px;
  height: auto;
  display: inline-block; }
  .submode .buy-upgrade-list .buy-upgrade-list-item.width140, .list-like-submode .buy-upgrade-list .buy-upgrade-list-item.width140 {
    width: 140px !important; }
  .submode .buy-upgrade-list .buy-upgrade-list-item.height140, .list-like-submode .buy-upgrade-list .buy-upgrade-list-item.height140 {
    height: 140px !important; }
  .submode .buy-upgrade-list .buy-upgrade-list-item.height180, .list-like-submode .buy-upgrade-list .buy-upgrade-list-item.height180 {
    height: 180px !important; }
  .submode .buy-upgrade-list .buy-upgrade-list-item:hover, .list-like-submode .buy-upgrade-list .buy-upgrade-list-item:hover {
    cursor: pointer;
    opacity: 0.75; }
  .submode .buy-upgrade-list .buy-upgrade-list-item:last-child, .list-like-submode .buy-upgrade-list .buy-upgrade-list-item:last-child {
    margin-right: 0; }
  .submode .buy-upgrade-list .buy-upgrade-list-item .item-info, .list-like-submode .buy-upgrade-list .buy-upgrade-list-item .item-info {
    height: 150px;
    width: inherit;
    line-height: 1.4;
    color: #a8a8a8; }
    .submode .buy-upgrade-list .buy-upgrade-list-item .item-info .image-container, .list-like-submode .buy-upgrade-list .buy-upgrade-list-item .item-info .image-container {
      height: 118px;
      width: 100%;
      padding: 18px 30px 0 30px; }
      .submode .buy-upgrade-list .buy-upgrade-list-item .item-info .image-container img, .list-like-submode .buy-upgrade-list .buy-upgrade-list-item .item-info .image-container img {
        width: 80px; }
  .submode .buy-upgrade-list .buy-upgrade-list-item .item-price, .list-like-submode .buy-upgrade-list .buy-upgrade-list-item .item-price {
    background: #deb359;
    color: #fff;
    height: 40px;
    width: inherit;
    line-height: 40px; }
  .submode .buy-upgrade-list .buy-upgrade-list-item .background-charcoal, .list-like-submode .buy-upgrade-list .buy-upgrade-list-item .background-charcoal {
    color: #fff;
    background: #404040; }
  .submode .buy-upgrade-list .buy-upgrade-list-item .background-white, .list-like-submode .buy-upgrade-list .buy-upgrade-list-item .background-white {
    color: #a8a8a8;
    background: #fff; }
  .submode .buy-upgrade-list .buy-upgrade-list-item .promo-banner.best-value, .submode .buy-upgrade-list .buy-upgrade-list-item .promo-banner.most-popular, .list-like-submode .buy-upgrade-list .buy-upgrade-list-item .promo-banner.best-value, .list-like-submode .buy-upgrade-list .buy-upgrade-list-item .promo-banner.most-popular {
    position: absolute;
    top: 10px;
    left: -5px;
    height: 25px;
    width: 120px;
    color: #fff;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 10px;
    padding-left: 10px;
    text-align: left;
    line-height: 25px;
    background: #404040; }
    .submode .buy-upgrade-list .buy-upgrade-list-item .promo-banner.best-value .triangle, .submode .buy-upgrade-list .buy-upgrade-list-item .promo-banner.most-popular .triangle, .list-like-submode .buy-upgrade-list .buy-upgrade-list-item .promo-banner.best-value .triangle, .list-like-submode .buy-upgrade-list .buy-upgrade-list-item .promo-banner.most-popular .triangle {
      position: absolute;
      top: 15px;
      left: 0px;
      z-index: -1;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 5px 10px 0;
      border-color: transparent #0d0d0d transparent transparent; }
  .submode .buy-upgrade-list .buy-upgrade-list-item .promo-banner.sale, .list-like-submode .buy-upgrade-list .buy-upgrade-list-item .promo-banner.sale {
    position: absolute;
    top: 10px;
    left: -5px;
    height: 25px;
    width: 80px;
    color: #fff;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 10px;
    padding-left: 10px;
    text-align: left;
    line-height: 25px;
    background: #ff374d; }
    .submode .buy-upgrade-list .buy-upgrade-list-item .promo-banner.sale .triangle, .list-like-submode .buy-upgrade-list .buy-upgrade-list-item .promo-banner.sale .triangle {
      position: absolute;
      top: 15px;
      left: 0px;
      z-index: -1;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 5px 10px 0;
      border-color: transparent #d00017 transparent transparent; }

.mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item), .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) {
  position: relative;
  padding: 0 15px;
  z-index: 0; }
  .mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item):hover, .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item):hover {
    cursor: pointer; }
  .mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper, .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper {
    height: 70px;
    display: flex;
    border-bottom: solid 1px #f2f2f2; }
    .mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .item-info, .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .item-info {
      line-height: 70px;
      width: 70px;
      text-align: center; }
      .mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .item-info .image-container, .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .item-info .image-container {
        width: 50px;
        height: 100%;
        padding: 10px 0; }
        .mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .item-info .image-container img, .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .item-info .image-container img {
          width: 50px; }
    .mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .item-price, .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .item-price {
      color: #404040;
      padding-top: 20px; }
      .mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .item-price .has-discount.prices, .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .item-price .has-discount.prices {
        color: #ff374d; }
      .mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .item-price .subscription-title, .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .item-price .subscription-title {
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal; }
      .mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .item-price span.original-price, .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .item-price span.original-price {
        color: #404040; }
    .mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .promo-banner, .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .promo-banner {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      position: absolute;
      left: 90px;
      top: 40px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      color: #fff;
      font-size: 10px; }
      .mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .promo-banner.sale, .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .promo-banner.sale {
        width: 50px;
        background: #ff374d; }
      .mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .promo-banner.best-value, .mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .promo-banner.most-popular, .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .promo-banner.best-value, .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .wrapper .promo-banner.most-popular {
        width: 100px;
        background: #404040; }
  .mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item).has-promo .wrapper .item-price, .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item).has-promo .wrapper .item-price {
    padding-top: 7px; }
  .mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item).selected-item, .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item).selected-item {
    background: #404040; }
    .mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item).selected-item .item-price, .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item).selected-item .item-price {
      color: #fff; }
      .mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item).selected-item .item-price .has-discount.prices, .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item).selected-item .item-price .has-discount.prices {
        color: #ff374d; }
      .mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item).selected-item .item-price span.original-price, .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item).selected-item .item-price span.original-price {
        color: #fff; }
    .mobile .dialog-body .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item).selected-item .wrapper, .mobile .submode-buycredit .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item).selected-item .wrapper {
      border-color: #404040; }

body.mobile .list-like-submode .buy-upgrade-list .buy-upgrade-list-item.is-responsive-tile-list-item {
  width: 100%;
  margin: 0px 0px 15px 0px; }
  body.mobile .list-like-submode .buy-upgrade-list .buy-upgrade-list-item.is-responsive-tile-list-item .wrapper .item-info {
    height: 90px;
    text-align: left; }
    body.mobile .list-like-submode .buy-upgrade-list .buy-upgrade-list-item.is-responsive-tile-list-item .wrapper .item-info .image-container {
      display: inline; }
    body.mobile .list-like-submode .buy-upgrade-list .buy-upgrade-list-item.is-responsive-tile-list-item .wrapper .item-info .image-labels {
      display: inline-block;
      vertical-align: bottom;
      height: 60px;
      font-weight: bold;
      color: #404040; }

@media screen and (max-width: 550px) {
  .mode[data-layout=c3] .submode-store .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item), .submode-vip .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) {
    margin-right: 0; }
    .mode[data-layout=c3] .submode-store .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item):nth-child(odd), .submode-vip .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item):nth-child(odd) {
      margin-left: 10px;
      margin-bottom: 10px; } }

@media screen and (max-width: 320px) {
  .submode-vip .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item), .submode-store .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) {
    width: 140px; }
    .submode-vip .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .item-price, .submode-vip .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .item-info, .submode-store .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .item-price, .submode-store .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .item-info {
      width: 140px; }
    .submode-vip .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .item-info .image-container, .submode-store .buy-upgrade-list .buy-upgrade-list-item:not(.is-responsive-tile-list-item) .item-info .image-container {
      padding: 25px 30px 10px; } }
/*css!/common/withme/js/dialog/store/MultiCartUpsellDialog.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
[data-ui-role="modal-dialog"].multicart-upsell-dialog {
  width: 100%; }
  [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container {
    height: 100%;
    position: relative;
    display: grid;
    grid-template: "dialog-header" 50px "dialog-body" minmax(0, 1fr) "dialog-footer" 70px/1fr; }
    [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container.dlg_vip, [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container.dlg_credits, [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container.dlg_host_subscription, [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container.vcoin {
      height: 565px;
      max-height: 565px; }
    [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container.dlg_tiered_vip {
      height: 800px;
      max-height: 800px; }
      [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container.dlg_tiered_vip .scroll-wrapper > .scroll-content {
        padding-bottom: 150px; }
    [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container.upsell_after_gift_product, [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container.upsell_after_gift_credits, [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container.upsell_after_gift_vcoin {
      height: 650px;
      max-height: 650px; }
  [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-header {
    grid-area: dialog-header; }
  [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body {
    grid-area: dialog-body / 1 / span 2 / 1;
    margin-top: 0;
    position: relative;
    text-align: left;
    z-index: 0; }
    [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body.vcoin-logged-out .multicart-upsell-panel {
      background: url("https://static-akm.imvu.com/imvufiles/vcoin_intro_dialog_background_tm.png") no-repeat 50% 0; }
    [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body.vcoin-logged-out .product-ad {
      display: none; }
    [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body.vcoin-logged-out .multicart-upsell-panel .title {
      margin-top: 250px; }
    [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body.vcoin-logged-out .vcoin-bullet-wrapper {
      margin: 0 15px;
      order: 5; }
      [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body.vcoin-logged-out .vcoin-bullet-wrapper ul {
        margin: 10px 0; }
        [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body.vcoin-logged-out .vcoin-bullet-wrapper ul li {
          list-style-type: disc;
          margin-left: 15px; }
    [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body p {
      margin: 0;
      text-align: left; }
      [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body p ~ p {
        margin: 15px 0 0 0; }
      [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body p ~ ul {
        margin: 10px 0 0 0; }
    [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body ul ~ p {
      margin: 15px 0 0 0; }
    [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel {
      display: flex;
      flex-direction: column;
      height: 100%;
      user-select: none; }
      [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel > * {
        flex: 0 0 auto; }
        [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel > *:last-child {
          margin-bottom: 15px; }
      [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .product-ad {
        order: 1;
        height: initial;
        width: 100%;
        margin: 0 auto; }
      [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .upsell_after_gift_product-ad {
        order: 1;
        height: initial;
        margin: 0 auto; }
      [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel > .title {
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal;
        text-transform: uppercase;
        order: 2;
        margin: 16px 15px 15px;
        letter-spacing: 0.07em; }
      [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel > .upsell_after_gift_recipient_received {
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal;
        text-transform: none;
        order: 2;
        margin: -8px 15px 15px;
        letter-spacing: 0.07em;
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 600; }
      [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel > .upsell_after_gift_title {
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal;
        text-transform: none;
        order: 2;
        margin: -8px 15px 15px;
        letter-spacing: 0.07em;
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 325; }
      [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel > .description, [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .description-2 {
        margin-left: 15px;
        margin-right: 15px;
        order: 4;
        text-align: left;
        white-space: normal; }
        [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel > .description .learn, [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .description-2 .learn {
          color: #deb359;
          font-size: 10px;
          text-transform: uppercase;
          cursor: pointer; }
        [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel > .description .half-spacer, [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .description-2 .half-spacer {
          height: 5px; }
        [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel > .description .spacer, [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .description-2 .spacer {
          height: 10px; }
        [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel > .description ul, [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .description-2 ul {
          margin-left: 5px; }
          [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel > .description ul li, [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .description-2 ul li {
            font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
            font-weight: 500;
            font-style: normal;
            list-style-type: disc;
            margin: 0px 0px 5px 15px; }
      [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .vip_web_tier_1-description,
      [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .vip_web_tier_2-description,
      [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .vip_web_tier_3-description {
        display: none;
        white-space: normal; }
        [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .vip_web_tier_1-description:only-child, [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .vip_web_tier_1-description.active,
        [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .vip_web_tier_2-description:only-child,
        [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .vip_web_tier_2-description.active,
        [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .vip_web_tier_3-description:only-child,
        [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .vip_web_tier_3-description.active {
          display: block; }
        [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .vip_web_tier_1-description ul,
        [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .vip_web_tier_2-description ul,
        [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .vip_web_tier_3-description ul {
          margin-top: 15px; }
          [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .vip_web_tier_1-description ul li,
          [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .vip_web_tier_2-description ul li,
          [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .vip_web_tier_3-description ul li {
            font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
            font-weight: normal;
            font-style: normal;
            line-height: 1.2;
            white-space: normal; }
      [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .product-selectors {
        margin: 0 0 5px 15px;
        order: 3; }
        [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .product-selectors .multi-product-list .system-info-header {
          font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
          font-weight: normal;
          font-style: normal;
          width: calc(100% - 15px);
          line-height: 12px;
          padding-bottom: 5px; }
        [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .product-selectors .multi-product-list .multi-product-item,
        [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body .multicart-upsell-panel .product-selectors .multi-product-list .multi-product-vipitem {
          margin-right: 10px; }
  [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container.dlg_tiered_vip .dialog-body .multicart-upsell-panel > .description {
    white-space: normal; }
  [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body-scroller::after {
    content: '';
    display: block;
    height: 85px; }
  [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-header .back-button {
    position: absolute;
    top: 25px;
    left: 25px;
    transform: translateX(-50%) translateY(-50%);
    width: 50px;
    height: 50px;
    text-align: center;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 15px;
    cursor: pointer; }
    [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-header .back-button::before {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-header .back-button::before {
      content: ""; }
  [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-footer {
    background: rgba(255, 255, 255, 0.9);
    grid-area: dialog-footer;
    z-index: 1; }
    [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-footer button {
      line-height: 35px;
      width: 100%;
      margin: 15px;
      border: none; }
      [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-footer button.checkout-cta:not(.disabled) {
        background: #deb359; }
  [data-ui-role="modal-dialog"].multicart-upsell-dialog.product-credits .multi-product-list .multi-product-item:not(.category-credits),
  [data-ui-role="modal-dialog"].multicart-upsell-dialog.product-vip .multi-product-list .multi-product-item:not(.category-vip) {
    display: none;
    margin: 0 !important; }

.mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container {
  grid-template-columns: auto;
  grid-template-rows: 50px 1fr 40px; }
  .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container.dlg_vip, .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container.dlg_credits, .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container.dlg_host_subscription, .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container.vcoin, .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container.dlg_tiered_vip {
    height: 100%;
    max-height: -webkit-fill-available; }
  .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-container .dialog-body.vcoin-logged-out .multicart-upsell-panel {
    background-size: 100% auto; }

.mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body {
  width: 100%;
  position: relative;
  text-align: left; }
  .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body .multicart-upsell-panel .product-ad {
    min-height: initial; }
  .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body .multicart-upsell-panel .product-selectors {
    margin-right: 15px; }
    .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body .multicart-upsell-panel .product-selectors .multi-product-list .system-info-header {
      width: 100%; }
    .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body .multicart-upsell-panel .product-selectors .multi-product-list .multi-product-item {
      height: 70px;
      background-image: none; }
      .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body .multicart-upsell-panel .product-selectors .multi-product-list .multi-product-item .promo-banner {
        height: 17px;
        width: 85px;
        line-height: 17px;
        font-size: 8px;
        white-space: nowrap;
        top: 5px;
        padding-left: 8px; }
        .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body .multicart-upsell-panel .product-selectors .multi-product-list .multi-product-item .promo-banner span {
          color: white;
          position: relative;
          z-index: 5; }
        .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body .multicart-upsell-panel .product-selectors .multi-product-list .multi-product-item .promo-banner .triangle {
          top: 7px; }
        .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body .multicart-upsell-panel .product-selectors .multi-product-list .multi-product-item .promo-banner::after {
          background-color: #404040; }
      .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body .multicart-upsell-panel .product-selectors .multi-product-list .multi-product-item.is-selected .promo-banner span {
        color: #404040; }
      .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body .multicart-upsell-panel .product-selectors .multi-product-list .multi-product-item.is-selected .promo-banner::after {
        background-color: white; }
  .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body .multicart-upsell-panel > div:last-child {
    padding-bottom: 50px; }
    .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body .multicart-upsell-panel > div:last-child.product-selectors {
      padding-bottom: 25px; }

.mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-footer button {
  margin: 0px; }

html[dir="rtl"] [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body .multicart-upsell-panel .product-selectors {
  margin-left: 5px;
  margin-right: 15px; }
  html[dir="rtl"] [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body .multicart-upsell-panel .product-selectors .system-info-header {
    width: calc(100% - 10px); }
  html[dir="rtl"] [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body .multicart-upsell-panel .product-selectors .multi-product-list .multi-product-item {
    margin-right: 0px;
    margin-left: 10px; }

html[dir="rtl"] .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body .multicart-upsell-panel .product-selectors {
  margin-left: 0; }
  html[dir="rtl"] .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body .multicart-upsell-panel .product-selectors .multi-product-list {
    margin-left: 15px;
    margin-right: 0px; }
  html[dir="rtl"] .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body .multicart-upsell-panel .product-selectors .system-info-header {
    width: 100%; }
  html[dir="rtl"] .mobile [data-ui-role="modal-dialog"].multicart-upsell-dialog .dialog-body .multicart-upsell-panel .product-selectors .multi-product-item.upsell .wrapper .middle {
    text-align: right; }
/*css!/common/withme/js/widget/store/MultiProductList.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.multi-product-list {
  user-select: none; }
  .multi-product-list .system-info-header {
    margin-bottom: 10px; }
    .multi-product-list .system-info-header .more-items {
      float: right;
      cursor: pointer; }

html[dir="rtl"] .multi-product-list .system-info-header .more-items {
  float: left; }

.product-selectors {
  margin-top: 15px; }

body:not(.mobile) .product-selectors.go-link .multi-product-list .multi-product-item,
body:not(.mobile) .product-selectors.go-link .multi-product-list .multi-product-vipitem,
body:not(.mobile) .product-selectors.go-link .multi-product-list .wrapper,
body:not(.mobile) .product-selectors.go-link .multi-product-list .item-info,
body:not(.mobile) .multicart-vipupgrade-panel .vip-container .multi-product-list .multi-product-item,
body:not(.mobile) .multicart-vipupgrade-panel .vip-container .multi-product-list .multi-product-vipitem,
body:not(.mobile) .multicart-vipupgrade-panel .vip-container .multi-product-list .wrapper,
body:not(.mobile) .multicart-vipupgrade-panel .vip-container .multi-product-list .item-info {
  width: 140px; }

body:not(.mobile) .product-selectors.go-link .multi-product-list .multi-product-item .image-container,
body:not(.mobile) .multicart-vipupgrade-panel .vip-container .multi-product-list .multi-product-item .image-container {
  padding-left: 28px;
  padding-right: 28px; }
/*css!/common/withme/js/widget/store/MultiProductItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.multi-product-item {
  position: relative;
  background: #fff;
  user-select: none;
  margin: 0 10px 10px 0;
  font-size: 12px;
  text-align: center;
  width: 150px;
  height: 190px;
  display: inline-block;
  padding-right: 0; }
  .multi-product-item:nth-child(3n+1) {
    margin-right: 0; }
  .multi-product-item:hover {
    cursor: pointer;
    opacity: 0.75; }
  .multi-product-item .item-info {
    height: 150px;
    width: 150px;
    line-height: 1.4;
    box-sizing: border-box;
    color: #a8a8a8;
    border: 2px solid transparent; }
    .multi-product-item .item-info .image-container {
      width: 100%;
      padding: 15px 33px 10px 33px; }
      .multi-product-item .item-info .image-container .helper {
        display: inline-block;
        vertical-align: middle;
        height: 100%; }
      .multi-product-item .item-info .image-container img {
        vertical-align: middle;
        width: 80px; }
      .multi-product-item .item-info .image-container svg.icon-vcoin {
        padding-top: 25px;
        width: 60px;
        height: 70px; }
      .multi-product-item .item-info .image-container svg.icon-host_subscriptions {
        width: 55px;
        padding: 5px; }
    .multi-product-item .item-info .icon {
      display: none;
      position: absolute;
      right: 5px;
      bottom: 38px;
      line-height: 30px;
      font-size: 20px;
      color: #404040; }
    .multi-product-item .item-info .title {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      color: #a8a8a8;
      font-size: 12px;
      margin-top: 5px;
      line-height: 14px;
      text-transform: uppercase;
      text-align: center; }
    .multi-product-item .item-info .title2 {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      color: #a8a8a8;
      font-size: 10px;
      line-height: 12px;
      text-align: center; }
    .multi-product-item .item-info .title3 {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      color: #a8a8a8;
      font-size: 10px;
      line-height: 12px;
      text-align: center; }
  .multi-product-item .item-price {
    background: #deb359;
    color: #fff;
    height: 40px;
    line-height: 40px;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }
    .multi-product-item .item-price span.original-price {
      text-decoration: line-through; }
    .multi-product-item .item-price .title {
      text-transform: uppercase; }
  .multi-product-item.is-selected .item-info {
    border-color: #404040; }
  .multi-product-item.is-selected .item-price {
    background: #404040 !important; }
  .multi-product-item.is-selected .icon {
    display: block; }
  .multi-product-item.is-active .item-price {
    background: #d4d4d4 !important;
    color: #fff; }
  .multi-product-item.is-active:hover {
    cursor: default;
    opacity: initial; }
  .multi-product-item .promo-banner.best-value, .multi-product-item .promo-banner.most-popular {
    position: absolute;
    top: 10px;
    left: -5px;
    height: 25px;
    width: 120px;
    color: #fff;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 10px;
    padding-left: 10px;
    text-align: left;
    line-height: 25px;
    background: #404040; }
    .multi-product-item .promo-banner.best-value .triangle, .multi-product-item .promo-banner.most-popular .triangle {
      position: absolute;
      top: 15px;
      left: 0px;
      z-index: -1;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 5px 10px 0;
      border-color: transparent #0d0d0d transparent transparent; }
  .multi-product-item .promo-banner.sale {
    position: absolute;
    top: 10px;
    left: -5px;
    height: 25px;
    width: 58px;
    color: #fff;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 10px;
    padding-left: 10px;
    text-align: left;
    line-height: 25px;
    background: #ff374d; }
    .multi-product-item .promo-banner.sale .triangle {
      position: absolute;
      top: 15px;
      left: 0px;
      z-index: -1;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 5px 10px 0;
      border-color: transparent #d00017 transparent transparent; }
  .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip {
    background-size: cover;
    height: 170px; }
    .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip .promo-banner.most-popular {
      position: absolute;
      top: 10px;
      left: -5px;
      height: 25px;
      width: 120px;
      color: #404040;
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 10px;
      padding-left: 10px;
      text-align: left;
      line-height: 25px;
      background: #fff;
      background-color: transparent;
      z-index: 3; }
      .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip .promo-banner.most-popular .triangle {
        position: absolute;
        top: 15px;
        left: 0px;
        z-index: -1;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 5px 10px 0;
        border-color: transparent #cccccc transparent transparent; }
      .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip .promo-banner.most-popular .triangle {
        z-index: 4; }
      .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip .promo-banner.most-popular span {
        position: relative;
        z-index: 5; }
      .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip .promo-banner.most-popular::after {
        content: '';
        width: 100%;
        height: 100%;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 4;
        pointer-events: none; }
    .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip .item-info {
      border-width: 0;
      height: 130px; }
      .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip .item-info .image-container img {
        padding: 10px; }
    .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip .multi-product-list {
      display: flex; }
    .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip .wrapper {
      vertical-align: middle; }
      .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip .wrapper .title {
        color: #fff; }
      .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip .wrapper .item-info .image-container img {
        display: none; }
      .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip .wrapper .item-info .image-container::after {
        width: 60px;
        height: 60px;
        display: inline-block;
        vertical-align: middle;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        content: '';
        margin-top: 10px; }
      .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip .wrapper .item-price {
        background-color: transparent !important; }
    .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip.vip_web_tier_1 {
      background-image: url(https://static-akm.imvu.com/imvufiles/vip/products/vip_upsell_background_gold.png); }
      .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip.vip_web_tier_1 .item-info .image-container::after {
        background-image: url(https://static-akm.imvu.com/imvufiles/vip/products/vip_icon_crown_overlay.png); }
    .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip.vip_web_tier_2 {
      background-image: url(https://static-akm.imvu.com/imvufiles/vip/products/vip_upsell_background_platinum.png); }
      .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip.vip_web_tier_2 .item-info .image-container::after {
        background-image: url(https://static-akm.imvu.com/imvufiles/vip/products/vip_icon_crown_overlay.png); }
    .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip.vip_web_tier_3 {
      background-image: url(https://static-akm.imvu.com/imvufiles/vip/products/vip_upsell_background_diamond.png); }
      .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip.vip_web_tier_3 .item-info .image-container::after {
        background-image: url(https://static-akm.imvu.com/imvufiles/vip/products/vip_icon_diamond_overlay.png); }
    .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip .icon {
      color: #fff;
      bottom: 0; }
    .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip.is-selected .item-info {
      border-width: 0; }
    .multicart-upsell-dialog .dlg_tiered_vip .multi-product-item.category-vip.is-selected .item-info::after {
      content: '';
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      position: absolute;
      top: 0;
      left: 0;
      border: 2px solid #404040;
      z-index: 1; }
  .multi-product-item.is-collapsed {
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important; }
    .multi-product-item.is-collapsed .wrapper {
      display: none; }
  .multi-product-item .multiplier[cart-count]:not([cart-count='0']):not([cart-count='1'])::after {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    content: "x" attr(cart-count);
    color: #fff;
    background-color: #a8a8a8;
    border-radius: 40px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0; }
  .multi-product-item .multiplier[cart-count]:not([cart-count='0']):not([cart-count='1']):not([cart-count='2']):not([cart-count='3']):not([cart-count='4']):not([cart-count='5']):not([cart-count='6']):not([cart-count='7']):not([cart-count='8']):not([cart-count='9'])::after {
    padding: 0 2px; }
  .multi-product-item .multiplier[cart-count]:not([cart-count='0']):not([cart-count='1'])[cart-count='99+']::after {
    padding: 0 5px 0 4px !important; }
  .multi-product-item .pend-multiplier[pend-count]:not([pend-count='0'])::after {
    display: block;
    position: absolute;
    top: 10px;
    right: 50px;
    content: "x" attr(pend-count);
    color: #404040;
    background-color: #ffcc00;
    border-radius: 40px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0; }
  .multi-product-item .pend-multiplier[pend-count]:not([pend-count='0']):not([pend-count='1']):not([pend-count='2']):not([pend-count='3']):not([pend-count='4']):not([pend-count='5']):not([pend-count='6']):not([pend-count='7']):not([pend-count='8']):not([pend-count='9'])::after {
    padding: 0 2px; }
  .multi-product-item .pend-multiplier[pend-count]:not([pend-count='0'])[pend-count='99+']::after {
    padding: 0 5px 0 4px !important; }
  .multi-product-item.host-sub .item-info .image-container {
    height: 80px;
    width: 100%;
    padding: 17.5px 45.5px 12.5px 45.5px; }
    .multi-product-item.host-sub .item-info .image-container img {
      width: 55px;
      height: 55px; }
  .multi-product-item.host-sub .item-info .title {
    margin-top: 0; }
  .multi-product-item.host-sub .item-info .title2 {
    margin-top: 3px; }
  .multi-product-item.host-sub .item-info .title3 {
    margin-top: 3px; }
  .vip-container .multi-product-item .item-info .image-container img {
    padding: 10px; }

html[dir="rtl"] .multi-product-item {
  margin: 0 0 10px 10px; }
  html[dir="rtl"] .multi-product-item:nth-child(3n+1) {
    margin-left: 0; }

@media screen and (max-width: 550px) {
  .mode[data-layout=c3] .multi-product-list .multi-product-item {
    margin-right: 0; }
    .mode[data-layout=c3] .multi-product-list .multi-product-item:nth-child(even) {
      margin-right: 10px; } }

@media screen and (max-width: 320px) {
  .submode-store .multi-product-list .multi-product-item, .submode-multicart-methods .multi-product-list .multi-product-item {
    width: 140px; }
    .submode-store .multi-product-list .multi-product-item .item-price, .submode-store .multi-product-list .multi-product-item .item-info, .submode-multicart-methods .multi-product-list .multi-product-item .item-price, .submode-multicart-methods .multi-product-list .multi-product-item .item-info {
      width: 140px; }
    .submode-store .multi-product-list .multi-product-item .item-info .image-container, .submode-multicart-methods .multi-product-list .multi-product-item .item-info .image-container {
      padding: 25px 30px 10px; } }

.mobile .multi-product-item.upsell {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 70px;
  width: 100%;
  height: 70px;
  background: #fff;
  margin: 0; }
  .mobile .multi-product-item.upsell.is-selected {
    background: #404040; }
    .mobile .multi-product-item.upsell.is-selected .wrapper .middle .line1 {
      color: #fff; }
    .mobile .multi-product-item.upsell.is-selected .wrapper .middle .line2 {
      color: #fff; }
    .mobile .multi-product-item.upsell.is-selected .wrapper .middle .line3 {
      color: #fff; }
    .mobile .multi-product-item.upsell.is-selected .wrapper .right .inner {
      color: #fff; }
    .mobile .multi-product-item.upsell.is-selected .separator {
      display: none; }
  .mobile .multi-product-item.upsell.is-active {
    opacity: 0.5; }
  .mobile .multi-product-item.upsell .wrapper {
    width: 100%;
    height: calc(100% - 1px);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start; }
    .mobile .multi-product-item.upsell .wrapper .left {
      order: 1;
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 80px;
      height: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      align-content: center; }
      .mobile .multi-product-item.upsell .wrapper .left .icon {
        height: 37.5px;
        width: 37.5px; }
        .mobile .multi-product-item.upsell .wrapper .left .icon img {
          height: 37.5px;
          width: 37.5px; }
    .mobile .multi-product-item.upsell .wrapper .middle {
      order: 2;
      flex-grow: 1;
      flex-shrink: 1;
      height: 100%;
      text-align: left;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: flex-start;
      align-content: flex-start; }
      .mobile .multi-product-item.upsell .wrapper .middle .line1 {
        order: 1;
        flex-grow: 0;
        flex-shrink: 0;
        width: 100%;
        margin-bottom: 1px;
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-style: normal;
        font-size: 12px;
        line-height: 133%;
        text-transform: capitalize;
        color: #404040; }
      .mobile .multi-product-item.upsell .wrapper .middle .line2 {
        order: 2;
        flex-grow: 0;
        flex-shrink: 0;
        width: 100%;
        margin-bottom: 1px;
        font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: normal;
        font-style: normal;
        font-style: normal;
        font-size: 10px;
        line-height: 133%;
        text-transform: capitalize;
        color: #404040; }
      .mobile .multi-product-item.upsell .wrapper .middle .line3 {
        order: 3;
        flex-grow: 0;
        flex-shrink: 0;
        width: 100%;
        font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: normal;
        font-style: normal;
        font-style: normal;
        font-size: 10px;
        line-height: 133%;
        text-transform: capitalize;
        color: #404040; }
    .mobile .multi-product-item.upsell .wrapper .right {
      order: 3;
      flex-grow: 0;
      flex-shrink: 1;
      height: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      align-content: center; }
      .mobile .multi-product-item.upsell .wrapper .right .inner .label-active {
        padding-left: 15px;
        padding-right: 15px;
        font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: normal;
        font-style: normal;
        font-size: 10px;
        color: #a8a8a8;
        line-height: 133%;
        letter-spacing: 0.0833em;
        text-transform: uppercase; }
    .mobile .multi-product-item.upsell .wrapper .promo-banner {
      top: 5px;
      width: auto;
      height: 14px;
      font-size: 8px;
      padding: 0 4px;
      line-height: 14px; }
      .mobile .multi-product-item.upsell .wrapper .promo-banner .triangle {
        top: 5px; }
  .mobile .multi-product-item.upsell .separator {
    z-index: 100;
    transform: translateX(1px);
    display: block;
    height: 0;
    width: calc(100% - 30px);
    margin-left: auto;
    margin-right: auto;
    border-bottom-color: #eaeaea;
    border-bottom-style: solid;
    border-bottom-width: 1px; }
  .mobile .multi-product-item.upsell:last-child .separator {
    display: none; }
  .mobile .multi-product-item.upsell .vcoin .multi-product-item.upsell .wrapper .left .icon.icon-wrapper {
    height: 40px;
    width: 40px; }
/*css!/common/withme/js/dialog/modal/AlloyConfirmDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.confirm-dialog-alloy footer.dialog-footer,
[data-ui-role="modal-dialog"][data-type="confirm"] footer.dialog-footer {
  display: grid;
  grid: 1fr / 1fr 1fr;
  grid-gap: 10px; }

.confirm-dialog-alloy.dark-text a,
[data-ui-role="modal-dialog"][data-type="confirm"].dark-text a {
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #404040; }
/*css!/common/withme/js/dialog/modal/AlloyAlertDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
[data-ui-role="modal-dialog"].alert-dialog-alloy {
  background-color: #fff;
  padding-top: 0;
  padding-bottom: 0; }
  [data-ui-role="modal-dialog"].alert-dialog-alloy .dialog-container {
    padding: 0 30px 30px 30px; }
  [data-ui-role="modal-dialog"].alert-dialog-alloy.dark-text a {
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #404040; }
/*css!/common/withme/js/dialog/modal/AlloyModalDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.transparent-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex; }

@media screen and (min-width: 470px) {
  .transparent-overlay {
    right: -20px;
    left: -20px;
    overflow-y: scroll; } }

[data-ui-role="modal-dialog"] {
  margin: auto;
  align-self: center;
  position: relative; }
  [data-ui-role="modal-dialog"].confirm-dialog-alloy .dialog-x,
  [data-ui-role="modal-dialog"].alert-dialog-alloy .dialog-x,
  [data-ui-role="modal-dialog"]:not(.can-dismiss) .dialog-x {
    display: none; }
  [data-ui-role="modal-dialog"].is-tall {
    height: 80%; }
    [data-ui-role="modal-dialog"].is-tall .dialog-container {
      min-height: 470px;
      max-height: 687px; }
  [data-ui-role="modal-dialog"] .dialog-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    position: relative;
    height: 100%;
    min-height: 240px;
    padding: 30px;
    padding-top: 0;
    background: rgba(255, 255, 255, 0.95); }
    [data-ui-role="modal-dialog"] .dialog-container .cta-link {
      order: 3;
      flex-grow: 0;
      flex-shrink: 0;
      letter-spacing: 0.0833em;
      line-height: 133%;
      font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: normal;
      font-style: normal;
      color: #deb359;
      text-transform: uppercase;
      padding-bottom: 15px;
      cursor: pointer; }
  [data-ui-role="modal-dialog"] .dialog-checkbox-container {
    margin: 0 auto 10px; }
  [data-ui-role="modal-dialog"] .dialog-dropdown-container {
    margin: 0 auto 10px;
    width: 100%; }
  [data-ui-role="modal-dialog"] .overflowed {
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 80px;
    margin-right: 15px;
    width: 100%;
    text-align: left; }
  [data-ui-role="modal-dialog"] h3 {
    font-size: 15px;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 70px;
    height: 70px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    margin: 0; }
  [data-ui-role="modal-dialog"] footer.dialog-footer {
    z-index: 300;
    display: flex;
    flex-shrink: 0; }
    [data-ui-role="modal-dialog"] footer.dialog-footer > button {
      flex-grow: 1; }
  [data-ui-role="modal-dialog"].userpicker-dialog .dialog-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 60px; }
  [data-ui-role="modal-dialog"].gift-thanking-message-dialog .dialog-footer,
  [data-ui-role="modal-dialog"].vcoin-withdrawal-dialog .dialog-footer,
  [data-ui-role="modal-dialog"].rest-web-gifting-dialog .dialog-footer,
  [data-ui-role="modal-dialog"].userpicker-dialog .dialog-footer,
  [data-ui-role="modal-dialog"].vcoin-conversion-dialog .dialog-footer {
    height: auto;
    background: #fff;
    padding: 15px; }
  [data-ui-role="modal-dialog"] .dialog-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    flex-grow: 1;
    z-index: 100;
    height: 100%;
    overflow: hidden; }
  [data-ui-role="modal-dialog"]:not(.dialog-type-B):not(.dialog-type-B-flexible) .dialog-body > p,
  [data-ui-role="modal-dialog"]:not(.dialog-type-B):not(.dialog-type-B-flexible) .dialog-body > .id-body-contents {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    text-align: center;
    margin-bottom: 30px; }
  [data-ui-role="modal-dialog"] .dialog-header {
    z-index: 200; }
    [data-ui-role="modal-dialog"] .dialog-header .dialog-back-button {
      cursor: pointer;
      position: absolute;
      left: 15px;
      width: 40px;
      height: 100%;
      display: flex;
      align-items: center; }
  [data-ui-role="modal-dialog"] .dialog-container.no-header .dialog-header {
    display: none; }
  [data-ui-role="modal-dialog"] .dialog-x {
    z-index: 500; }
  [data-ui-role="modal-dialog"]:not(.confirm-dialog) .dialog-x {
    position: absolute;
    bottom: 100%;
    left: 0;
    padding-bottom: 10px;
    font-size: 20px;
    line-height: 20px;
    color: #fff;
    text-decoration: none; }
  [data-ui-role="modal-dialog"]:not(.dialog-type-B):not(.dialog-type-B-flexible) > p {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-height: 120px;
    margin: 0 0 5px 0;
    font-size: 15px; }

.dialog-type-B .dialog-container, .dialog-type-B-flexible .dialog-container {
  min-width: 470px;
  padding: 0; }
  .dialog-type-B .dialog-container .dialog-header, .dialog-type-B-flexible .dialog-container .dialog-header {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    width: 100%;
    height: 50px;
    font-size: 12px;
    line-height: 50px;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 1px; }
    .dialog-type-B .dialog-container .dialog-header .dialog-title, .dialog-type-B-flexible .dialog-container .dialog-header .dialog-title {
      font-size: 15px; }
  .dialog-type-B .dialog-container .aux-header, .dialog-type-B-flexible .dialog-container .aux-header {
    position: absolute;
    top: 0;
    right: 0;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    z-index: 600;
    height: 50px;
    line-height: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 10px; }
  .dialog-type-B .dialog-container .dialog-body, .dialog-type-B-flexible .dialog-container .dialog-body {
    margin-top: 50px;
    padding-bottom: 0px; }
  .dialog-type-B .dialog-container.no-header .dialog-body, .dialog-type-B-flexible .dialog-container.no-header .dialog-body {
    margin-top: 0;
    height: 100%; }

.dialog-type-B p, .dialog-type-B-flexible p {
  margin: 0 0 15px 0;
  text-align: center; }

.dialog-type-B .section-title, .dialog-type-B-flexible .section-title {
  text-align: left;
  margin-bottom: 10px; }

.dialog-type-B footer button, .dialog-type-B-flexible footer button {
  width: 100%; }

[data-ui-role="modal-dialog"].is-padded .dialog-container, .dialog-type-B.is-padded .dialog-container, .dialog-type-B-flexible.is-padded .dialog-container {
  padding: 0 15px; }

[data-ui-role="modal-dialog"].is-padded .dialog-footer, .dialog-type-B.is-padded .dialog-footer, .dialog-type-B-flexible.is-padded .dialog-footer {
  padding: 0 15px 15px 15px;
  background-image: linear-gradient(top, transparent 0%, transparent 60%, #fff 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; }

[data-ui-role="modal-dialog"].dialog-type-grid .dialog-container, .dialog-type-B.dialog-type-grid .dialog-container, .dialog-type-B-flexible.dialog-type-grid .dialog-container {
  height: 100%;
  position: relative;
  display: grid;
  grid-template-columns: 470px;
  grid-template-rows: 50px 1fr 70px;
  grid-template-areas: "dialog-header" "dialog-body" "dialog-footer"; }

[data-ui-role="modal-dialog"].dialog-type-grid .dialog-header, .dialog-type-B.dialog-type-grid .dialog-header, .dialog-type-B-flexible.dialog-type-grid .dialog-header {
  grid-row: 1 / 2;
  grid-area: dialog-header; }

[data-ui-role="modal-dialog"].dialog-type-grid .dialog-body, .dialog-type-B.dialog-type-grid .dialog-body, .dialog-type-B-flexible.dialog-type-grid .dialog-body {
  grid-area: dialog-body;
  grid-row: 2 / 4;
  width: 100%;
  position: absolute;
  text-align: left;
  margin-top: 0; }

[data-ui-role="modal-dialog"].dialog-type-grid .dialog-footer, .dialog-type-B.dialog-type-grid .dialog-footer, .dialog-type-B-flexible.dialog-type-grid .dialog-footer {
  grid-area: drawer-footer;
  grid-row: 3 / 4;
  width: 100%;
  position: absolute;
  background: rgba(255, 255, 255, 0.9); }
  [data-ui-role="modal-dialog"].dialog-type-grid .dialog-footer button, .dialog-type-B.dialog-type-grid .dialog-footer button, .dialog-type-B-flexible.dialog-type-grid .dialog-footer button {
    width: 100%;
    margin: 15px;
    border: none; }

.dialog-type-B-flexible .dialog-container .dialog-body {
  height: auto; }

@media screen and (min-width: 470px) {
  .dialog-type-B > .dialog-container {
    height: 550px;
    min-height: 550px;
    max-height: 550px; }
  [data-ui-role="modal-dialog"] {
    min-width: 470px;
    max-width: 470px;
    word-wrap: break-word;
    padding: 45px 0; }
    [data-ui-role="modal-dialog"].no-padding {
      padding: 0; }
    [data-ui-role="modal-dialog"].is-tall {
      height: calc(80% + 90px);
      min-height: 560px;
      max-height: 777px; }
  .userpicker-dialog .user-picker {
    padding: 10px 15px; }
  .userpicker-dialog.gifting-recipient-picker .user-picker {
    padding: 10px 15px 60px 10px; } }

@media screen and (max-width: 469px) {
  .mobile .dialog-type-B-flexible .dialog-container .dialog-body {
    height: calc(100% - 50px); }
  .mobile .dialog-type-B-flexible .dialog-container.no-header .dialog-body {
    height: 100%; } }

@media screen and (max-width: 469px) {
  .mobile [data-ui-role="modal-dialog"] {
    min-width: calc(100% - 30px);
    max-width: calc(100% - 30px); }
    .mobile [data-ui-role="modal-dialog"].dialog-type-B, .mobile [data-ui-role="modal-dialog"].dialog-type-B-flexible {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      max-height: 100%;
      min-width: 100%; }
      .mobile [data-ui-role="modal-dialog"].dialog-type-B .dialog-container, .mobile [data-ui-role="modal-dialog"].dialog-type-B-flexible .dialog-container {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        min-width: 100%;
        min-height: 100%; }
      .mobile [data-ui-role="modal-dialog"].dialog-type-B .dialog-x, .mobile [data-ui-role="modal-dialog"].dialog-type-B-flexible .dialog-x {
        position: absolute;
        top: 0;
        left: 15px;
        color: #a8a8a8;
        font-size: 12px;
        height: 50px;
        line-height: 50px;
        text-transform: uppercase; }
        .mobile [data-ui-role="modal-dialog"].dialog-type-B .dialog-x::before, .mobile [data-ui-role="modal-dialog"].dialog-type-B-flexible .dialog-x::before {
          display: none; }
      .mobile [data-ui-role="modal-dialog"].dialog-type-B footer.dialog-footer, .mobile [data-ui-role="modal-dialog"].dialog-type-B-flexible footer.dialog-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%; } }

@media screen and (max-width: 469px) {
  .mobile [data-ui-role="modal-dialog"].dialog-type-grid .dialog-container, .mobile .dialog-type-B.dialog-type-grid .dialog-container, .mobile .dialog-type-B-flexible.dialog-type-grid .dialog-container {
    grid-template-columns: auto;
    grid-template-rows: 50px 1fr 40px; }
  .mobile [data-ui-role="modal-dialog"].dialog-type-grid .dialog-body, .mobile .dialog-type-B.dialog-type-grid .dialog-body, .mobile .dialog-type-B-flexible.dialog-type-grid .dialog-body {
    width: 100%;
    position: relative;
    text-align: left; }
  .mobile [data-ui-role="modal-dialog"].dialog-type-grid .dialog-footer button, .mobile .dialog-type-B.dialog-type-grid .dialog-footer button, .mobile .dialog-type-B-flexible.dialog-type-grid .dialog-footer button {
    margin: 0px; } }

@media screen and (max-width: 320px) {
  [data-ui-role="modal-dialog"] h3.dialog-title.long-title {
    margin: 0 -15px; } }

.mobile [data-ui-role="modal-dialog"] .dialog-header .dialog-back-button {
  display: none; }

.mobile [data-ui-role="modal-dialog"].gift-thanking-dialog .dialog-footer,
.mobile [data-ui-role="modal-dialog"].vcoin-withdrawal-dialog .dialog-footer,
.mobile [data-ui-role="modal-dialog"].rest-web-gifting-dialog .dialog-footer,
.mobile [data-ui-role="modal-dialog"].userpicker-dialog .dialog-footer {
  padding: 0; }
/*css!/common/withme/js/dialog/store/MultiCartUpgrade.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
[data-ui-role="modal-dialog"].multicart-upgrade-dialog {
  width: 100%; }
  [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-container.dlg_host_subscription {
    height: 580px !important;
    max-height: 580px !important; }
  [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body {
    display: flex;
    flex-direction: column;
    font-weight: normal;
    width: 100%;
    position: relative;
    text-align: left;
    margin-top: 50px;
    background-color: #f2f2f2;
    padding-bottom: 0;
    overflow-y: auto; }
    [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body p {
      margin: 0;
      text-align: left; }
      [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body p ~ p {
        margin: 15px 0 0 0; }
      [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body p ~ ul {
        margin: 10px 0 0 0; }
    [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body ul ~ p {
      margin: 15px 0 0 0; }
    [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body .multicart-upgrade-panel {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      height: 100%;
      user-select: none; }
      [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body .multicart-upgrade-panel img {
        max-height: 200px;
        max-width: 470px;
        width: 100%; }
      [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body .multicart-upgrade-panel > .title {
        text-transform: uppercase;
        font-size: 12px;
        font-weight: bold;
        margin: 16px 15px 0px 15px; }
      [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body .multicart-upgrade-panel > .description {
        margin: 20px 15px 0px 15px;
        text-align: left; }
        [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body .multicart-upgrade-panel > .description ul {
          margin-left: 5px; }
          [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body .multicart-upgrade-panel > .description ul li {
            list-style-type: disc;
            font-weight: bold;
            margin: 0px 0px 5px 20px;
            padding: 0px 0px 0px 5px; }
        [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body .multicart-upgrade-panel > .description .half-spacer {
          height: 5px; }
        [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body .multicart-upgrade-panel > .description .spacer {
          height: 10px; }
        [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body .multicart-upgrade-panel > .description .vip_web_tier_1-description,
        [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body .multicart-upgrade-panel > .description .vip_web_tier_2-description,
        [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body .multicart-upgrade-panel > .description .vip_web_tier_3-description {
          line-height: 1.2em; }
          [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body .multicart-upgrade-panel > .description .vip_web_tier_1-description ul,
          [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body .multicart-upgrade-panel > .description .vip_web_tier_2-description ul,
          [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body .multicart-upgrade-panel > .description .vip_web_tier_3-description ul {
            white-space: normal;
            margin-top: 10px; }
            [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body .multicart-upgrade-panel > .description .vip_web_tier_1-description ul li,
            [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body .multicart-upgrade-panel > .description .vip_web_tier_2-description ul li,
            [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-body .multicart-upgrade-panel > .description .vip_web_tier_3-description ul li {
              font-weight: normal; }
  [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-header .back-button {
    position: absolute;
    top: 25px;
    left: 25px;
    transform: translateX(-50%) translateY(-50%);
    width: 50px;
    height: 50px;
    text-align: center;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 15px;
    cursor: pointer; }
    [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-header .back-button::before {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-header .back-button::before {
      content: ""; }
  [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-footer {
    margin: 10px 15px 15px 15px;
    position: relative !important; }
    [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-footer button {
      line-height: 35px;
      width: 100%; }

.mobile [data-ui-role="modal-dialog"].multicart-upgrade-dialog .dialog-footer {
  margin: 0px; }
/*css!/common/withme/js/dialog/ShoppingCart/CartFullErrorDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.cart-full-error-dialog {
  text-align: center; }
  .cart-full-error-dialog .error-icon {
    padding-bottom: 11px;
    padding-top: 20px; }
    .cart-full-error-dialog .error-icon svg {
      width: 140px;
      height: 87px; }
  .cart-full-error-dialog .error-body {
    font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    font-style: normal;
    padding-bottom: 20px; }
/*css!/common/withme/js/dialog/shoppingCartLightbox/CartCheckout.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.cart-checkout {
  background: #fff;
  padding: 15px; }
  .cart-checkout .cart-details {
    font-size: 12px;
    text-transform: uppercase;
    padding-bottom: 15px;
    display: flex;
    justify-content: space-between;
    color: #404040;
    line-height: 20px;
    visibility: hidden; }
    .cart-checkout .cart-details .item-count {
      font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: normal;
      font-style: normal; }
    .cart-checkout .cart-details .total-price.price-credits {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      color: #404040; }
  .cart-checkout .btn.checkout {
    display: none; }
  .cart-checkout.loaded .cart-details {
    visibility: visible; }
  .cart-checkout.loaded .btn.checkout {
    display: block; }
  .cart-checkout.loaded .btn.loading-placeholder {
    display: none; }
/*css!/common/withme/js/widget/ProductView/Product2dView.css*/
.furniture-preview-2d {
  height: 100%;
  width: 100%;
  background-size: cover; }
/*css!/common/waf/js/widget/VIPUpsellReveal/VIPUpsellReveal.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.VIP-Upsell-Reveal {
  position: absolute;
  right: 0;
  width: 130px;
  height: 130px;
  padding: 8px 0 0 0;
  margin: 0;
  background-color: transparent;
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal;
  text-align: center;
  font-weight: 500;
  font-style: normal;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap; }
  .VIP-Upsell-Reveal .become {
    color: #fff; }
  .VIP-Upsell-Reveal .free {
    color: #404040; }
/*css!/common/withme/js/widget/undo/UndoWidget.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.undo-widget {
  display: flex; }
  .undo-widget > div {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    padding: 6px 0 0 7px;
    padding-top: 6px;
    background-color: rgba(255, 255, 255, 0.9);
    fill: #deb359;
    cursor: pointer;
    transition: opacity 0.15s; }
    .undo-widget > div:hover {
      opacity: 0.75; }
    .undo-widget > div:active {
      opacity: 0.5625; }
    .undo-widget > div svg {
      fill: #deb359;
      width: 16px;
      height: 16px; }
    .undo-widget > div.disabled {
      opacity: 1; }
      .undo-widget > div.disabled svg {
        fill: rgba(168, 168, 168, 0.5); }
  .undo-widget .undo {
    margin: 0 10px 0 0;
    padding-left: 6px; }
  .undo-widget.vertical {
    flex-direction: column; }
    .undo-widget.vertical .undo {
      margin: 0 0 10px 0; }

html[dir="rtl"] .undo-widget > div {
  padding: 6px 7px 0 0; }

html[dir="rtl"] .undo-widget .undo {
  padding-left: 0;
  padding-right: 6px; }
/*css!/common/withme/js/mode/shop/CreditsWidget.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.credits-widget {
  background-color: rgba(255, 255, 255, 0.95);
  color: #a8a8a8;
  padding: 10px;
  height: 74px;
  line-height: 18px;
  vertical-align: middle; }
  .credits-widget .details {
    display: none;
    white-space: nowrap;
    overflow-x: hidden;
    color: #a8a8a8;
    line-height: 16px;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-weight: normal;
    font-style: normal;
    font-size: 12px;
    letter-spacing: 0; }
    .credits-widget .details .available-credits {
      display: inline-block;
      margin: 3px 0;
      color: #deb359;
      line-height: 20px;
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      font-weight: 500;
      font-style: normal;
      font-size: 12px;
      letter-spacing: 0; }
    .credits-widget .details .credits-breakdown {
      display: block;
      padding-left: 0;
      color: #a8a8a8;
      line-height: 12px;
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      font-weight: 500;
      font-style: normal;
      font-size: 10px;
      letter-spacing: 0; }

.credits-widget:hover {
  cursor: pointer; }
/*css!/common/withme/js/dialog/feedTagLightbox/FeedTagLightbox.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.lightbox-dialog.feed-tag-lightbox .feed-tag-headpiece .picture {
  overflow: hidden; }
  .lightbox-dialog.feed-tag-lightbox .feed-tag-headpiece .picture > img {
    width: 100%;
    height: auto;
    background-color: #d4d4d4; }

.lightbox-dialog.feed-tag-lightbox .panel-container .scroller:not(.scroll-wrapper) > * {
  margin-right: 15px;
  margin-left: 15px; }

.lightbox-dialog.feed-tag-lightbox .accordion-section:first-child {
  margin-top: 10px; }
/*css!/common/withme/js/dialog/productLightbox/ProductLightbox.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.lightbox-dialog.product-lightbox .lightbox {
  height: 100%; }

.lightbox-dialog.product-lightbox .dialog-container .dialog-body .lightbox .main-container {
  position: relative;
  min-width: 100%;
  width: 100%; }
  .lightbox-dialog.product-lightbox .dialog-container .dialog-body .lightbox .main-container .product-detail-widget {
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translate(0);
    width: 100%;
    height: 100%;
    padding: 0; }

.lightbox-dialog.product-lightbox .dialog-container .dialog-body .lightbox .accordion-section:first-child {
  margin-top: 10px; }
  .lightbox-dialog.product-lightbox .dialog-container .dialog-body .lightbox .accordion-section:first-child .lightbox-sidebar {
    display: none; }
  .lightbox-dialog.product-lightbox .dialog-container .dialog-body .lightbox .accordion-section:first-child .mobile-overlay {
    display: none; }

.mobile .lightbox-dialog.product-lightbox .dialog-container .dialog-body .lightbox .main-container {
  overflow-y: scroll; }
/*css!/common/waf/js/widget/loadingProgress/LoadingProgress.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.loading-progress {
  background: rgba(0, 0, 0, 0.75);
  transition: background-color 0.15s ease;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2; }
  .loading-progress .progress {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 470px;
    height: 25px;
    margin-left: -235px;
    letter-spacing: 1px;
    opacity: 1; }
    .loading-progress .progress .bar {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      background-color: rgba(222, 179, 89, 0.3) !important;
      height: 25px !important;
      border-radius: 0px; }
      .loading-progress .progress .bar .value {
        width: 0;
        background-color: #deb359;
        height: 100%; }
      .loading-progress .progress .bar > .percentage {
        font-size: 12px;
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fdfdfd;
        user-select: none;
        cursor: default; }
    .loading-progress .progress .border {
      display: none; }
  .loading-progress.animated .bar .value {
    transition: width 0.15s ease; }
  .loading-progress.passive {
    background-color: transparent;
    pointer-events: none; }
    .loading-progress.passive .progress {
      top: 10px;
      left: 10px;
      margin: 0;
      width: 200px;
      pointer-events: all; }
/*css!/common/withme/js/widget/productDetailSidebar/ProductDetailSidebar.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.product-detail-sidebar {
  padding: 15px 0; }
  .product-detail-sidebar .accordion-section .title h2.body-heading {
    text-transform: uppercase; }
  .product-detail-sidebar .accordion-section:last-child {
    border: none; }
/*css!/common/withme/js/widget/productAdminTools/ProductAdminTools.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.product-admin-tools {
  font-size: 15px;
  line-height: 1.6em; }
  .product-admin-tools .btn {
    margin-bottom: 10px; }
  .product-admin-tools .title {
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #a8a8a8;
    font-size: 12px;
    line-height: 16px;
    padding-bottom: 4px; }
  .product-admin-tools .select-totals {
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #a8a8a8;
    font-size: 10px;
    line-height: 1.3em;
    padding-bottom: 10px; }
  .product-admin-tools .select-option {
    cursor: pointer;
    padding-bottom: 6px;
    user-select: none; }
  .product-admin-tools .unselect-all {
    padding-top: 6px; }
  .product-admin-tools .select-next {
    border-bottom: 1px solid #d4d4d4; }
  .product-admin-tools .show-greylisted-first {
    line-height: initial; }

.shop-submode .product-admin-tools {
  background: #fff;
  margin-top: 10px;
  padding: 10px; }
/*css!/common/withme/js/widget/productAdminTools/SelectAllWarningDialog.css*/
.select-all-warning-dialog .btn[data-confirm=yes] {
  background: #A90000;
  border: 1px solid #A90000; }
/*css!/common/withme/js/widget/productDetailSidebar/ProductDetails.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.product-details {
  display: flex;
  min-height: 80px; }
  .product-details img {
    display: block;
    width: 100px; }
  .product-details ul.info {
    font-size: 12px;
    text-transform: capitalize;
    list-style: disc;
    margin-left: 25px; }
    .product-details ul.info li {
      list-style-type: initial;
      padding-bottom: 5px; }

html[dir="rtl"] .product-details ul.info {
  margin-left: 0;
  margin-right: 25px; }
/*css!/common/withme/js/widget/productDetailSidebar/MoreByCreator.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.more-by-creator .name-container {
  display: flex;
  align-items: center; }
  .more-by-creator .name-container .profile-icon {
    margin-right: 10px; }

.more-by-creator .lightbox-product-list {
  margin-top: 10px; }

.more-by-creator button.view-shop {
  margin-top: 15px;
  display: none; }

html[dir="rtl"] .more-by-creator .name-container .profile-icon {
  margin-right: 0;
  margin-left: 10px; }
/*css!/common/withme/js/widget/DistinguishBlurbWidget/DistinguishBlurbWidget.css*/
.icon-distinguish {
  display: inline-flex;
  width: 1.4rem;
  height: 1.4rem;
  background-color: #AF339A;
  align-items: center;
  justify-content: center;
  vertical-align: middle; }
  .icon-distinguish::after {
    content: '+';
    font-weight: bold;
    font-size: 1.2rem;
    vertical-align: middle;
    color: white;
    line-height: 1; }

.distinguish-blurb-widget.distinguish-card .distinguish-widget-container {
  background-color: white;
  padding: 10px; }

.distinguish-blurb-widget:not(:first-child) .distinguish-widget-container {
  margin-top: 10px; }

.distinguish-blurb-widget .distinguish-widget-container {
  margin-bottom: 10px; }
  .distinguish-blurb-widget .distinguish-widget-container h3 {
    text-align: left;
    margin: 0 0 15px 0;
    line-height: 2;
    height: initial; }
  .distinguish-blurb-widget .distinguish-widget-container p:first-child {
    margin-top: 0; }
  .distinguish-blurb-widget .distinguish-widget-container p:last-child {
    margin-bottom: 0; }
  .distinguish-blurb-widget .distinguish-widget-container .distinguish-text-logo {
    font-weight: bold; }
/*css!/common/withme/js/widget/productDetailWidget/ProductDetailWidget.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.product-detail-widget {
  padding: 15px;
  height: 100%; }
  .product-detail-widget .panels {
    display: flex; }
    .product-detail-widget .panels .product-detail-left-panel {
      position: relative;
      min-width: 555px;
      flex-shrink: 0;
      background: rgba(0, 0, 0, 0.75); }
      .product-detail-widget .panels .product-detail-left-panel .avatar {
        background: url("/asset/dda1635ac47b868a/common/withme/img/ftux_dressingroom_landscape.jpg") no-repeat 50% 50%/cover;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%; }
      .product-detail-widget .panels .product-detail-left-panel .loading-progress {
        background: none; }
    .product-detail-widget .panels .product-detail-right-panel {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      position: relative;
      width: 345px;
      padding: 0; }
      .product-detail-widget .panels .product-detail-right-panel .headpiece {
        flex-grow: 0; }
        .product-detail-widget .panels .product-detail-right-panel .headpiece .picture {
          background-color: #d4d4d4; }
        .product-detail-widget .panels .product-detail-right-panel .headpiece .widgets {
          display: flex;
          flex-direction: column;
          background-color: #fff; }
          .product-detail-widget .panels .product-detail-right-panel .headpiece .widgets:not(:empty) {
            padding: 15px; }
          .product-detail-widget .panels .product-detail-right-panel .headpiece .widgets .product-headpiece {
            order: -1;
            /* WEB-11462: Should always come first. */ }
        .product-detail-widget .panels .product-detail-right-panel .headpiece.has-buttons .widgets:not(:empty), .product-detail-widget .panels .product-detail-right-panel .headpiece.has-nav .widgets:not(:empty) {
          padding-bottom: 0; }
      .product-detail-widget .panels .product-detail-right-panel .sticky-content {
        background-color: #fff;
        width: 100%; }
        .product-detail-widget .panels .product-detail-right-panel .sticky-content .nav-container {
          display: none;
          height: 50px;
          line-height: 50px;
          position: relative;
          text-align: center; }
          .product-detail-widget .panels .product-detail-right-panel .sticky-content .nav-container .nav.center-nav {
            display: block;
            margin: 0 auto;
            padding: 0; }
            .product-detail-widget .panels .product-detail-right-panel .sticky-content .nav-container .nav.center-nav li {
              transition: opacity 0.15s;
              padding: 0 15px; }
              .product-detail-widget .panels .product-detail-right-panel .sticky-content .nav-container .nav.center-nav li:hover {
                opacity: 0.75; }
              .product-detail-widget .panels .product-detail-right-panel .sticky-content .nav-container .nav.center-nav li:active {
                opacity: 0.5625; }
              .product-detail-widget .panels .product-detail-right-panel .sticky-content .nav-container .nav.center-nav li.active {
                font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
                font-weight: 500;
                font-style: normal;
                color: #404040; }
          .product-detail-widget .panels .product-detail-right-panel .sticky-content .nav-container .magic-line {
            transition: margin-left 0.3s, width 0.3s;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 0;
            margin-left: 0;
            border-bottom: solid 2px #404040; }
        .product-detail-widget .panels .product-detail-right-panel .sticky-content .lightbox-buttons {
          width: 100%; }
      .product-detail-widget .panels .product-detail-right-panel .sidebar {
        background: #f2f2f2;
        flex-grow: 1;
        position: relative;
        z-index: 0; }
        .product-detail-widget .panels .product-detail-right-panel .sidebar .panel-container {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          overflow: hidden; }
          .product-detail-widget .panels .product-detail-right-panel .sidebar .panel-container .scroller {
            overflow-y: auto;
            height: 100%; }
            .product-detail-widget .panels .product-detail-right-panel .sidebar .panel-container .scroller::after {
              content: '';
              height: 30px;
              display: block; }
        .product-detail-widget .panels .product-detail-right-panel .sidebar .panel-container .scroller:not(.scroll-wrapper) > * {
          margin-right: 15px;
          margin-left: 15px; }
        .product-detail-widget .panels .product-detail-right-panel .sidebar .accordion-section:first-child {
          margin-top: 10px; }
      .product-detail-widget .panels .product-detail-right-panel .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1; }
      .product-detail-widget .panels .product-detail-right-panel .hide-clicks {
        position: absolute;
        width: 100%;
        height: 100%; }
  .product-detail-widget .bridge-action-buttons {
    display: flex;
    padding: 0 9px 15px 9px;
    background-color: #fff; }
    .product-detail-widget .bridge-action-buttons button {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 12px;
      letter-spacing: 1px;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      outline: none;
      height: 40px;
      margin: 0 4px;
      min-height: 40px;
      line-height: 1; }
    .product-detail-widget .bridge-action-buttons .btn-dark.join {
      transition: color 0.15s, background-color 0.15s, opacity 0.15s;
      border: 1px solid #404040;
      padding: 0 16px;
      background: #404040;
      color: #fff; }
    .product-detail-widget .bridge-action-buttons .btn:not(.hidden) + .btn:not(.hidden) {
      margin-left: 10px; }

.mobile .product-detail-widget {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: flex-start;
  align-items: stretch;
  padding: 0; }
  .mobile .product-detail-widget .panels {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: stretch; }
    .mobile .product-detail-widget .panels .product-detail-left-panel {
      background: #fff;
      position: fixed;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-content: flex-start;
      align-items: stretch;
      min-width: auto; }
      .mobile .product-detail-widget .panels .product-detail-left-panel .avatar {
        background: url("/asset/dda1635ac47b868a/common/withme/img/ftux_dressingroom_landscape.jpg"); }
    .mobile .product-detail-widget .panels .product-detail-right-panel {
      position: absolute;
      margin-top: 330px;
      overflow-y: auto;
      width: 100%; }
/*css!/common/withme/js/widget/userPicker/UserNameListPresenter.css*/
.user-name-list-presenter {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
  vertical-align: middle; }
  .user-name-list-presenter:empty {
    display: none; }
  .user-name-list-presenter .user-info {
    max-width: calc(100% - 20px); }
/*css!/common/withme/js/widget/userPicker/UserNameListItemPresenter.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.user-picker .user-name-list-item-presenter {
  overflow: hidden;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  max-width: 95px;
  padding: 5px 10px;
  margin: 2px 5px 3px 0;
  height: 25px;
  font-size: 12px;
  cursor: default;
  background-color: #404040;
  color: #fff;
  vertical-align: top; }
  .user-picker .user-name-list-item-presenter .user-info {
    max-width: 100%; }
    .user-picker .user-name-list-item-presenter .user-info .display-name {
      width: calc(100% - 15px);
      min-width: 40px;
      max-width: 65px;
      margin-right: 5px; }
  .user-picker .user-name-list-item-presenter .dual-name {
    width: calc(100% - 30px);
    margin-right: 11px; }
  .user-picker .user-name-list-item-presenter .remove-recipient {
    display: inline-flex;
    flex-grow: 0;
    cursor: pointer;
    line-height: 25px;
    color: #a8a8a8; }
  .user-picker .user-name-list-item-presenter.highlight {
    background-color: #2b2b2b; }
  .user-picker .user-name-list-item-presenter.user-name-list-item-presenter-dual-version {
    width: 100% !important;
    max-width: 100% !important; }

.mobile .user-name-list-item-presenter span:first-child {
  max-width: 100px; }
/*css!/common/withme/js/widget/userPicker/UserPicker.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.user-picker {
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  cursor: text;
  overflow: hidden; }
  .user-picker.loading {
    opacity: 0.5;
    pointer-events: none; }

.user-picker .user-picker-to {
  display: inline-block;
  margin: 6px 5px 6px 6px;
  flex-grow: 0;
  flex-shrink: 0;
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal; }

.user-picker .user-suggestion-list-presenter-container {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
  width: 100%; }

.user-picker .clear-input {
  display: block;
  opacity: 0;
  font-size: 14px;
  margin-right: 10px;
  flex-grow: 0;
  flex-shrink: 0;
  line-height: 30px;
  height: 30px; }
  .user-picker .clear-input::before {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
  .user-picker .clear-input::before {
    content: ""; }

.user-picker.flow-up {
  overflow: visible; }
  .user-picker.flow-up .user-suggestion-list-presenter-container {
    position: absolute;
    bottom: 100%; }

.user-picker .user-picker-search[type="text"] {
  display: inline-block;
  width: 99%;
  min-width: 180px;
  padding-right: 0;
  height: 30px;
  line-height: 30px;
  border: 0;
  padding: 0px;
  margin: 0;
  background: transparent;
  font-weight: normal; }
  .user-picker .user-picker-search[type="text"]::placeholder {
    color: #a8a8a8;
    font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 12px; }
  .user-picker .user-picker-search[type="text"]:focus {
    border: none !important; }

.user-picker .user-picker-name-box-wrapper {
  flex-shrink: 0;
  padding: 5px 0 5px 5px;
  background-color: #fff;
  box-shadow: inset 0 0 0 1px #d4d4d4;
  display: flex;
  max-height: 85px; }

.user-picker.focused .user-picker-name-box-wrapper {
  box-shadow: inset 0 0 0 1px #404040; }

.user-picker.focused.has-input .clear-input {
  opacity: 1;
  cursor: pointer; }

.user-picker .user-picker-name-box-scroll-wrapper {
  flex-grow: 1; }

.user-picker.max-cap-disable[data-max-entries='1'] .user-picker-to,
.user-picker:not(.has-input) .user-picker-to {
  align-self: center; }

.user-picker .user-picker-name-box {
  display: inline;
  vertical-align: top;
  max-height: 80px;
  overflow-y: auto; }

.user-picker.search-creator.max-cap-disable[data-max-entries='1'] .user-picker-to {
  display: none; }

.user-picker.search-creator.max-cap-disable[data-max-entries='1'] .user-picker-name-box-wrapper {
  padding: 0;
  box-shadow: none;
  height: 50px; }
  .user-picker.search-creator.max-cap-disable[data-max-entries='1'] .user-picker-name-box-wrapper .user-picker-name-box-scroll-wrapper {
    height: 50px; }

.user-picker.search-creator.max-cap-disable[data-max-entries='1'] .user-suggestion-list-presenter {
  display: none; }

.user-picker.search-creator.max-cap-disable[data-max-entries='1'] .clear-input {
  display: none; }

.user-picker.search-creator.max-cap-disable[data-max-entries='1'] .user-name-list-item-presenter {
  height: 50px;
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center; }
  .user-picker.search-creator.max-cap-disable[data-max-entries='1'] .user-name-list-item-presenter .profile-icon,
  .user-picker.search-creator.max-cap-disable[data-max-entries='1'] .user-name-list-item-presenter .username-wrapper {
    display: block; }
  .user-picker.search-creator.max-cap-disable[data-max-entries='1'] .user-name-list-item-presenter .user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    margin-left: 10px;
    margin-right: 25px;
    min-width: 0; }
  .user-picker.search-creator.max-cap-disable[data-max-entries='1'] .user-name-list-item-presenter .username {
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }
  .user-picker.search-creator.max-cap-disable[data-max-entries='1'] .user-name-list-item-presenter span:first-child {
    max-width: none; }
  .user-picker.search-creator.max-cap-disable[data-max-entries='1'] .user-name-list-item-presenter .remove-recipient {
    font-size: 14px;
    margin-right: 10px;
    line-height: 50px; }

.user-picker.test-sandbox-flow .user-suggestion-list-presenter {
  max-height: 100px; }
/*css!/common/withme/js/widget/userPicker/UserSuggestionListPresenter.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.scroll-wrapper > .scroll-content.user-suggestion-list-presenter {
  position: static !important; }

.user-suggestion-list-presenter {
  width: 100%;
  position: relative;
  left: 0;
  margin: 0;
  overflow-y: auto; }
  .user-suggestion-list-presenter > .scroll-element.scroll-x.scroll-scrollx_visible {
    overflow-x: hidden; }
  .user-suggestion-list-presenter .no-results {
    padding: 5%;
    text-align: center;
    color: #a8a8a8;
    background-color: #fff;
    border-bottom: 1px solid #eaeaea; }
  .user-suggestion-list-presenter .divider {
    margin-top: 20px;
    margin-bottom: 10px; }
  .user-suggestion-list-presenter.paging::after {
    animation: ball-scale 1s 0s ease-in-out infinite;
    animation-fill-mode: both;
    content: '';
    display: block;
    background: #deb359;
    border-radius: 100%;
    height: 60px;
    width: 60px;
    position: relative;
    height: 60px;
    margin-bottom: -30px;
    left: 50%;
    margin-top: 25px;
    animation-delay: 0.25s; }

.mobile .user-suggestion-list-presenter {
  overflow-y: auto; }

.chat-invite-list .user-suggestion-list-presenter.scroll-wrapper {
  padding-bottom: 50px !important; }
/*css!/common/withme/js/widget/userPicker/UserListItemPresenter.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.user-list-item-presenter {
  border-bottom: solid 1px #d4d4d4;
  position: relative;
  background: #fff;
  cursor: pointer;
  height: 60px;
  padding-left: 50px; }
  .user-list-item-presenter:not(:first-of-type) {
    border-top-color: #fff; }
  .user-list-item-presenter.is-selected {
    background-color: #eaeaea; }
  .user-list-item-presenter .checkBoxWrapper {
    position: absolute;
    top: 20px;
    right: 0;
    bottom: 0;
    left: 15px;
    width: 14px;
    height: 14px;
    overflow: hidden; }
    .user-list-item-presenter .checkBoxWrapper input[type="checkbox"] + label {
      min-height: 14px; }
      .user-list-item-presenter .checkBoxWrapper input[type="checkbox"] + label:hover::before {
        border-color: #d4d4d4; }
  .user-list-item-presenter .user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%; }
    .user-list-item-presenter .user-info .dual-name-names {
      pointer-events: none; }
  .user-list-item-presenter .ap-badge {
    position: absolute;
    right: 10px;
    top: 15px;
    display: flex;
    /* Was... flex-direction: center; ...which is an invalid value.*/
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    background-color: rgba(235, 0, 109, 0.9);
    color: #fff;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }
  .user-list-item-presenter:hover, .user-list-item-presenter.selected, .user-list-item-presenter:focus {
    background-color: #404040;
    color: #fff; }

.user-picker.max-cap-disable .user-list-item-presenter:not(.is-selected),
.user-list-item-presenter.disabled {
  opacity: 0.5;
  pointer-events: none; }

.user-picker .user-list-item-presenter {
  border: 0;
  position: relative;
  background: #fff;
  cursor: pointer;
  height: 70px;
  padding-left: 15px; }
  .user-picker .user-list-item-presenter:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    margin: 0 10px;
    width: calc(100% - 20px);
    border-bottom: 1px solid #d4d4d4; }
  .user-picker .user-list-item-presenter:last-child:after {
    width: 100%;
    margin: 0; }
  .user-picker .user-list-item-presenter:not(:first-of-type) {
    border-top-color: #fff; }
  .user-picker .user-list-item-presenter.is-selected, .user-picker .user-list-item-presenter.is-selected:hover {
    background-color: #404040;
    color: #fff; }
  .user-picker .user-list-item-presenter .checkBoxWrapper {
    position: absolute;
    top: 25px;
    right: 15px;
    bottom: 0;
    left: auto;
    width: 20px;
    height: 20px;
    overflow: hidden; }
    .user-picker .user-list-item-presenter .checkBoxWrapper input[type="checkbox"] + label {
      min-height: 20px; }
      .user-picker .user-list-item-presenter .checkBoxWrapper input[type="checkbox"] + label::before {
        color: #deb359;
        width: 18px;
        height: 18px; }
    .user-picker .user-list-item-presenter .checkBoxWrapper .checkbox[type="checkbox"]:checked + label::before {
      line-height: 18px;
      font-size: 8px; }
  .user-picker .user-list-item-presenter .user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-right: 50px; }
  .user-picker .user-list-item-presenter .ap-badge {
    position: absolute;
    right: 50px;
    top: 23px;
    display: flex;
    /* Was... flex-direction: center; ...which is an invalid value.*/
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    background-color: rgba(235, 0, 109, 0.9);
    color: #fff;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }
  .user-picker .user-list-item-presenter:hover {
    background-color: #eaeaea;
    color: #404040; }
  .user-picker .user-list-item-presenter.selected, .user-picker .user-list-item-presenter:focus {
    background-color: #404040;
    color: #fff; }

.user-picker.small-user-picker .user-list-item-presenter {
  height: 50px;
  padding-left: 15px; }
  .user-picker.small-user-picker .user-list-item-presenter .ap-badge {
    right: 40px;
    top: 13px; }
  .user-picker.small-user-picker .user-list-item-presenter .checkBoxWrapper {
    position: absolute;
    top: 15px;
    right: 15px;
    bottom: 0;
    left: auto; }
  .user-picker.small-user-picker .user-list-item-presenter .username {
    margin: 0 0 0 35px; }

.desktop .user-picker:not(.small-user-picker) .user-list-item-presenter:after {
  margin: 0 15px;
  width: calc(100% - 30px); }
/*css!/common/withme/js/widget/responsiveTileList/ResponsiveRoomTileListItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.responsive-room-tile-list-item {
  position: relative; }
  .responsive-room-tile-list-item .room-tile-occupancy {
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }
  .responsive-room-tile-list-item .tile-footer {
    height: 60px;
    overflow: hidden; }
  .responsive-room-tile-list-item .audience-counter {
    position: absolute;
    top: 15px;
    left: 15px; }
/*css!/common/withme/js/widget/responsiveTileList/ResponsiveTileListItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.responsive-tile-list-item {
  margin: 0 15px 15px 0;
  width: calc((100% - 30px)/3);
  cursor: pointer; }
  .responsive-tile-list-item:nth-of-type(3n) {
    margin-right: 0; }
  .responsive-tile-list-item.is-selected {
    box-shadow: inset 0px 0px 0px 2px #404040; }
    .responsive-tile-list-item.is-selected .tile-footer {
      background: #404040; }
      .responsive-tile-list-item.is-selected .tile-footer .tile-name {
        color: #fff; }
  .responsive-tile-list-item .tile-footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    color: #a8a8a8;
    padding: 10px; }
  .responsive-tile-list-item .tile-name {
    width: 100%;
    color: #404040; }
  .responsive-tile-list-item .tile-info {
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #a8a8a8; }
  .responsive-tile-list-item .tile-thumbnail {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: -1; }
  .responsive-tile-list-item .tile-thumbnail .cover-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center; }
  .responsive-tile-list-item .tile-thumbnail img {
    display: block;
    width: 100%; }
  .responsive-tile-list-item .tile-thumbnail .overlay {
    position: abosulte;
    right: 0;
    top: 0; }
  .responsive-tile-list-item .icon-person svg {
    width: 13px;
    height: 13px; }
    .responsive-tile-list-item .icon-person svg path {
      fill: #a8a8a8; }
/*css!/common/withme/js/widget/audienceCounter/audienceCounter.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.audience-counter {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  display: inline-grid;
  grid-template-columns: 16px auto;
  grid-template-rows: 15px;
  grid-column-gap: 3px;
  height: auto;
  max-height: 25px;
  padding: 5px 4px;
  position: relative; }
  .audience-counter .audience-occupancy {
    color: #fff;
    line-height: 1.2em; }
    .audience-counter .audience-occupancy.full {
      color: #ff374d; }
  .audience-counter .icon-wrapper {
    display: flex; }
    .audience-counter .icon-wrapper svg {
      fill: #fff;
      vertical-align: middle; }
  .audience-counter .audience-tooltip {
    align-items: center;
    background-color: #fff;
    border-radius: 8px;
    display: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
    font-size: 10px;
    padding: 10px;
    position: absolute;
    right: 5px;
    top: calc(100% + 20px);
    white-space: nowrap; }
    .audience-counter .audience-tooltip:after {
      background-color: #fff;
      content: '';
      height: 15px;
      position: absolute;
      right: 5px;
      top: 0;
      transform: translate(-50%, -50%) rotate(45deg);
      width: 15px; }
  .audience-counter:hover .audience-tooltip {
    display: block; }
/*css!/common/withme/js/dialog/inventoryBridgeLightbox/InventoryBridgeLightbox.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.inventory-bridge-lightbox .dialog-body {
  margin: 15px 3px 0 15px; }
  .inventory-bridge-lightbox .dialog-body .my-rooms {
    margin-top: 15px; }
  .inventory-bridge-lightbox .dialog-body .accordion-section .content {
    margin-bottom: 0; }

.inventory-bridge-lightbox .btn.btn-dark {
  background-color: #404040;
  color: #fff;
  margin: 15px; }

.inventory-bridge-lightbox .dialog-footer {
  background-color: rgba(255, 255, 255, 0.9); }
/*css!/common/withme/js/widget/responsiveTileList/ResponsiveTileList.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.responsive-tile-list {
  display: flex;
  flex-wrap: wrap; }
  .responsive-tile-list.two-columns .responsive-tile-list-item {
    width: calc((100% - 15px)/2); }
    .responsive-tile-list.two-columns .responsive-tile-list-item:nth-of-type(3n) {
      margin-right: 15px; }
    .responsive-tile-list.two-columns .responsive-tile-list-item:nth-of-type(2n) {
      margin-right: 0; }
  .responsive-tile-list .icon-tooltip-icon {
    padding-left: 5px; }
/*css!/common/withme/js/widget/shop/ShopActionBar.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.shop-action-bar {
  display: flex;
  align-items: center;
  font-size: 24px;
  margin-top: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .shop-action-bar .credits {
    display: flex;
    font-size: 18px;
    letter-spacing: 0;
    color: #deb359;
    cursor: default; }
    .shop-action-bar .credits.hidden {
      display: none; }
  .shop-action-bar .owned-label, .shop-action-bar .displayonly-label {
    font-size: 12px;
    color: #a8a8a8;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }
  .shop-action-bar .price-info {
    flex-grow: 1; }
  .shop-action-bar .icons {
    display: flex;
    align-items: center; }
    .shop-action-bar .icons svg {
      transition: opacity 0.15s;
      cursor: pointer;
      color: #404040;
      margin-left: 20px;
      width: 25px;
      height: 25px; }
      .shop-action-bar .icons svg:hover {
        opacity: 0.75; }
      .shop-action-bar .icons svg:active {
        opacity: 0.5625; }
    .shop-action-bar .icons .share .social-share {
      display: flex; }
      .shop-action-bar .icons .share .social-share button {
        padding-left: 0;
        padding-right: 0;
        min-height: 25px;
        height: 25px; }
  .shop-action-bar.is-owned .wishlist-action-icon,
  .shop-action-bar.in-wishlist .add-to-wishlist,
  .shop-action-bar:not(.in-wishlist) .remove-from-wishlist {
    display: none; }
/*css!/common/withme/js/dialog/gifting/GiftingRecipientPicker.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.mobile .gifting-recipient-picker .dialog-body {
  padding: 15px; }

.mobile [data-ui-role="modal-dialog"].gifting-recipient-picker.userpicker-dialog .dialog-footer {
  height: auto;
  padding: 0; }
/*css!/common/withme/js/dialog/roomDetailLightbox/RoomDetailLightbox.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.lightbox-dialog.room-detail-lightbox .lightbox {
  height: 100%; }

.lightbox-dialog.room-detail-lightbox .dialog-container .dialog-body .lightbox .main-container {
  position: relative;
  min-width: 100%;
  width: 100%; }
  .lightbox-dialog.room-detail-lightbox .dialog-container .dialog-body .lightbox .main-container .room-detail-widget {
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translate(0);
    width: 100%;
    height: 100%;
    padding: 0; }

.lightbox-dialog.room-detail-lightbox .dialog-container .dialog-body .lightbox .lightbox-sidebar {
  display: none; }

.lightbox-dialog.room-detail-lightbox .dialog-container .dialog-body .lightbox .mobile-overlay {
  display: none; }

.desktop [data-ui-role="modal-dialog"].lightbox-dialog.room-detail-lightbox .dialog-container .dialog-body .lightbox .main-container .room-detail-widget {
  position: static; }

.desktop [data-ui-role="modal-dialog"].lightbox-dialog.room-detail-lightbox .panels {
  display: grid;
  grid: 1fr/minmax(555px, calc(100vh - 100px)) 345px; }

.mobile .lightbox-dialog.room-detail-lightbox .dialog-container .dialog-body .lightbox .main-container {
  overflow-y: scroll; }

.mobile .lightbox-dialog.room-detail-lightbox .dialog-container .dialog-body .lightbox .panels .right-panel {
  max-width: 100%;
  width: 100%; }
/*css!/common/withme/js/widget/roomDetailWidget/RoomDetailWidget.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.room-detail-widget {
  pointer-events: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: flex-start;
  align-items: stretch; }
  .room-detail-widget .panels {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: stretch; }
    .room-detail-widget .panels .left-panel {
      flex: 1 0;
      background: #000; }
      .room-detail-widget .panels .left-panel .left-panel-text {
        z-index: 1;
        width: 100%;
        height: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center; }
        .room-detail-widget .panels .left-panel .left-panel-text .adjustable {
          flex: 0 1 auto;
          padding: 15px;
          font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
          font-weight: 500;
          font-style: normal;
          line-height: 20px;
          font-size: 15px; }
    .room-detail-widget .panels .right-panel {
      flex: 0 0 345px;
      width: 345px;
      padding: 0;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-content: flex-start;
      align-items: stretch; }
      .room-detail-widget .panels .right-panel .headpiece {
        flex: 0 0 150px;
        padding-top: 15px;
        padding-right: 15px;
        padding-left: 15px;
        background: #fff; }
      .room-detail-widget .panels .right-panel .main-column {
        flex: 1 1 auto;
        overflow: hidden;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch; }
    .room-detail-widget .panels .mobile-char-bar {
      display: none; }

.mobile .room-detail-widget {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: flex-start;
  align-items: stretch; }
  .mobile .room-detail-widget .panels {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: stretch;
    position: relative; }
    .mobile .room-detail-widget .panels .left-panel {
      background: #000;
      z-index: -1;
      position: fixed;
      height: 330px;
      width: 100%;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-content: flex-start;
      align-items: stretch; }
      .mobile .room-detail-widget .panels .left-panel .left-panel-image-div {
        flex: 1 0 auto;
        background-size: cover; }
      .mobile .room-detail-widget .panels .left-panel .headpiece {
        z-index: 2;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding-top: 15px;
        padding-right: 15px;
        padding-left: 15px;
        background-color: transparent; }
    .mobile .room-detail-widget .panels .right-panel {
      position: absolute;
      margin-top: 330px;
      overflow-y: auto; }
/*css!/common/withme/js/widget/roomDetailWidgetHeadpiece/RoomDetailWidgetHeadpiece.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.room-detail-widget-headpiece .detail-status-icons {
  pointer-events: none;
  margin-left: 5px; }
  .room-detail-widget-headpiece .detail-status-icons li {
    margin: 0 0 5px 0; }

.room-detail-widget-headpiece .first-row {
  display: grid;
  grid: 80px/ 80px 1fr;
  grid-gap: 15px; }
  .room-detail-widget-headpiece .first-row .image-div {
    overflow: hidden;
    border: #fff solid 1px;
    position: relative; }
    .room-detail-widget-headpiece .first-row .image-div img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .room-detail-widget-headpiece .first-row .name-container {
    display: grid;
    grid: min-content min-content/ 1fr 0;
    grid-template-areas: "name status-icons" "audience-counter-wrapper status-icons"; }
  .room-detail-widget-headpiece .first-row.has-badges .name-container {
    grid: min-content min-content/ 1fr 30px;
    grid-template-areas: "name status-icons" "audience-counter-wrapper status-icons"; }
  .room-detail-widget-headpiece .first-row .name {
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 18px;
    line-height: 28px;
    color: #404040;
    max-height: 100%;
    grid-area: name; }
  .room-detail-widget-headpiece .first-row .detail-status-icons {
    grid-area: status-icons; }
  .room-detail-widget-headpiece .first-row .audience-counter-wrapper {
    grid-area: audience-counter-wrapper; }

.room-detail-widget-headpiece .second-row {
  margin-top: 15px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start; }
  .room-detail-widget-headpiece .second-row .left-side {
    flex-grow: 1;
    flex-shrink: 1;
    align-self: flex-start;
    z-index: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start; }
    .room-detail-widget-headpiece .second-row .left-side .icon {
      width: 25px;
      height: 25px;
      flex-grow: 0;
      flex-shrink: 0;
      align-self: flex-start;
      color: #404040;
      margin-right: 15px;
      position: relative; }
      .room-detail-widget-headpiece .second-row .left-side .icon:hover {
        cursor: pointer; }
      .room-detail-widget-headpiece .second-row .left-side .icon svg {
        fill: currentColor;
        width: 100%;
        height: 100%; }
    .room-detail-widget-headpiece .second-row .left-side .share .social-share {
      height: 25px;
      width: 25px; }
      .room-detail-widget-headpiece .second-row .left-side .share .social-share button {
        padding-left: 0;
        padding-right: 0;
        min-height: 25px;
        height: 25px;
        max-height: 25px;
        min-width: 25px;
        width: 25px;
        max-width: 25px; }
        .room-detail-widget-headpiece .second-row .left-side .share .social-share button svg {
          margin: 0; }
  .room-detail-widget-headpiece .second-row .right-side {
    flex-grow: 0;
    flex-shrink: 0;
    align-self: flex-start;
    position: relative;
    z-index: 0; }

.room-detail-widget-headpiece .settings {
  flex-grow: 1;
  text-align: right;
  width: 25px;
  height: 25px;
  color: #404040; }
  .room-detail-widget-headpiece .settings svg {
    width: 25px;
    height: 25px; }
  .room-detail-widget-headpiece .settings .icon-settings:hover {
    cursor: pointer;
    opacity: 0.7; }

.room-detail-widget-headpiece .action-buttons {
  display: flex;
  padding-bottom: 15px; }
  .room-detail-widget-headpiece .action-buttons .btn:not(.hidden) + .btn:not(.hidden) {
    margin-left: 10px; }

html[dir="rtl"]
.room-detail-widget-headpiece .detail-status-icons {
  margin-left: auto;
  margin-right: 5px; }

html[dir="rtl"]
.room-detail-widget-headpiece .settings {
  text-align: left; }

html[dir="rtl"]
.room-detail-widget-headpiece .action-buttons .btn:not(.hidden) + .btn:not(.hidden) {
  margin-left: auto;
  margin-right: 10px; }
/*css!/common/withme/js/dialog/editRoomSettings/EditRoomSettings.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.edit-room-settings {
  height: 640px; }
  .edit-room-settings .dialog-container {
    padding: 0;
    /* styles for the old edit room settings dialog, REMOVE once Host Subs is live. canSeeHostSubscriptions */
    /* end old edit room settings dialog */ }
    .edit-room-settings .dialog-container .dialog-header h3.dialog-title {
      font-size: 12px;
      height: 50px;
      line-height: 50px;
      background-color: #fff; }
    .edit-room-settings .dialog-container .dialog-body {
      margin-top: 70px;
      position: relative; }
      .edit-room-settings .dialog-container .dialog-body::after {
        content: '';
        display: block;
        position: absolute;
        top: -3px;
        left: 1px;
        right: 1px;
        height: 3px;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
        pointer-events: none;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0; }
      .edit-room-settings .dialog-container .dialog-body.scrolled-down::after {
        opacity: 1; }
    .edit-room-settings .dialog-container .room-is-loading::after,
    .edit-room-settings .dialog-container .moderators-are-loading::after {
      animation: ball-scale 1s 0s ease-in-out infinite;
      animation-fill-mode: both;
      content: '';
      display: block;
      background: #deb359;
      border-radius: 100%;
      height: 60px;
      width: 60px;
      position: absolute;
      top: 50%;
      left: 50%; }
    .edit-room-settings .dialog-container .room-moderator-list-placeholder {
      position: relative;
      height: 60px; }
    .edit-room-settings .dialog-container .tabbed-panel {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
      overflow-y: auto; }
      .edit-room-settings .dialog-container .tabbed-panel p.room-privacy-description {
        margin: 10px 15px 0px 17px; }
      .edit-room-settings .dialog-container .tabbed-panel label.room-config-settings {
        background-color: #fff;
        height: 30px;
        padding: 10px;
        line-height: 1em;
        margin: 0 10px 10px 10px; }
      .edit-room-settings .dialog-container .tabbed-panel input {
        font-size: 12px; }
      .edit-room-settings .dialog-container .tabbed-panel .live-room-desc {
        margin: 0 10px 10px 0px;
        line-height: 133%; }
      .edit-room-settings .dialog-container .tabbed-panel textarea {
        padding: 10px; }
      .edit-room-settings .dialog-container .tabbed-panel .toggle-switch[type=checkbox] + label::before {
        margin: 6px 0 6px -10px; }
      .edit-room-settings .dialog-container .tabbed-panel .toggle-switch[type=checkbox] + label::after {
        margin: 6px 0 6px -10px; }
      .edit-room-settings .dialog-container .tabbed-panel .toggle-switch[type=checkbox]:checked + label::before {
        margin: 6px 0 6px -10px; }
      .edit-room-settings .dialog-container .tabbed-panel .toggle-switch[type=checkbox]:checked + label::after {
        margin: 6px 0 6px -10px; }
    .edit-room-settings .dialog-container .tabbed-panel.old-tabs {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
      overflow-y: auto;
      display: grid;
      grid: "private public" min-content "content content" / 1fr 1fr;
      grid-gap: 15px 0; }
    .edit-room-settings .dialog-container .tab-input:not(:checked) + .tab {
      background: rgba(255, 255, 255, 0.5);
      color: rgba(0, 0, 0, 0.25); }
      .edit-room-settings .dialog-container .tab-input:not(:checked) + .tab + .tab-content {
        display: none; }
    .edit-room-settings .dialog-container .tab {
      display: grid;
      place-content: center; }
    .edit-room-settings .dialog-container .private-tab {
      grid-area: private; }
    .edit-room-settings .dialog-container .public-tab {
      grid-area: public; }
    .edit-room-settings .dialog-container .tab-content {
      grid-area: content;
      font-size: 12px; }
    .edit-room-settings .dialog-container .tab-input {
      opacity: 0;
      position: absolute;
      pointer-events: none; }
    .edit-room-settings .dialog-container .system-info-header {
      display: block;
      margin: 0 0 10px; }
    .edit-room-settings .dialog-container .titled-section {
      margin: 10px 15px; }
    .edit-room-settings .dialog-container .titled-section-room-name .titled-section-inset {
      display: grid;
      grid: 70px / 70px 1fr;
      grid-gap: 0 10px;
      align-items: center; }
    .edit-room-settings .dialog-container .titled-section-room-name img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .edit-room-settings .dialog-container .room-thumbnail {
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .edit-room-settings .dialog-container .room-name {
      height: 75px;
      overflow-y: auto; }
    .edit-room-settings .dialog-container .room-description {
      height: 75px;
      overflow-y: auto;
      padding: 10px 0; }
    .edit-room-settings .dialog-container .titled-section-access-controls .toggle-switch + label {
      margin: 0 0 10px; }
    .edit-room-settings .dialog-container .choose-moderators {
      margin: 0 0 10px; }
    .edit-room-settings .dialog-container .dialog-footer {
      background-color: rgba(255, 255, 255, 0.9);
      padding: 15px; }
      .edit-room-settings .dialog-container .dialog-footer .btn-primary:not([disabled]) {
        background-color: #404040; }

.mobile .edit-room-settings .dialog-footer {
  padding: 0; }

.mobile .edit-room-settings .dialog-container .tabbed-panel {
  bottom: 40px; }
/*css!/common/withme/js/dialog/roomDetailLightbox/RoomAdminsListItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.room-admins-list-item {
  background-color: #fff;
  padding: 0 15px; }
  .room-admins-list-item .user-info {
    padding: 5px 0;
    border-bottom: 1px solid #d4d4d4; }
/*css!/common/withme/js/dialog/chatRoomSlotUpsell/ChatRoomSlotUpsellDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.chat-room-slot-upsell-dialog {
  width: 100%; }
  .chat-room-slot-upsell-dialog .scroll-zone {
    display: flex;
    display: -webkit-flexbox;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
    background: #e5e5e5; }
    .chat-room-slot-upsell-dialog .scroll-zone .header-wrapper {
      order: 1;
      flex-shrink: 0;
      flex-grow: 0;
      flex-basis: 159px;
      padding: 15px;
      background: #fff;
      margin: 10px 15px 20px 15px;
      display: flex;
      display: -webkit-flexbox;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: stretch;
      align-content: flex-start; }
      .chat-room-slot-upsell-dialog .scroll-zone .header-wrapper .header-image {
        order: 1;
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: 44px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        align-content: center; }
        .chat-room-slot-upsell-dialog .scroll-zone .header-wrapper .header-image svg {
          width: 44px;
          height: 44px; }
      .chat-room-slot-upsell-dialog .scroll-zone .header-wrapper .header-title {
        order: 2;
        flex-shrink: 0;
        flex-grow: 0;
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 12px;
        line-height: 133%;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: #404040;
        text-align: center;
        margin-top: 13px;
        margin-bottom: 10px; }
      .chat-room-slot-upsell-dialog .scroll-zone .header-wrapper .header-description {
        order: 3;
        flex-shrink: 0;
        flex-grow: 0;
        font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: normal;
        font-style: normal;
        font-size: 12px;
        line-height: 133%;
        color: #404040;
        text-align: center; }
    .chat-room-slot-upsell-dialog .scroll-zone .chat-room-products {
      order: 2;
      flex-shrink: 1;
      flex-grow: 0; }
      .chat-room-slot-upsell-dialog .scroll-zone .chat-room-products .icon-profile_current_room {
        color: #404040; }
    .chat-room-slot-upsell-dialog .scroll-zone .vip-products {
      order: 3;
      flex-shrink: 1;
      flex-grow: 0;
      z-index: 0; }
    .chat-room-slot-upsell-dialog .scroll-zone .host-subscription-products {
      order: 4;
      flex-shrink: 1;
      flex-grow: 0;
      z-index: 0; }
      .chat-room-slot-upsell-dialog .scroll-zone .host-subscription-products .multi-product-item:nth-child(3n) {
        margin-right: 0; }
    .chat-room-slot-upsell-dialog .scroll-zone .multi-product-list {
      padding: 0 15px 15px 15px; }
      .chat-room-slot-upsell-dialog .scroll-zone .multi-product-list .multi-product-item {
        width: 140px; }
        .chat-room-slot-upsell-dialog .scroll-zone .multi-product-list .multi-product-item:first-of-type {
          margin-right: 10px; }
        .chat-room-slot-upsell-dialog .scroll-zone .multi-product-list .multi-product-item .wrapper.upsell {
          width: 140px; }
          .chat-room-slot-upsell-dialog .scroll-zone .multi-product-list .multi-product-item .wrapper.upsell .item-info {
            width: 140px; }
            .chat-room-slot-upsell-dialog .scroll-zone .multi-product-list .multi-product-item .wrapper.upsell .item-info .image-container {
              padding-left: 28px;
              padding-right: 28px; }
  .chat-room-slot-upsell-dialog .dialog-footer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
    background-color: #fff;
    padding: 15px; }

.mobile .chat-room-slot-upsell-dialog {
  background-color: #a8a8a8; }
  .mobile .chat-room-slot-upsell-dialog .scroll-zone .multi-product-list .multi-product-item {
    width: 100%; }
    .mobile .chat-room-slot-upsell-dialog .scroll-zone .multi-product-list .multi-product-item .wrapper {
      width: 100%; }
  .mobile .chat-room-slot-upsell-dialog .scroll-zone .chat-room-products .is-selected .icon-profile_current_room {
    color: #fff; }
  .mobile .chat-room-slot-upsell-dialog .dialog-x {
    font-size: 12px; }
  .mobile .chat-room-slot-upsell-dialog .dialog-header {
    background-color: #fff;
    height: 50px; }
    .mobile .chat-room-slot-upsell-dialog .dialog-header h3.dialog-title {
      font-size: 12px; }
  .mobile .chat-room-slot-upsell-dialog .dialog-body .header-wrapper {
    margin: 10px 15px; }
  .mobile .chat-room-slot-upsell-dialog .dialog-body .chat-room-slot-list .list .chat-room-slot-list-item {
    flex-basis: 70px; }
  .mobile .chat-room-slot-upsell-dialog .dialog-footer {
    padding: 0; }
/*css!/common/withme/js/dialog/roomModeratorDialog/RoomModeratorDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.room-moderator-dialog {
  height: 560px; }
  .room-moderator-dialog .room-moderator-dialog-content {
    display: grid;
    grid: 1fr min-content / auto; }
  .room-moderator-dialog .dialog-container .dialog-body {
    padding-bottom: 50px; }
  .room-moderator-dialog .dialog-container .dialog-footer .btn-primary:not([disabled]) {
    background-color: #404040; }
/*css!/common/withme/js/dialog/addRoomDialog/AddRoomDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
[data-ui-role="modal-dialog"].add-room-dialog {
  width: 100%; }
  [data-ui-role="modal-dialog"].add-room-dialog .dialog-body {
    margin-top: 50px; }
  [data-ui-role="modal-dialog"].add-room-dialog .container {
    width: 100%;
    height: 100%;
    overflow: scroll;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    line-height: normal; }
    [data-ui-role="modal-dialog"].add-room-dialog .container .sub-header {
      order: 1;
      flex: 1 1 100%;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: stretch;
      text-align: center; }
      [data-ui-role="modal-dialog"].add-room-dialog .container .sub-header .inner {
        padding: 20px 25px 25px;
        background: #fff; }
      [data-ui-role="modal-dialog"].add-room-dialog .container .sub-header .text-title {
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal;
        text-transform: uppercase;
        margin-bottom: 10px;
        line-height: inherit;
        letter-spacing: .67px;
        font-size: 12px; }
      [data-ui-role="modal-dialog"].add-room-dialog .container .sub-header .icon svg {
        fill: #deb359;
        width: 50px;
        margin-bottom: 20px; }
    [data-ui-role="modal-dialog"].add-room-dialog .container .payment-methods {
      order: 2;
      display: none; }
    [data-ui-role="modal-dialog"].add-room-dialog .container .outers {
      width: 100%;
      padding: 15px 15px 0 15px; }
    [data-ui-role="modal-dialog"].add-room-dialog .container .prompt:hover {
      opacity: .75; }
    [data-ui-role="modal-dialog"].add-room-dialog .container .prompt .inner {
      padding: 25px 15px;
      background: #fff;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: stretch;
      flex: 1 1 100%; }
      [data-ui-role="modal-dialog"].add-room-dialog .container .prompt .inner.selected {
        background-color: #404040;
        color: #fff; }
      [data-ui-role="modal-dialog"].add-room-dialog .container .prompt .inner .icon {
        order: 1;
        flex: 0 0 40px;
        padding-right: 15px;
        display: flex;
        align-items: center; }
        [data-ui-role="modal-dialog"].add-room-dialog .container .prompt .inner .icon svg {
          width: 40px;
          fill: #deb359; }
      [data-ui-role="modal-dialog"].add-room-dialog .container .prompt .inner .text-container {
        order: 2;
        flex: 1 1;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center; }
        [data-ui-role="modal-dialog"].add-room-dialog .container .prompt .inner .text-container .line-container {
          display: flex;
          flex-direction: column;
          flex: 1 1; }
        [data-ui-role="modal-dialog"].add-room-dialog .container .prompt .inner .text-container .line-title {
          font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
          font-weight: 500;
          font-style: normal;
          font-size: 15px;
          flex: 1 1;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: flex-start;
          padding-bottom: 5px;
          text-transform: capitalize; }
          [data-ui-role="modal-dialog"].add-room-dialog .container .prompt .inner .text-container .line-title span {
            background: #ff374d;
            color: #fff;
            padding: 4px;
            margin-left: 5px;
            font-size: 10px; }
        [data-ui-role="modal-dialog"].add-room-dialog .container .prompt .inner .text-container .line-second {
          flex: 1 1;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: flex-start; }
        [data-ui-role="modal-dialog"].add-room-dialog .container .prompt .inner .text-container .line-points {
          margin-left: 16px;
          line-height: 1.7em;
          margin-top: 10px;
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          flex-direction: row;
          align-items: flex-start; }
          [data-ui-role="modal-dialog"].add-room-dialog .container .prompt .inner .text-container .line-points .point-common {
            list-style-type: disc;
            width: 100%; }
      [data-ui-role="modal-dialog"].add-room-dialog .container .prompt .inner .price-container {
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal;
        order: 3;
        flex: 0 1;
        padding-left: 15px;
        display: inline-flex;
        align-items: center;
        text-align: right; }
        [data-ui-role="modal-dialog"].add-room-dialog .container .prompt .inner .price-container .text-price {
          font-size: 14px; }
          [data-ui-role="modal-dialog"].add-room-dialog .container .prompt .inner .price-container .text-price .original-price {
            text-decoration: line-through; }
          [data-ui-role="modal-dialog"].add-room-dialog .container .prompt .inner .price-container .text-price span {
            color: #ff374d; }
    [data-ui-role="modal-dialog"].add-room-dialog .container .add-public-room-prompt {
      order: 3; }
    [data-ui-role="modal-dialog"].add-room-dialog .container .add-shared-room-prompt {
      order: 4; }
    [data-ui-role="modal-dialog"].add-room-dialog .container .add-marriage-package-prompt {
      order: 5;
      padding-bottom: 15px; }
    [data-ui-role="modal-dialog"].add-room-dialog .container .vip-upgrades {
      order: 6;
      flex: 1 1 100%;
      padding-top: 22px; }
      [data-ui-role="modal-dialog"].add-room-dialog .container .vip-upgrades .system-info-header {
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 10px;
        color: #a8a8a8;
        text-transform: uppercase;
        letter-spacing: 1px;
        line-height: 16px;
        border-bottom: solid 1px #d4d4d4;
        width: 100%;
        padding: 3px 0; }
      [data-ui-role="modal-dialog"].add-room-dialog .container .vip-upgrades .account-products-widget .upgrade-container {
        margin-top: 0; }
      [data-ui-role="modal-dialog"].add-room-dialog .container .vip-upgrades .account-products-widget .vip-container {
        margin-top: 10px; }
        [data-ui-role="modal-dialog"].add-room-dialog .container .vip-upgrades .account-products-widget .vip-container .payment-product-list .system-info-header {
          display: none; }
        [data-ui-role="modal-dialog"].add-room-dialog .container .vip-upgrades .account-products-widget .vip-container .payment-product-list .item-info {
          border: 1px solid #fff;
          border-bottom: 0; }
        [data-ui-role="modal-dialog"].add-room-dialog .container .vip-upgrades .account-products-widget .vip-container .payment-product-list .selected .item-info {
          border: 1px solid #404040;
          border-bottom: 0; }
        [data-ui-role="modal-dialog"].add-room-dialog .container .vip-upgrades .account-products-widget .vip-container .payment-product-list .selected .item-price {
          background: #404040;
          color: #fff; }

.dialog-footer .inner {
  font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: normal;
  font-style: normal;
  cursor: pointer;
  background: #d4d4d4;
  flex: 1 1 40px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase; }
  .dialog-footer .inner.selection-made {
    background: #deb359; }

@media screen and (max-width: 469px) {
  #imvu .contextual-dialogs .transparent-overlay,
  #imvu .contextual-dialogs .transparent-overlay .dialog-type-B,
  #imvu .contextual-dialogs .transparent-overlay .dialog-type-B .dialog-container {
    height: 100%; }
  [data-ui-role="modal-dialog"].add-room-dialog .container .outers {
    margin: 0 auto;
    width: 340px; } }

@media screen and (max-width: 380px) {
  [data-ui-role="modal-dialog"].add-room-dialog .container .outers {
    margin: 0 auto;
    width: 320px; } }

@media screen and (min-width: 470px) {
  body.mobile #imvu .contextual-dialogs .transparent-overlay .dialog-type-B .dialog-container .dialog-body {
    padding-bottom: 0; }
  [data-ui-role="modal-dialog"].add-room-dialog .container .sub-header .text-title {
    padding: 0 45px; } }
/*css!/common/withme/js/mode/store/new_order/AccountProductsWidget.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.account-products-widget .upgrade-container, .account-products-widget .vip-container {
  margin-top: 15px; }
/*css!/common/withme/js/mode/store/new_order/NoProductsAvailable.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.no-products-available {
  margin-bottom: 10px; }
  .no-products-available div {
    margin-top: 10px; }
/*css!/common/withme/js/mode/store/MoreItems.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.store-more-items .system-info-header {
  margin-bottom: 10px; }

.store-more-items .more-upgrades {
  font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: normal;
  font-style: normal;
  background: #fff;
  height: 60px;
  line-height: 60px;
  color: #404040;
  text-align: center; }
  .store-more-items .more-upgrades .go-to-original-store {
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }

@media screen and (max-width: 550px) {
  .mode[data-layout=c3] .submode.submode-store .store-more-items,
  .mode[data-layout=c3] .submode.submode-payment-methods .store-more-items {
    margin-bottom: 50px; }
    .mode[data-layout=c3] .submode.submode-store .store-more-items .system-info-header,
    .mode[data-layout=c3] .submode.submode-payment-methods .store-more-items .system-info-header {
      margin-top: 15px; }
    .mode[data-layout=c3] .submode.submode-store .store-more-items .more-upgrades,
    .mode[data-layout=c3] .submode.submode-payment-methods .store-more-items .more-upgrades {
      padding: 15px 25px;
      line-height: 1.4; } }

@media screen and (max-width: 320px) {
  .mode[data-layout=c3] .submode.submode-store .store-more-items .more-upgrades,
  .mode[data-layout=c3] .submode.submode-payment-methods .store-more-items .more-upgrades {
    padding: 15px 25px; } }
/*css!/common/waf/js/widget/buyCreditList/new_order/PaymentProductList.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.payment-product-list .system-info-header {
  margin-bottom: 10px; }
/*css!/common/waf/js/widget/buyCreditList/new_order/PaymentProductItem.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.payment-product-item {
  position: relative;
  background: #fff; }
  .payment-product-item .item-info {
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #a8a8a8;
    text-transform: uppercase; }
  .payment-product-item .item-price {
    color: #deb359;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }
    .payment-product-item .item-price span.original-price {
      text-decoration: line-through; }
    .payment-product-item .item-price .title {
      text-transform: uppercase; }

.payment-product-item.column-view {
  padding: 0 15px; }
  .payment-product-item.column-view:hover {
    cursor: pointer; }
  .payment-product-item.column-view .wrapper {
    height: 70px;
    display: flex;
    border-bottom: solid 1px #f2f2f2; }
    .payment-product-item.column-view .wrapper .item-info {
      line-height: 70px;
      width: 70px;
      text-align: center; }
      .payment-product-item.column-view .wrapper .item-info .image-container {
        width: 50px;
        height: 100%;
        padding: 10px 0; }
        .payment-product-item.column-view .wrapper .item-info .image-container img {
          width: 50px; }
    .payment-product-item.column-view .wrapper .item-price {
      color: #404040;
      padding-top: 20px; }
      .payment-product-item.column-view .wrapper .item-price .has-discount.prices {
        color: #ff374d; }
      .payment-product-item.column-view .wrapper .item-price .title {
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal; }
      .payment-product-item.column-view .wrapper .item-price span.original-price {
        color: #404040; }
    .payment-product-item.column-view .wrapper .promo-banner {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      position: absolute;
      right: 20px;
      top: 25px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      color: #fff;
      font-size: 10px; }
      .payment-product-item.column-view .wrapper .promo-banner.sale {
        width: 50px;
        background: #ff374d; }
      .payment-product-item.column-view .wrapper .promo-banner.best-value, .payment-product-item.column-view .wrapper .promo-banner.most-popular {
        width: 100px;
        background: #404040; }
  .payment-product-item.column-view.selected-item {
    background: #404040; }
    .payment-product-item.column-view.selected-item .item-price {
      color: #fff; }
      .payment-product-item.column-view.selected-item .item-price .has-discount.prices {
        color: #ff374d; }
      .payment-product-item.column-view.selected-item .item-price span.original-price {
        color: #fff; }
    .payment-product-item.column-view.selected-item .wrapper {
      border: 0; }

.dialog-body .payment-product-item.row-view {
  width: 140px;
  height: 180px; }
  .dialog-body .payment-product-item.row-view .item-info {
    height: 140px; }
    .dialog-body .payment-product-item.row-view .item-info .image-container {
      height: 104px;
      display: flex;
      margin: auto; }
      .dialog-body .payment-product-item.row-view .item-info .image-container .helper {
        display: none; }
      .dialog-body .payment-product-item.row-view .item-info .image-container img {
        margin: 25px auto auto; }
    .dialog-body .payment-product-item.row-view .item-info .item-title {
      display: flex;
      width: 100%;
      height: 35px;
      margin: auto; }
      .dialog-body .payment-product-item.row-view .item-info .item-title span {
        margin: auto; }
  .dialog-body .payment-product-item.row-view .item-price, .dialog-body .payment-product-item.row-view .item-info {
    width: 100%; }
  .dialog-body .payment-product-item.row-view .check {
    display: none;
    position: absolute;
    bottom: 40px;
    right: 5px;
    font-size: 20px;
    z-index: 1;
    color: #404040; }
    .dialog-body .payment-product-item.row-view .check::before {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    .dialog-body .payment-product-item.row-view .check::before {
      content: ""; }
  .dialog-body .payment-product-item.row-view.selected .check {
    display: block; }

.payment-product-item.row-view {
  margin: 0 10px 10px 0;
  font-size: 12px;
  text-align: center;
  width: 150px;
  height: 190px;
  display: inline-block;
  padding-right: 0; }
  .payment-product-item.row-view:hover {
    cursor: pointer;
    opacity: 0.75; }
  .payment-product-item.row-view:nth-child(3n+1) {
    margin-right: 0; }
  .payment-product-item.row-view .item-info {
    height: 150px;
    width: 150px;
    line-height: 1.4; }
    .payment-product-item.row-view .item-info .image-container {
      height: 115px;
      width: 100%; }
      .payment-product-item.row-view .item-info .image-container .helper {
        display: inline-block;
        vertical-align: middle;
        height: 100%; }
      .payment-product-item.row-view .item-info .image-container img {
        vertical-align: middle;
        width: 80px; }
  .payment-product-item.row-view .item-price {
    background: #deb359;
    color: #fff;
    height: 40px;
    width: 150px;
    line-height: 40px; }
  .payment-product-item.row-view .promo-banner.best-value, .payment-product-item.row-view .promo-banner.most-popular {
    position: absolute;
    top: 10px;
    left: -5px;
    height: 25px;
    width: 120px;
    color: #fff;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 10px;
    padding-left: 10px;
    text-align: left;
    line-height: 25px;
    background: #404040; }
    .payment-product-item.row-view .promo-banner.best-value .triangle, .payment-product-item.row-view .promo-banner.most-popular .triangle {
      position: absolute;
      top: 15px;
      left: 0px;
      z-index: -1;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 5px 10px 0;
      border-color: transparent #0d0d0d transparent transparent; }
  .payment-product-item.row-view .promo-banner.sale {
    position: absolute;
    top: 10px;
    left: -5px;
    height: 25px;
    width: 80px;
    color: #fff;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 10px;
    padding-left: 10px;
    text-align: left;
    line-height: 25px;
    background: #ff374d; }
    .payment-product-item.row-view .promo-banner.sale .triangle {
      position: absolute;
      top: 15px;
      left: 0px;
      z-index: -1;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 5px 10px 0;
      border-color: transparent #d00017 transparent transparent; }

@media screen and (max-width: 550px) {
  .mode[data-layout=c3] .payment-product-list .payment-product-item.row-view {
    margin-right: 0; }
    .mode[data-layout=c3] .payment-product-list .payment-product-item.row-view:nth-child(even) {
      margin-right: 10px; } }

@media screen and (max-width: 469px) {
  .dialog-body .payment-product-item.row-view {
    width: 150px;
    height: 190px; }
    .dialog-body .payment-product-item.row-view:nth-child(3n+1) {
      margin-right: 10px; }
    .dialog-body .payment-product-item.row-view:nth-child(odd) {
      margin-right: 0; }
    .dialog-body .payment-product-item.row-view .item-info {
      height: 152px; } }

@media screen and (max-width: 380px) {
  .payment-credit-list .payment-product-item.column-view.has-promo .item-price {
    padding-top: 7px; }
  .payment-credit-list .payment-product-item.column-view.has-promo .promo-banner {
    left: 90px;
    top: 40px; }
  .dialog-body .payment-product-item.row-view {
    width: 140px; } }

@media screen and (max-width: 320px) {
  .submode-store .payment-product-list .payment-product-item,
  .submode-payment-methods .payment-product-list .payment-product-item {
    width: 140px; }
    .submode-store .payment-product-list .payment-product-item .item-price, .submode-store .payment-product-list .payment-product-item .item-info,
    .submode-payment-methods .payment-product-list .payment-product-item .item-price,
    .submode-payment-methods .payment-product-list .payment-product-item .item-info {
      width: 140px; }
    .submode-store .payment-product-list .payment-product-item .item-info .image-container,
    .submode-payment-methods .payment-product-list .payment-product-item .item-info .image-container {
      padding: 25px 30px 10px; } }
/*css!/common/withme/js/mode/rooms/RoomDetailMixin.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.room-card.card button.more > .icon::before, .room-detail button.more > .icon::before {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.room-card.card button.more > .icon::before, .room-detail button.more > .icon::before {
  content: ""; }

.room-card.card button.favorite > .icon::before, .room-detail button.favorite > .icon::before {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.room-card.card button.favorite > .icon::before, .room-detail button.favorite > .icon::before {
  content: ""; }

.room-card.card button.favorited > .icon::before, .room-detail button.favorited > .icon::before {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.room-card.card button.favorited > .icon::before, .room-detail button.favorited > .icon::before {
  content: ""; }

.room-card.card button.edit > .icon::before, .room-detail button.edit > .icon::before {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.room-card.card button.edit > .icon::before, .room-detail button.edit > .icon::before {
  content: ""; }

.room-card.card section.language > .icon::before, .room-detail section.language > .icon::before {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.room-card.card section.language > .icon::before, .room-detail section.language > .icon::before {
  content: ""; }

.room-card.card section.occupancy > .icon::before, .room-detail section.occupancy > .icon::before {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.room-card.card section.occupancy > .icon::before, .room-detail section.occupancy > .icon::before {
  content: ""; }

.room-card.card div.profile-icon, .room-card.card .user-cover-image, .room-detail div.profile-icon, .room-detail .user-cover-image {
  border-radius: 0;
  background-size: cover;
  background-position: center center; }

.room-card.card .hostbar, .room-detail .hostbar {
  padding: 0 10px; }

.room-card.card section > .icon, .room-detail section > .icon {
  margin-right: 30px;
  font-size: larger;
  color: #a8a8a8; }

.room-card.card section.occupancy > .icon, .room-detail section.occupancy > .icon {
  margin-right: 21px; }

.room-card.card section.description, .room-detail section.description {
  white-space: pre-wrap;
  word-break: break-word; }

.room-card.card .detail-participant-list, .room-detail .detail-participant-list {
  padding: 0; }
  .room-card.card .detail-participant-list .detail-participant-list-item, .room-detail .detail-participant-list .detail-participant-list-item {
    display: inline-block;
    list-style-type: none;
    width: 30px;
    margin: 0 5px 5px 0; }

.room-card.card button.join > .icon::before {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.room-card.card button.join > .icon::before {
  content: ""; }

.card-info-panel section .multiple-users, .card-info-panel section .single-user {
  white-space: pre; }

.card-info-panel section .single-user {
  display: none; }

html[dir="rtl"] .room-card.card section > .icon, html[dir="rtl"] .room-detail section > .icon {
  margin-right: 0;
  margin-left: 30px; }

html[dir="rtl"] .room-card.card section.occupancy > .icon, html[dir="rtl"] .room-detail section.occupancy > .icon {
  margin-right: 0;
  margin-left: 21px; }

html[dir="rtl"] .room-card.card .detail-participant-list .detail-participant-list-item, html[dir="rtl"] .room-detail .detail-participant-list .detail-participant-list-item {
  margin: 0 0 5px 5px; }
/*css!/common/withme/js/widget/ByLineWidget.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.by-line-widget {
  display: flex;
  margin: 10px 0 0 0; }
  .by-line-widget > .by-line-text {
    margin-left: 4px;
    width: calc(100% - 35px);
    display: flex;
    flex-flow: row wrap;
    align-items: center; }
    .by-line-widget > .by-line-text > .by-line-CTA {
      flex-shrink: 0; }
/*css!/common/withme/js/widget/audioIcon/audioIcon.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.audio-icon {
  display: inline-grid;
  grid-template-columns: 16px auto;
  grid-template-rows: 15px;
  border-radius: 12px;
  padding: 5px 4px;
  margin-left: 5px;
  background-color: rgba(0, 0, 0, 0.6);
  align-items: center;
  vertical-align: bottom;
  max-height: 25px;
  overflow: hidden; }
  .audio-icon .icon-wrapper {
    display: flex; }
    .audio-icon .icon-wrapper svg {
      fill: #fff;
      stroke: #fff;
      stroke-width: 10;
      vertical-align: middle; }
      .audio-icon .icon-wrapper svg path {
        fill: #fff;
        stroke: #fff; }
/*css!/common/withme/js/dialog/AudienceListDialog/AudienceListDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.audience-list-dialog .dialog-header {
  border-bottom: solid 1px #eaeaea; }

.audience-list-dialog .dialog-container {
  min-height: 550px; }

.audience-list-dialog .dialog-body .audience-list {
  max-height: 550px;
  overflow-y: scroll; }
  .audience-list-dialog .dialog-body .audience-list .no-results.notation {
    background-color: #fff;
    margin: 10px 15px;
    width: auto; }

.audience-list-dialog .is-list.loading {
  padding-bottom: 0; }
/*css!/common/withme/js/dialog/AudienceListDialog/AudienceListItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.audience-list-item {
  position: relative;
  transition: opacity 0.15s;
  background-color: #fff;
  border-bottom: solid 1px #eaeaea;
  padding: 10px 0; }
  .audience-list-item.loading {
    min-height: 70px; }
  .audience-list-item .user-info {
    display: flex;
    justify-content: space-between;
    padding: 0 10px; }
    .audience-list-item .user-info .dual-name-names {
      padding: 0 0 0 10px; }
    .audience-list-item .user-info .boot-user {
      text-transform: uppercase;
      cursor: pointer; }
/*css!/common/withme/js/widget/roomDetailWidgetColumn/RoomDetailWidgetColumn.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.room-detail-widget-column {
  flex: 1 1;
  background: transparent;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch; }
  .room-detail-widget-column .container {
    flex: 1 1;
    padding: 0 15px;
    background: #f2f2f2;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch; }
    .room-detail-widget-column .container .scroll-row {
      display: none;
      flex: 0 0;
      padding: 30px 0;
      width: 100%; }
      .room-detail-widget-column .container .scroll-row:not(:first-child) {
        border-top: 1px solid #d4d4d4; }
      .room-detail-widget-column .container .scroll-row.loaded {
        display: block; }
      .room-detail-widget-column .container .scroll-row .title-line {
        flex: 0 1 16px;
        padding: 0;
        margin-bottom: 10px;
        text-align: left; }
      .room-detail-widget-column .container .scroll-row.hidden {
        display: none; }
    .room-detail-widget-column .container .hosted-by-panel {
      cursor: default; }
      .room-detail-widget-column .container .hosted-by-panel .dual-name {
        flex: 0 1; }
      .room-detail-widget-column .container .hosted-by-panel .title-line {
        margin-bottom: 0; }
    .room-detail-widget-column .container .language {
      cursor: default; }
      .room-detail-widget-column .container .language .lang-payload {
        flex: 0 1;
        cursor: default;
        color: #404040;
        font-size: 15px;
        line-height: 17px;
        text-align: left;
        text-transform: none;
        letter-spacing: 0px; }
    .room-detail-widget-column .container .occupancy {
      padding-right: 0px;
      cursor: default; }
    .room-detail-widget-column .container .btn-show-audience-list {
      color: #404040;
      margin-top: 20px; }
    .room-detail-widget-column .container .description {
      cursor: default; }
      .room-detail-widget-column .container .description .des-payload {
        flex: 1 1;
        cursor: default;
        color: #404040;
        font-size: 15px;
        line-height: 20px;
        text-align: left;
        text-transform: none;
        letter-spacing: 0px;
        word-wrap: break-word;
        overflow: hidden; }
        .room-detail-widget-column .container .description .des-payload.empty {
          color: #a8a8a8; }
  .room-detail-widget-column:not(.host-loaded) .container .scroll-row {
    display: none; }
  .room-detail-widget-column .hosted-by {
    min-height: 40px; }
  .room-detail-widget-column.has-partner .hosted-by {
    min-height: 80px; }
  .room-detail-widget-column.is-shared .scroll-row:not(.hosted-by-panel) {
    display: none; }
  .room-detail-widget-column .line-up {
    position: relative; }
  .room-detail-widget-column .logged-out-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: stretch; }
    .room-detail-widget-column .logged-out-overlay .prompt-wrapper {
      flex: 1 1;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center; }
      .room-detail-widget-column .logged-out-overlay .prompt-wrapper .prompt {
        flex: 0 1 auto;
        margin-top: 5px;
        margin-bottom: 5px;
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal;
        color: #404040;
        font-size: 12px;
        line-height: 12px;
        text-align: center;
        text-transform: none;
        letter-spacing: 0px; }
    .room-detail-widget-column .logged-out-overlay .login {
      flex: 0 0 30px;
      align-self: center;
      margin: 5px;
      padding: 10px 15px 10px 15px;
      pointer-events: auto;
      background: transparent;
      border: 2px solid #404040;
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      color: #404040;
      font-size: 10px;
      line-height: 10px;
      text-align: center;
      text-transform: uppercase; }
      .room-detail-widget-column .logged-out-overlay .login:hover {
        color: #979797;
        cursor: pointer; }
  .room-detail-widget-column.logged-in .logged-out-overlay {
    display: none; }
  .room-detail-widget-column .room-url-input {
    width: 100%;
    color: #2b2b2b; }
  .room-detail-widget-column .room-url-info {
    display: grid;
    grid: "x"; }
    .room-detail-widget-column .room-url-info [class^="room-url-info-"] {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      grid-area: x;
      opacity: 0;
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      color: #a8a8a8;
      margin: 5px 0 0 0;
      text-align: right; }
    .room-detail-widget-column .room-url-info[data-status="instructions"] .room-url-info-instructions,
    .room-detail-widget-column .room-url-info[data-status="success"] .room-url-info-copy-success,
    .room-detail-widget-column .room-url-info[data-status="fail"] .room-url-info-copy-fail {
      opacity: 1; }
    .room-detail-widget-column .room-url-info .room-url-info-copy-success {
      color: #deb359; }
    .room-detail-widget-column .room-url-info .room-url-info-copy-fail {
      color: #ff374d; }
/*css!/common/waf/js/widget/userText/UserText.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.user-text a {
  text-decoration: underline;
  height: 100%;
  width: 100%; }

.my-user .user-text a,
.feed-item-text .user-text a {
  color: inherit; }
/*css!/common/withme/js/dialog/feedLightbox/FeedText.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.feed-text {
  width: 100%;
  height: 100%;
  max-width: 555px;
  background-color: #f2f2f2;
  position: relative;
  display: flex;
  align-items: center;
  word-wrap: break-word;
  color: #404040;
  font-size: 36px;
  cursor: pointer; }
  .feed-text .message {
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    white-space: normal;
    hyphens: none; }
    .feed-text .message .user-text {
      padding: 50px; }

.mobile .feed-text {
  font-size: 24px; }
  .mobile .feed-text .message .user-text {
    padding: 20px; }
/*css!/common/withme/js/dialog/feedLightbox/FeedLightbox.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.lightbox-dialog.feed-lightbox .chat-bar {
  width: 100%;
  height: 49px;
  position: relative; }
  .lightbox-dialog.feed-lightbox .chat-bar textarea {
    border: none; }
  .lightbox-dialog.feed-lightbox .chat-bar .btn-send {
    padding-right: 0;
    margin-right: -5px; }

.lightbox-dialog.feed-lightbox .feed-action-bar {
  justify-content: flex-end; }
  .lightbox-dialog.feed-lightbox .feed-action-bar .counts-container {
    display: none; }
  .lightbox-dialog.feed-lightbox .feed-action-bar .actions-container {
    justify-content: flex-end; }
  .lightbox-dialog.feed-lightbox .feed-action-bar .action-like-container {
    padding-left: 3px; }
    .lightbox-dialog.feed-lightbox .feed-action-bar .action-like-container .count-likes {
      display: inline-block;
      min-width: 10px; }
  .lightbox-dialog.feed-lightbox .feed-action-bar .action-tag-container,
  .lightbox-dialog.feed-lightbox .feed-action-bar .action-comment-container {
    display: none; }

.lightbox-dialog.feed-lightbox .lightbox-sidebar .sidebar-content .sidebar-panels .panel-container[data-panel="comments"] .scroller::after {
  display: none; }

.lightbox-dialog.feed-lightbox .photo-room-container .photo-room-details {
  margin: 0; }

.lightbox-dialog.feed-lightbox .widgets {
  padding: 15px 15px 0;
  height: auto;
  overflow: hidden; }

.mobile [data-ui-role="modal-dialog"].lightbox-dialog.feed-lightbox .lightbox-siderbar, .mobile [data-ui-role="modal-dialog"].lightbox-dialog.feed-lightbox .mobile-overlay {
  display: block; }

.mobile [data-ui-role="modal-dialog"].lightbox-dialog.feed-lightbox .photo-room-container {
  height: 15px; }

.mobile [data-ui-role="modal-dialog"].lightbox-dialog.feed-lightbox.is-expanded {
  max-width: 100%;
  padding: 0; }
  .mobile [data-ui-role="modal-dialog"].lightbox-dialog.feed-lightbox.is-expanded .dialog-container .dialog-x {
    display: none; }
  .mobile [data-ui-role="modal-dialog"].lightbox-dialog.feed-lightbox.is-expanded .dialog-container .dialog-body {
    overflow: visible; }
    .mobile [data-ui-role="modal-dialog"].lightbox-dialog.feed-lightbox.is-expanded .dialog-container .dialog-body .lightbox-sidebar, .mobile [data-ui-role="modal-dialog"].lightbox-dialog.feed-lightbox.is-expanded .dialog-container .dialog-body .mobile-overlay {
      display: none; }

.mobile [data-ui-role="modal-dialog"].lightbox-dialog.feed-lightbox .chat-bar .btn-send {
  padding-right: 10px;
  padding-left: 0px;
  margin-left: 0px; }
/*css!/common/withme/js/dialog/feedLightbox/LikeList.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.like-list {
  padding: 10px 15px 0; }
  .like-list .more {
    color: #a8a8a8;
    text-transform: capitalize;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    padding-top: 15px;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }
/*css!/common/withme/js/dialog/feedLightbox/LikeListItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.like-list-item {
  display: grid;
  grid: auto / 1fr auto;
  grid-gap: 10px;
  align-items: center;
  padding: 10px 0; }
  .like-list-item:empty {
    display: none; }
  .like-list-item:not(:last-child) {
    border-bottom: 1px solid #eaeaea; }
  .like-list-item.is-me .button-container {
    display: none; }
  .like-list-item .follow-button {
    width: 110px;
    font-size: 12px; }
    .like-list-item .follow-button.following {
      padding-left: 7px; }
/*css!/common/withme/js/dialog/feedLightbox/FeedPhoto.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.feed-photo {
  position: relative;
  cursor: pointer;
  background-color: #404040;
  min-width: 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100; }
  .feed-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 50%;
    opacity: 0; }
  .feed-photo.fade img {
    transition: opacity 0.5s ease; }
  .feed-photo img.loaded {
    opacity: 1; }
  .feed-photo .expanded-photo {
    display: none;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: #000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; }
    .feed-photo .expanded-photo .dialog-x {
      top: 30px;
      left: 30px; }
    .feed-photo .expanded-photo img {
      width: auto;
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%); }

.is-expanded .feed-photo .expanded-photo {
  display: block; }

.mobile [data-ui-role="modal-dialog"].lightbox-dialog.feed-lightbox.is-expanded .dialog-container .feed-photo .expanded-photo .dialog-x {
  display: block; }
/*css!/common/withme/js/widget/counter/Counter.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.counter.is-plural .label-single,
.counter:not(.is-plural) .label-plural {
  display: none; }
/*css!/common/withme/js/widget/photoRoomUsers/PhotoRoomUsers.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.photo-room-container {
  background-color: #fff;
  display: flex;
  align-items: center;
  width: auto; }
  .photo-room-container .photo-room-details {
    display: flex;
    padding-left: 10px;
    line-height: 40px; }
    .photo-room-container .photo-room-details .location {
      display: flex;
      max-width: 235px;
      margin-right: 3px;
      overflow: hidden; }
    .photo-room-container .photo-room-details .room-name {
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%; }
      .photo-room-container .photo-room-details .room-name:hover {
        cursor: pointer; }
    .photo-room-container .photo-room-details svg[class=icon-chat-location] {
      margin-right: 5px; }
    .photo-room-container .photo-room-details .photo-with {
      display: flex; }
      .photo-room-container .photo-room-details .photo-with span:first-child {
        color: #a8a8a8; }
      .photo-room-container .photo-room-details .photo-with .username-placeholder {
        padding: 0 4px;
        overflow: hidden; }
      .photo-room-container .photo-room-details .photo-with .users {
        display: flex; }
      .photo-room-container .photo-room-details .photo-with .with-others {
        font-weight: bold;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis; }
    .photo-room-container .photo-room-details svg[class=icon-chat-location] {
      height: 40px;
      min-width: 10px; }

.feed-headpiece .photo-room-container .photo-room-details {
  line-height: 20px; }

.feed-headpiece .photo-room-container svg[class=icon-chat-location] {
  height: 20px; }
/*css!/common/withme/js/dialog/feedLightbox/FeedHeadpiece.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.standard-headpiece.feed-headpiece {
  background: #fff; }
  .standard-headpiece.feed-headpiece .main-info {
    min-height: 102px;
    height: auto; }
    .standard-headpiece.feed-headpiece .main-info.open {
      height: auto; }
    .standard-headpiece.feed-headpiece .main-info .profile-icon {
      width: 75px;
      height: 75px;
      top: 5px; }
      .standard-headpiece.feed-headpiece .main-info .profile-icon .profile-icon-image {
        width: 75px;
        height: 75px; }
      .standard-headpiece.feed-headpiece .main-info .profile-icon .online-status {
        width: 16px;
        height: 16px;
        border: 2px solid #fff; }
    .standard-headpiece.feed-headpiece .main-info .text .primary-text .username {
      font-size: inherit; }
    .standard-headpiece.feed-headpiece .main-info .text .secondary-text,
    .standard-headpiece.feed-headpiece .main-info .text timestamp.timestamp-widget {
      color: #a8a8a8; }
    .standard-headpiece.feed-headpiece .main-info .text timestamp {
      display: inline;
      position: static; }
    .standard-headpiece.feed-headpiece .main-info .text .photo-room-container {
      display: block; }
      .standard-headpiece.feed-headpiece .main-info .text .photo-room-container .photo-room-details {
        display: block;
        margin: 0 !important; }
        .standard-headpiece.feed-headpiece .main-info .text .photo-room-container .photo-room-details .photo-with .display-name {
          margin-top: -3.5px;
          width: auto; }
        .standard-headpiece.feed-headpiece .main-info .text .photo-room-container .photo-room-details .photo-with span:first-child {
          color: #a8a8a8;
          margin-right: 5px;
          float: left; }
        .standard-headpiece.feed-headpiece .main-info .text .photo-room-container .photo-room-details .photo-with .with-others {
          color: #404040;
          margin-left: 5px;
          overflow: visible !important; }
    .standard-headpiece.feed-headpiece .main-info .text .caption {
      width: 100%;
      overflow: hidden; }
      .standard-headpiece.feed-headpiece .main-info .text .caption.open {
        max-height: 325px; }

@media screen and (max-width: 414px) {
  .photo-room-details .photo-with {
    max-width: auto !important; } }
/*css!/common/withme/js/widget/expandingText/ExpandingText.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.expanding-text {
  display: block;
  position: relative;
  top: 0;
  right: 0;
  margin: 0;
  background-color: #fff;
  max-height: 45px;
  width: 100%;
  height: auto;
  overflow: hidden; }
  .expanding-text a:not(.helip) {
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #404040;
    text-decoration: none; }
  .expanding-text .expanding-text-text {
    max-height: 45px;
    line-height: 15px;
    overflow: hidden;
    color: #404040;
    background-color: #fff;
    opacity: 1;
    white-space: normal;
    word-wrap: break-word; }
  .expanding-text .helip {
    position: absolute;
    right: -1px;
    bottom: 0;
    font-size: 10px;
    height: 15px;
    line-height: 15px;
    cursor: pointer;
    color: #a8a8a8;
    background-color: #fff;
    opacity: 1;
    text-transform: uppercase; }
    .expanding-text .helip:before {
      background-color: #fff;
      content: attr(data-more); }
  .expanding-text.open {
    max-height: 500px; }
    .expanding-text.open .expanding-text-text {
      max-height: 495px; }
    .expanding-text.open .helip:before {
      content: attr(data-less); }
/*css!/common/withme/js/widget/timestamp/FeedItemTimestamp.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
timestamp.timestamp-widget.feed-item-timestamp {
  display: block;
  font-size: 12px;
  text-transform: none;
  white-space: nowrap; }

.mobile timestamp.timestamp-widget.feed-item-timestamp {
  position: absolute;
  top: 0px;
  right: 15px;
  line-height: 37px; }
/*css!/common/withme/js/widget/timestamp/Timestamp.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
timestamp.timestamp-widget {
  display: inline;
  font-size: 10px;
  font-weight: normal;
  color: #a8a8a8;
  direction: ltr; }
/*css!/common/withme/js/dialog/feedLightbox/CommentList.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.comment-list.feed-comments {
  padding: 15px 15px 0; }
  .comment-list.feed-comments .more {
    color: #a8a8a8;
    text-transform: capitalize;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    padding-bottom: 10px;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }

.mobile .comment-list.feed-comments {
  width: 100%; }
  .mobile .comment-list.feed-comments .feed-comments-item .date-divider {
    margin-right: 0; }
/*css!/common/withme/js/widget/feedComments/FeedComments.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.feed-comments {
  padding: 15px;
  margin: 0; }
  .feed-comments.has-more-comments .more-comments {
    display: block; }
  .feed-comments .more-comments {
    border-bottom: solid 1px #d4d4d4;
    display: none;
    text-align: center;
    padding: 10px 0 10px 0; }

.mobile .feed-comments {
  padding: 15px 0;
  width: calc(100% + 60px);
  transition: left 0.15s;
  position: relative;
  left: 0; }
  .mobile .feed-comments .feed-comments-item .date-divider {
    margin-right: 60px; }
  .mobile .feed-comments.show-timestamp {
    left: -60px; }
/*css!/common/withme/js/widget/feedComments/FeedCommentsItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
@keyframes favoriteScale {
  0% {
    transform: scale(1); }
  25% {
    transform: scale(1.3); }
  100% {
    transform: scale(1); } }

@keyframes pulseFull {
  0% {
    transform: scale(0); }
  50% {
    transform: scale(1); }
  100% {
    transform: scale(0); } }

@keyframes disable-screen {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.feed-comments-item {
  position: relative;
  margin: 0 0 10px; }
  .feed-comments-item > .profile-icon {
    position: absolute;
    bottom: 0;
    left: 0; }
  .feed-comments-item > section {
    flex-grow: 1;
    min-width: 0;
    margin-left: 35px; }
    .feed-comments-item > section > header {
      display: flex;
      font-size: 10px;
      white-space: nowrap; }
    .feed-comments-item > section > .comment-message {
      text-align: left;
      position: relative;
      line-height: 16px;
      min-height: 32px;
      min-width: 32px;
      background-color: #fff;
      border-radius: 16px;
      display: inline-block;
      color: #404040;
      word-wrap: break-word;
      word-break: break-word;
      min-height: 32px;
      padding: 8px 10px;
      max-width: 100%;
      z-index: 0;
      cursor: pointer; }
      .feed-comments-item > section > .comment-message::after {
        background-image: linear-gradient(133deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%);
        position: absolute;
        bottom: 0;
        left: 1px;
        content: '';
        width: 16px;
        height: 16px;
        z-index: -1; }

.is-me.feed-comments-item {
  text-align: right; }
  .is-me.feed-comments-item > section > .comment-message {
    color: #fff;
    background-color: #deb359;
    margin-right: 0;
    position: relative;
    line-height: 16px;
    min-height: 32px;
    min-width: 32px;
    background-color: #deb359;
    border-radius: 16px; }
    .is-me.feed-comments-item > section > .comment-message::after {
      background-image: linear-gradient(133deg, transparent 0%, transparent 50%, #deb359 50%, #deb359 100%);
      position: absolute;
      bottom: 0;
      transform: scaleX(-1);
      left: calc(100% - 17px);
      content: '';
      width: 16px;
      height: 16px;
      z-index: -1; }
    .is-me.feed-comments-item > section > .comment-message a {
      color: inherit; }
  .is-me.feed-comments-item > section > header {
    display: block; }
  .is-me.feed-comments-item .display-name {
    display: none; }
  .is-me.feed-comments-item .profile-icon {
    visibility: hidden; }

.mobile .feed-comments-item .comment-message {
  font-size: 15px; }
/*css!/common/waf/js/widget/chatBarMenu/ActionCatalogItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.action-catalog-item {
  position: relative; }
  .action-catalog-item .shields {
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none; }
    .action-catalog-item .shields .requires_friend {
      color: #EEE;
      background-color: rgba(64, 64, 64, 0.9);
      min-height: 25px;
      padding: 0; }

.action-catalog .action-catalog-item {
  width: 60px;
  height: 60px;
  float: left;
  cursor: pointer;
  margin: 5px 8px; }
  .action-catalog .action-catalog-item rect {
    fill: #000; }
  .action-catalog .action-catalog-item.highlighted rect {
    fill: #deb359; }
  .action-catalog .action-catalog-item .title {
    display: none; }

.preview .action-catalog-item {
  margin-top: 18px;
  position: relative; }
  .preview .action-catalog-item svg {
    display: block;
    width: 100px;
    height: 100px;
    background-color: #d4d4d4;
    position: relative;
    left: 50%;
    top: 0;
    margin-left: -50px;
    margin-bottom: 4px; }
  .preview .action-catalog-item .title {
    color: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
    max-width: calc(100% - 30px);
    transition: opacity 0.15s; }
    .preview .action-catalog-item .title:hover {
      opacity: 0.75; }
    .preview .action-catalog-item .title:active {
      opacity: 0.5625; }
    .preview .action-catalog-item .title:hover {
      cursor: pointer; }
    .preview .action-catalog-item .title .name {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal; }
  .preview .action-catalog-item .shields {
    display: none; }
/*css!/common/waf/js/widget/chatBarMenu/ChatBarMenu.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.chat-bar-menu {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 100%;
  z-index: 11;
  outline: none; }
  .chat-bar-menu .catalog-container {
    display: none;
    height: 217px;
    padding: 10px 10px 0 10px;
    max-height: calc(40vh - 40px);
    background-color: rgba(255, 255, 255, 0.95);
    overflow: hidden; }
    .chat-bar-menu .catalog-container::after {
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      position: absolute;
      content: '';
      border-bottom: 1px solid #eaeaea; }
  .chat-bar-menu::after {
    display: none; }
  .chat-bar-menu.showing-catalog .catalog-menu-bar {
    display: flex; }
  .chat-bar-menu.showing-catalog .catalog-container {
    display: block; }
  .chat-bar-menu.showing-catalog.loading::after {
    display: block; }
  .chat-bar-menu .preview {
    display: none;
    width: 100%;
    height: 150px;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden; }
    .chat-bar-menu .preview .cancel {
      color: #fff;
      position: absolute;
      left: 15px;
      top: 15px;
      cursor: pointer;
      font-size: 20px;
      line-height: 100%;
      z-index: 1; }

.mobile .chat-bar-menu {
  position: static;
  bottom: auto; }
  .mobile .chat-bar-menu .preview {
    position: absolute;
    bottom: calc(100%); }

.window-wrapper .chat-bar-menu .catalog-container:after {
  display: none; }
/*css!/common/waf/js/widget/chatBarMenu/ActionCatalog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.action-catalog {
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto; }
  .action-catalog.loading::after {
    top: 50%; }
/*css!/common/withme/js/widget/chatBarMenu/CoopActionMenu.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.chat-bar-menu.coop-action-menu .no-partner-message {
  display: none; }

.chat-bar-menu.coop-action-menu.showing-catalog.preselecting .action-catalog {
  display: none; }

.chat-bar-menu.coop-action-menu.showing-catalog.preselecting::after {
  animation: ball-scale 1s 0s ease-in-out infinite;
  animation-fill-mode: both;
  content: '';
  display: block;
  background: #deb359;
  border-radius: 100%;
  height: 60px;
  width: 60px;
  position: absolute;
  top: 50%;
  left: 50%; }

.chat-bar-menu.coop-action-menu.no-partners .no-partner-message {
  display: flex; }

.chat-bar-menu.coop-action-menu.no-partners .action-catalog {
  display: none; }

.chat-bar-menu.coop-action-menu.no-partners.loading::after {
  display: none; }
/*css!/common/withme/js/widget/chatBarMenu/CoopPartnerMenu.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.context-menu.coop-partner-menu {
  width: 240px; }
  .context-menu.coop-partner-menu .header {
    text-transform: uppercase;
    font-size: 12px;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 1px;
    border-bottom: solid 1px #d4d4d4;
    padding: 10px;
    background: #fff;
    pointer-events: none; }
  .context-menu.coop-partner-menu .error-message {
    display: none;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: rgba(255, 255, 255, 0.95); }
  .context-menu.coop-partner-menu .items {
    max-height: 250px;
    overflow: auto; }
    .context-menu.coop-partner-menu .items.loading {
      height: 50px;
      padding: 0; }
      .context-menu.coop-partner-menu .items.loading ul {
        display: none; }
    .context-menu.coop-partner-menu .items li {
      white-space: nowrap;
      height: 50px;
      overflow: hidden;
      padding: 0;
      position: relative; }
      .context-menu.coop-partner-menu .items li:not(:first-child)::before {
        position: absolute;
        top: 0;
        right: 10px;
        left: 10px;
        content: '';
        height: 1px;
        background: #d4d4d4; }
      .context-menu.coop-partner-menu .items li .dual-name {
        margin: 0 10px; }
      .context-menu.coop-partner-menu .items li.disabled {
        opacity: 0.5;
        pointer-events: none; }
      .context-menu.coop-partner-menu .items li.currently-chosen::after {
        font-family: 'icomoon';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
      .context-menu.coop-partner-menu .items li.currently-chosen::after {
        content: "";
        color: #deb359;
        height: 50px;
        line-height: 50px;
        position: absolute;
        top: 0;
        right: 10px;
        font-size: 10px; }
  .context-menu.coop-partner-menu.error .items {
    display: none; }
  .context-menu.coop-partner-menu.error .error-message {
    display: block; }
/*css!/common/withme/js/widget/chatBar/ExpandingChatBar.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.chat-bar {
  width: 470px;
  position: relative; }
  .chat-bar.disabled {
    pointer-events: none; }
  .chat-bar.hide {
    display: none; }
  .chat-bar .menu-bar {
    display: none;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    height: 30px;
    position: relative;
    text-align: center;
    position: relative; }
    .chat-bar .menu-bar::before {
      background-color: #d4d4d4;
      position: absolute;
      display: block;
      content: '';
      height: 2px;
      bottom: 0px;
      left: 10px;
      right: 10px; }
    .chat-bar .menu-bar.magic-line-menu .magic-line {
      top: 27px;
      border-bottom-width: 2px;
      border-bottom-color: #404040; }
    .chat-bar .menu-bar li {
      cursor: pointer;
      color: #404040;
      text-align: center;
      display: inline-block;
      transition: opacity 0.15s;
      margin: 0 5px;
      padding: 0 10px;
      text-transform: none;
      line-height: 30px; }
      .chat-bar .menu-bar li:hover {
        opacity: 0.75; }
      .chat-bar .menu-bar li:active {
        opacity: 0.5625; }
      .chat-bar .menu-bar li.active {
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal;
        color: #404040; }
  .chat-bar .bar {
    display: flex;
    align-items: flex-end;
    padding: 0 15px;
    background: rgba(255, 255, 255, 0.95);
    width: 100%;
    height: auto;
    min-height: 50px;
    position: relative; }
  .chat-bar .menu-toggle-expanded {
    opacity: 0; }
  .chat-bar .menu-toggle-collapsed {
    opacity: 1; }
  .chat-bar .menu-toggle {
    color: #deb359;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    width: 20px;
    flex-shrink: 0;
    margin-right: 10px;
    text-align: center;
    font-size: 20px;
    margin-bottom: 36px;
    transform: rotate(0deg);
    transition: 0.15s; }
    .chat-bar .menu-toggle.disabled {
      color: #a8a8a8;
      cursor: default; }
      .chat-bar .menu-toggle.disabled:hover {
        opacity: 0.5; }
  .chat-bar .menu-toggle.invisible {
    visibility: hidden; }
  .chat-bar.menu-open .menu-toggle {
    transform: rotate(180deg);
    transition: 0.15s; }
  .chat-bar.menu-open .menu-toggle-expanded {
    opacity: 1; }
  .chat-bar.menu-open .menu-toggle-collapsed {
    opacity: 0; }
  .chat-bar.menu-open .menu-bar {
    display: block; }
  .chat-bar textarea {
    background: none;
    border: none;
    border-bottom: solid 1px #eaeaea;
    border-radius: 0;
    height: 45px;
    flex-grow: 1;
    font-size: 12px;
    margin: 0 0 30px;
    max-height: 50px;
    min-height: 12px;
    overflow: auto;
    padding: 14px 0;
    width: 100%; }
    .chat-bar textarea::-webkit-scrollbar {
      background-color: transparent;
      height: 6px;
      width: 6px; }
    .chat-bar textarea::-webkit-scrollbar-thumb {
      background-color: #666;
      border-radius: 3px; }
    .chat-bar textarea::placeholder {
      color: #a8a8a8; }
    .chat-bar textarea:focus {
      border: none !important;
      border-bottom: solid 1px #eaeaea !important; }
  .chat-bar .whisper-cancel-bar {
    --bg-color: 0, 0, 255;
    background-color: rgba(var(--bg-color), .95);
    font-size: 10px;
    height: 30px;
    line-height: 30px;
    position: relative;
    text-align: center;
    visibility: visible; }
  .chat-bar .whisper-close {
    position: absolute;
    margin-top: 1px;
    height: 12px;
    width: 12px;
    right: 14px;
    top: 2px;
    cursor: pointer; }
  .chat-bar .btn-send {
    flex-shrink: 0;
    width: 60px;
    margin: 0 0 0 10px;
    font-size: 12px;
    margin-bottom: 36px; }
  .chat-bar .btn-send.whisper {
    overflow: visible; }
  .dark-theme .chat-bar .bar {
    background-color: rgba(0, 0, 0, 0.75); }
  .dark-theme .chat-bar textarea {
    transition: color 0.15s, border-bottom 0.15s;
    color: #a8a8a8;
    border-bottom: solid 1px #a8a8a8; }
    .dark-theme .chat-bar textarea:focus {
      color: #fff; }
  .dark-theme .chat-bar .btn {
    background: none; }
  .chat-bar .shiny-tooltip {
    top: 20px; }

.mobile .chat-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%; }
  .mobile .chat-bar .bar {
    padding-right: 0; }
  .mobile .chat-bar textarea {
    margin: 0 0 5px; }
  .mobile .chat-bar .menu-toggle,
  .mobile .chat-bar .btn-send {
    margin-bottom: 12px; }

html[dir="rtl"]
.chat-bar .menu-toggle {
  margin-left: 10px;
  margin-right: 0; }

html[dir="rtl"]
.chat-bar .menu-bar li {
  margin: 0 0 0 5px;
  padding: 0 0 0 10px; }
/*css!/common/withme/js/widget/chatBarMenu/PidProductCatalog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.pid-product-catalog {
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  text-align: left; }
  .pid-product-catalog.loading::after {
    top: 50%; }
/*css!/common/withme/js/widget/chatBarMenu/PidProductCatalogItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.pid-product-catalog-item {
  position: relative; }

.pid-product-catalog .pid-product-catalog-item {
  width: 100%;
  font-size: 0; }
  .pid-product-catalog .pid-product-catalog-item .product-arrow, .pid-product-catalog .pid-product-catalog-item .title {
    display: inline-block;
    height: 30px;
    font-size: 12px; }
  .pid-product-catalog .pid-product-catalog-item .product-arrow {
    width: 30px; }
    .pid-product-catalog .pid-product-catalog-item .product-arrow .arrow {
      height: 0;
      width: 0;
      border-top: 3px solid transparent;
      border-bottom: 3px solid transparent;
      border-left: 8px solid #404040;
      position: relative;
      top: 10px;
      margin: auto; }
  .pid-product-catalog .pid-product-catalog-item .title {
    color: #404040;
    line-height: 30px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .pid-product-catalog .pid-product-catalog-item .shields {
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none; }
  .pid-product-catalog .pid-product-catalog-item .pid-action-catalog {
    margin: 0 0 0 40px;
    font-size: 12px; }
  .pid-product-catalog .pid-product-catalog-item:not(.opened) .pid-action-catalog {
    display: none; }
  .pid-product-catalog .pid-product-catalog-item.opened .product-arrow .arrow {
    height: 0;
    width: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #404040; }
/*css!/common/withme/js/widget/chatBarMenu/PidActionCatalogItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.pid-action-catalog-item {
  position: relative; }

.product-item,
.pid-action-catalog-item {
  cursor: pointer; }

.pid-action-catalog .pid-action-catalog-item {
  width: 100%;
  font-size: 0; }
  .pid-action-catalog .pid-action-catalog-item.highlighted .title {
    color: #deb359; }
/*css!/common/withme/js/widget/shinyTooltip/ShinyTooltip.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
@keyframes shiny-tooltip-cycle-left {
  0% {
    filter: drop-shadow(0 0 0.47em #deb359);
    transform: translateX(0); }
  50% {
    filter: drop-shadow(0 0 1.33em #deb359);
    transform: translateX(-0.5em); }
  100% {
    filter: drop-shadow(0 0 0.47em #deb359);
    transform: translateX(0); } }

@keyframes shiny-tooltip-cycle-right {
  0% {
    filter: drop-shadow(0 0 0.47em #deb359);
    transform: translateX(0); }
  50% {
    filter: drop-shadow(0 0 1.33em #deb359);
    transform: translateX(0.5em); }
  100% {
    filter: drop-shadow(0 0 0.47em #deb359);
    transform: translateX(0); } }

.shiny-tooltip {
  color: #404040;
  font-size: 1.25em;
  line-height: 1.2;
  overflow: hidden;
  padding: 2em 3em;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  transition: visibility 0s ease 0.3s;
  visibility: hidden;
  z-index: 0; }
  .shiny-tooltip__icon {
    display: block;
    fill: #404040;
    flex: 0 0 auto;
    height: 1.2em;
    margin-right: 0.53em;
    width: 1.2em; }
    .shiny-tooltip__icon svg {
      fill: inherit;
      height: 100%;
      width: 100%; }
    .shiny-tooltip__icon:empty {
      display: none; }
  .shiny-tooltip__content {
    transform: translateX(calc(100% + 3em));
    transition: transform 0.3s ease, visibility 0s ease 0.3s;
    visibility: hidden; }
  .shiny-tooltip__shape {
    background-color: #fff;
    align-items: center;
    border-radius: 0.53em;
    display: flex;
    filter: drop-shadow(0 0 0.47em #deb359);
    width: max-content;
    padding: 0.67em;
    position: relative;
    white-space: nowrap; }
    .shiny-tooltip__shape::after {
      background-color: #fff;
      content: '';
      height: 0.8em;
      position: absolute;
      top: 50%;
      width: 0.8em; }
  .shiny-tooltip-parent:hover .shiny-tooltip, .shiny-tooltip.is-active {
    transition: visibility 0.3s ease 0s;
    visibility: visible; }
    .shiny-tooltip-parent:hover .shiny-tooltip .shiny-tooltip__content, .shiny-tooltip.is-active .shiny-tooltip__content {
      transform: translateX(0);
      transition: transform 0.3s ease, visibility 0.3s ease 0s;
      visibility: visible; }
  .shiny-tooltip--left-side {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2em), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2em), transparent 100%);
    right: calc(100% - 2.2em); }
    .shiny-tooltip--left-side .shiny-tooltip__shape {
      animation: shiny-tooltip-cycle-left 1.2s ease infinite; }
      .shiny-tooltip--left-side .shiny-tooltip__shape::after {
        right: 0;
        transform: translate(50%, -50%) rotate(45deg); }
  .shiny-tooltip--right-side {
    -webkit-mask-image: linear-gradient(to left, #000 0, #000 calc(100% - 2em), transparent 100%);
    mask-image: linear-gradient(to left, #000 0, #000 calc(100% - 2em), transparent 100%);
    left: calc(100% - 2.2em); }
    .shiny-tooltip--right-side .shiny-tooltip__shape {
      animation: shiny-tooltip-cycle-right 1.2s ease infinite; }
      .shiny-tooltip--right-side .shiny-tooltip__shape::after {
        left: 0;
        transform: translate(-50%, -50%) rotate(45deg); }
/*css!/common/withme/js/widget/segmentedControl/SegmentedControl.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.segmented-control {
  transform: translateZ(0);
  font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 10px;
  text-align: center;
  text-transform: uppercase; }
  .segmented-control ul {
    display: flex; }
  .segmented-control input {
    display: none; }
  .segmented-control .segmented-control-item {
    flex: 1;
    transition: opacity 0.15s;
    display: block;
    height: 100%;
    border: solid 1px #404040;
    border-right-width: 0;
    height: 25px;
    line-height: 23px;
    white-space: nowrap;
    color: #404040;
    cursor: pointer;
    overflow: hidden; }
    .segmented-control .segmented-control-item:last-child {
      border-right-width: 1px; }
    .segmented-control .segmented-control-item.is-selected {
      background: #404040;
      color: #fff;
      cursor: default; }
      .segmented-control .segmented-control-item.is-selected:hover {
        opacity: 1; }
    .segmented-control .segmented-control-item:hover {
      opacity: 0.75; }
    .segmented-control .segmented-control-item:active {
      opacity: 0.5625; }

.dark-theme .segmented-control .segmented-control-item {
  color: #fff;
  border-color: #fff; }
  .dark-theme .segmented-control .segmented-control-item.is-selected {
    background: #fff;
    color: #404040; }

html[dir="rtl"]
.segmented-control .segmented-control-item {
  border-right-width: 1px;
  border-left-width: 0; }
  html[dir="rtl"]
.segmented-control .segmented-control-item:last-child {
    border-left-width: 1px; }
/*css!/common/withme/js/widget/chatBarMenu/StickerMenu.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.sticker-menu .catalog-container[class] {
  display: block;
  position: relative;
  padding: 0;
  height: 0px;
  margin-bottom: 0px;
  transition: height 250ms; }

.sticker-menu.showing-catalog .catalog-container[class] {
  height: 160px;
  margin-bottom: 30px;
  transition: height 500ms; }

.sticker-menu .sticker-scroll-container {
  overflow: auto;
  overflow-x: hidden;
  height: 100%;
  padding-bottom: 35px; }

.sticker-menu .catalog-menu-list {
  -webkit-overflow-scrolling: touch; }

.sticker-menu .detail-container {
  overflow: auto;
  overflow-x: hidden;
  height: 100%; }

.sticker-menu .catalog-error-content {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 15px 30px;
  cursor: pointer;
  text-align: center;
  color: #a8a8a8;
  line-height: 45px; }
  .sticker-menu .catalog-error-content .title {
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase; }
  .sticker-menu .catalog-error-content .icon {
    color: #deb359;
    font-size: 44px; }
    .sticker-menu .catalog-error-content .icon::before {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    .sticker-menu .catalog-error-content .icon::before {
      content: ""; }

.sticker-menu .catalog {
  margin: 0 10px;
  padding-bottom: 5px; }

.sticker-menu.loading a.recent-stickers {
  display: none; }

.sticker-menu.error .sticker-menu, .sticker-menu.loading .sticker-menu {
  display: none; }

.sticker-menu .catalog-menu-bar {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 34px;
  padding: 0 10px 0 15px;
  background: #fff;
  border-bottom: solid 1px #eaeaea; }
  .sticker-menu .catalog-menu-bar:before {
    border-top: 1px solid #eaeaea;
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    display: block; }
  .sticker-menu .catalog-menu-bar .simple-scroller,
  .sticker-menu .catalog-menu-bar .sticker-pack-list {
    height: 33px; }
  .sticker-menu .catalog-menu-bar .simple-scroller .simple-scroller-left,
  .sticker-menu .catalog-menu-bar .simple-scroller .simple-scroller-right {
    margin-top: 7px; }
  .sticker-menu .catalog-menu-bar a {
    color: #404040;
    min-width: 20px;
    max-width: 20px;
    font-size: 20px;
    line-height: 34px; }
    .sticker-menu .catalog-menu-bar a::before {
      visibility: visible; }
  .sticker-menu .catalog-menu-bar .contextual-dressup {
    display: none; }
  .sticker-menu .catalog-menu-bar .recent-stickers {
    padding: 0 5px;
    display: inline-block;
    width: 30px;
    max-width: 30px;
    min-width: 30px; }
    .sticker-menu .catalog-menu-bar .recent-stickers::before {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    .sticker-menu .catalog-menu-bar .recent-stickers::before {
      content: ""; }
  .sticker-menu .catalog-menu-bar .catalog-menu {
    flex-grow: 1;
    position: relative;
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden; }
  .sticker-menu .catalog-menu-bar .add-catalog {
    font-size: 16px;
    padding-left: 3px;
    margin-left: 5px;
    position: relative; }
    .sticker-menu .catalog-menu-bar .add-catalog::after {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    .sticker-menu .catalog-menu-bar .add-catalog::after {
      content: ""; }
    .sticker-menu .catalog-menu-bar .add-catalog::before {
      display: block;
      content: '';
      border-right: 1px solid #eaeaea;
      position: absolute;
      top: 5px;
      bottom: 3px;
      left: -7px; }
  .sticker-menu .catalog-menu-bar .new-badge {
    position: relative; }
    .sticker-menu .catalog-menu-bar .new-badge::after {
      display: block;
      position: absolute;
      top: 2px;
      left: 9px;
      content: 'N';
      color: #fff;
      background-color: #deb359;
      border-radius: 40px;
      width: 17px;
      height: 17px;
      line-height: 17px;
      text-align: center;
      font-size: 8px;
      letter-spacing: 0; }
  .sticker-menu .catalog-menu-bar .selected {
    border-bottom: solid 2px #deb359; }
    .sticker-menu .catalog-menu-bar .selected:before,
    .sticker-menu .catalog-menu-bar .selected img {
      opacity: 0.5; }

.sticker-menu .preview[class] {
  height: 160px; }
  .sticker-menu .preview[class] .shuffle {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.95);
    transition: opacity 0.15s;
    color: #deb359;
    position: absolute;
    top: 50%;
    left: calc(50% + 60px);
    right: 0;
    margin: -15px auto 0;
    margin-top: -15px;
    font-size: 22px;
    text-align: center;
    display: none; }
    .sticker-menu .preview[class] .shuffle:hover {
      opacity: 0.75; }
    .sticker-menu .preview[class] .shuffle:active {
      opacity: 0.5625; }
    .sticker-menu .preview[class] .shuffle::before {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    .sticker-menu .preview[class] .shuffle::before {
      content: ""; }
  .sticker-menu .preview[class] .sticker {
    width: 120px;
    height: 120px;
    margin: 20px auto; }

.sticker-menu.error .catalog-error-content {
  display: block; }

.window-wrapper .sticker-menu .catalog {
  margin: 0 4px; }

.window-wrapper .sticker-menu .catalog-tabs {
  margin: 10px; }

.window-wrapper .sticker-menu .catalog-menu-bar {
  border-bottom: none;
  padding: 0 10px; }

.window-wrapper .sticker-menu .sticker-pack-detail .sticker-item {
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 2.5px; }

.window-wrapper .sticker-menu .preview[class] {
  height: 100px; }
  .window-wrapper .sticker-menu .preview[class] .shuffle {
    left: calc(50% + 40px); }
  .window-wrapper .sticker-menu .preview[class] .sticker {
    width: 80px;
    height: 80px;
    margin: 10px auto; }

.mobile .chat-bar-menu.sticker-menu .catalog-menu-bar {
  bottom: -1px; }

.mobile .chat-bar-menu.sticker-menu .catalog {
  text-align: center; }

.mobile .chat-bar-menu.sticker-menu .sticker-pack-detail .catalog .catalog-menu-list {
  margin: 0 auto;
  display: inline;
  position: static;
  overflow: auto; }
  .mobile .chat-bar-menu.sticker-menu .sticker-pack-detail .catalog .catalog-menu-list .sticker-item {
    width: 50px;
    height: 50px;
    display: inline-block;
    float: left; }

.mobile .chat-bar-menu.sticker-menu.showing-catalog .catalog-container {
  margin-bottom: 32px; }
/*css!/common/withme/js/widget/sticker/Sticker.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.sticker {
  position: relative;
  color: #deb359;
  background-color: rgba(255, 255, 255, 0.9); }
  .sticker .img-container {
    transition: opacity 0.3s ease;
    opacity: 0;
    width: 100%;
    height: 100%; }
  .sticker.loaded .img-container {
    opacity: 1; }
  .sticker img {
    width: 100%;
    height: 100%;
    cursor: pointer; }
  .sticker.error {
    cursor: pointer; }
    .sticker.error img {
      display: none; }
    .sticker.error::before {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    .sticker.error::before {
      content: "";
      font-size: 40px;
      text-align: center;
      top: 50%;
      left: 50%;
      position: absolute;
      margin-left: -20px;
      margin-top: -20px;
      width: 40px;
      height: 40px;
      line-height: 40px; }

.sticker.loading::after,
.pending-message-list-item .sticker::after {
  animation: ball-scale 1s 0s ease-in-out infinite;
  animation-fill-mode: both;
  content: '';
  display: block;
  background: #deb359;
  border-radius: 100%;
  height: 60px;
  width: 60px;
  position: absolute;
  top: 50%;
  left: 50%; }

.sticker.loading img,
.pending-message-list-item .sticker img {
  display: none; }
/*css!/common/withme/js/widget/chatBarMenu/StickerItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.sticker-item {
  width: 88px;
  height: 88px;
  float: left;
  cursor: pointer;
  position: relative; }
  .sticker-item.highlighted {
    opacity: 0.5; }
  .sticker-item .sticker-preview {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none; }
  .sticker-item .sticker-preview,
  .sticker-item .sticker-thumbnail {
    transition: opacity 0.3s; }
  .sticker-item .sticker-thumbnail {
    width: 100%;
    height: 100%; }
  .sticker-item .shimmer-on {
    opacity: 1;
    z-index: 1;
    /* chuck for z-index */ }
  .sticker-item.previewing .sticker-preview {
    opacity: 1; }
  .sticker-item.previewing .sticker-thumbnail {
    opacity: 0; }
/*css!/common/withme/js/widget/chatBarMenu/StickerPackDetail.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.sticker-pack-detail .notation {
  width: calc(100% - 10px);
  margin-left: auto;
  margin-right: auto; }

.sticker-pack-detail .sticker-menu {
  margin: 10px; }

.sticker-pack-detail .sticker-item {
  width: 80px;
  height: 80px;
  margin: 0 3px 6px 3px;
  text-align: center; }

.sticker-pack-detail.empty .sticker-menu {
  display: none; }

.sticker-pack-detail.empty .no-results {
  margin-top: 15px; }

.sticker-pack-detail .deleted {
  display: none; }

.sticker-pack-detail .segmented-control .segmented-control-item:hover {
  opacity: 1; }

.window-manager .sticker-pack-detail.empty .no-results {
  margin-top: 10px; }
/*css!/common/withme/js/widget/responsiveTileList/ResponsiveStickerPack.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.responsive-sticker-pack:hover {
  cursor: pointer; }

.responsive-sticker-pack .tile-name {
  margin: 5px 0 0 0;
  font-size: 12px;
  color: #404040;
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal; }

.responsive-sticker-pack p.price-credits, .responsive-sticker-pack p.in-inventory {
  text-align: left;
  position: relative;
  margin-bottom: 0; }

.responsive-sticker-pack p.in-inventory {
  text-transform: uppercase;
  color: #a8a8a8;
  letter-spacing: 1px; }

.responsive-sticker-pack .hidden {
  display: none; }

.responsive-sticker-pack .cover-image {
  background-color: #fff; }
/*css!/common/withme/js/widget/isNewTag/IsNewTag.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.is-new-tag {
  transform: rotate(-45deg);
  width: 100px;
  height: 100px;
  position: absolute;
  top: -65px;
  left: -65px;
  background-color: #deb359;
  padding-top: 82px;
  text-align: center;
  font-size: 10px;
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #fff;
  z-index: 1; }
/*css!/common/withme/js/mode/shop/StickerCartList.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.sticker-cart-list {
  flex-grow: 1;
  overflow-x: visible;
  overflow-y: auto;
  position: relative; }
  .sticker-cart-list .sticker-item.preview-selected:not(.no-overlay) {
    opacity: 0.5; }
/*css!/common/withme/js/mode/shop/CartListItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.cart-list-item {
  list-style-type: none;
  position: relative;
  width: 100%;
  padding: 0 10px 0 15px;
  margin-bottom: 10px; }
  .cart-list-item .ap ~ .distinguish-status-shields {
    top: 27px; }
  .cart-list-item .also-tried-on {
    display: block;
    padding-bottom: 10px;
    color: #a8a8a8;
    font-size: 12px; }
  .cart-list-item .product-info {
    padding: 0 0 10px 10px;
    margin: 0;
    border-bottom: 1px solid #d4d4d4; }
    .cart-list-item .product-info::before {
      top: 40px; }
    .cart-list-item .product-info .cart-image {
      position: relative;
      padding: 0;
      margin: 0 10px 0 20px;
      float: left;
      height: 80px;
      width: 80px; }
      .cart-list-item .product-info .cart-image img {
        background-color: #d4d4d4;
        width: 100%;
        height: 100%; }
      .cart-list-item .product-info .cart-image button.ap {
        position: absolute;
        pointer-events: none;
        top: 5px;
        right: 5px; }
    .cart-list-item .product-info .creator {
      display: inline-block; }
    .cart-list-item .product-info .name {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 12px; }
    .cart-list-item .product-info .price-credits {
      padding-top: 10px;
      font-size: 12px;
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal; }
    .cart-list-item .product-info .price-vcoin {
      padding-top: 10px;
      font-size: 12px;
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      color: #22144F; }
      .cart-list-item .product-info .price-vcoin svg .color-1 {
        fill: #22144F; }
  .cart-list-item.has-creator .created-by {
    visibility: visible; }
  .cart-list-item:last-child,
  .cart-list-item:last-child .product-info {
    margin-bottom: 0; }
/*css!/common/withme/js/mode/shop/StickerCartListItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.sticker-cart-list-item {
  list-style-type: none;
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 0 15px; }
  .sticker-cart-list-item .product-info {
    padding: 20px 0 10px;
    margin: 0 0 10px 0;
    min-height: 138px;
    border-bottom: 1px solid #d4d4d4; }
    .sticker-cart-list-item .product-info .cart-image {
      position: relative;
      padding: 0;
      margin: 0 20px 0 0;
      float: left;
      height: 100px;
      width: 100px; }
      .sticker-cart-list-item .product-info .cart-image img {
        width: 100%;
        height: 100%; }
      .sticker-cart-list-item .product-info .cart-image button.ap {
        position: absolute;
        pointer-events: none;
        top: 5px;
        right: 5px; }
    .sticker-cart-list-item .product-info .name {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 12px; }
    .sticker-cart-list-item .product-info .sticker-count {
      padding-top: 10px;
      font-size: 10px;
      color: #a8a8a8; }
    .sticker-cart-list-item .product-info .created-by {
      font-size: 10px; }
    .sticker-cart-list-item .product-info .creator {
      font-size: 10px;
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      color: #2b2b2b; }
    .sticker-cart-list-item .product-info .price-credits {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 12px;
      margin-top: 28px; }
  .sticker-cart-list-item .preview-label {
    color: #a8a8a8;
    margin: 5px 0;
    font-size: 10px; }
  .sticker-cart-list-item .sticker-menu {
    margin-left: 0;
    margin-right: 0; }
  .sticker-cart-list-item .sticker-picker {
    margin-bottom: 10px; }
    .sticker-cart-list-item .sticker-picker .catalog {
      min-height: 127px;
      margin: 0 -5px; }
/*css!/common/withme/js/widget/chatBarMenu/StickerCatalog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.sticker-catalog.is-list {
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch; }
  .sticker-catalog.is-list.loading::after {
    top: 50%; }
/*css!/common/withme/js/dialog/stickers/StickerPackDetailDialog.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
[data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-header .back-button {
  position: absolute;
  top: 25px;
  left: 25px;
  transform: translateX(-50%) translateY(-50%);
  width: 50px;
  height: 50px;
  text-align: center;
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 15px;
  cursor: pointer; }
  [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-header .back-button::before {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
  [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-header .back-button::before {
    content: ""; }

[data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-body {
  font-weight: normal;
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: left;
  margin-top: 50px;
  background-color: #f2f2f2;
  padding-bottom: 0; }
  [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-body .sticker-pack-container {
    max-height: 500px; }
  [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-body .sticker-pack-wrapper {
    padding: 0 15px;
    position: relative; }
  [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-body .product-info {
    padding: 20px 0 10px;
    margin: 0 0 10px 0;
    min-height: 138px;
    border-bottom: 1px solid #d4d4d4; }
    [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-body .product-info .cart-image {
      position: relative;
      padding: 0;
      margin: 0 20px 0 0;
      float: left;
      height: 100px;
      width: 100px; }
      [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-body .product-info .cart-image img {
        width: 100%;
        height: 100%; }
      [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-body .product-info .cart-image button.ap {
        position: absolute;
        pointer-events: none;
        top: 5px;
        right: 5px; }
    [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-body .product-info .name {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 12px; }
    [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-body .product-info .sticker-count {
      padding-top: 10px;
      font-size: 10px;
      color: #a8a8a8; }
    [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-body .product-info .created-by {
      font-size: 10px; }
    [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-body .product-info .creator {
      font-size: 10px;
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      color: #2b2b2b; }
    [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-body .product-info p.in-inventory {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 12px;
      margin-top: 28px;
      text-align: left;
      color: #a8a8a8;
      text-transform: uppercase; }
  [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-body .preview-label {
    color: #a8a8a8;
    margin: 5px 0;
    font-size: 10px; }
  [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-body .sticker-menu {
    margin-left: 0;
    margin-right: 0; }
  [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-body .sticker-picker {
    margin-bottom: 10px; }
    [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-body .sticker-picker .catalog {
      min-height: 127px;
      margin: 0 -5px; }

[data-ui-role="modal-dialog"].sticker-pack-detail-dialog .sticker-item.preview-selected:not(.no-overlay) {
  opacity: 0.5; }

.mobile [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-x {
  display: none; }

.mobile [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .sticker-pack-container {
  overflow-y: auto; }
/*css!/common/withme/js/dialog/shop/StickerPackDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
[data-ui-role="modal-dialog"].sticker-pack-dialog .dialog-footer,
[data-ui-role="modal-dialog"].sticker-pack-checkout-dialog .dialog-footer,
[data-ui-role="modal-dialog"].sticker-pack-detail-dialog .dialog-footer {
  flex-shrink: 0; }

[data-ui-role="modal-dialog"].sticker-pack-dialog .sticker-packs,
[data-ui-role="modal-dialog"].sticker-pack-checkout-dialog .sticker-packs,
[data-ui-role="modal-dialog"].sticker-pack-detail-dialog .sticker-packs {
  margin-top: 0px;
  height: 100%;
  overflow: hidden;
  overflow-y: auto; }

[data-ui-role="modal-dialog"].sticker-pack-dialog .responsive-tile-list,
[data-ui-role="modal-dialog"].sticker-pack-checkout-dialog .responsive-tile-list,
[data-ui-role="modal-dialog"].sticker-pack-detail-dialog .responsive-tile-list {
  margin: 15px 0; }

.desktop [data-ui-role="modal-dialog"].sticker-pack-dialog .checkout-container,
.desktop [data-ui-role="modal-dialog"].sticker-pack-checkout-dialog .checkout-container,
.desktop [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .checkout-container {
  display: flex;
  flex-direction: column;
  flex-grow: 0; }

.desktop [data-ui-role="modal-dialog"].sticker-pack-dialog .checkout-bottom-container,
.desktop [data-ui-role="modal-dialog"].sticker-pack-checkout-dialog .checkout-bottom-container,
.desktop [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .checkout-bottom-container {
  width: 100%; }

.mobile [data-ui-role="modal-dialog"].sticker-pack-dialog .sticker-packs,
.mobile [data-ui-role="modal-dialog"].sticker-pack-checkout-dialog .sticker-packs,
.mobile [data-ui-role="modal-dialog"].sticker-pack-detail-dialog .sticker-packs {
  height: 100%;
  max-height: 100%; }
/*css!/common/withme/js/mode/shop/StickerPackList.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.sticker-packList {
  margin: 10px 0 0 0; }
/*css!/common/withme/js/widget/stickerPack/StickerPack.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.sticker-pack {
  width: 150px;
  height: 210px;
  padding: 150px 10px 10px 10px;
  float: left;
  background-color: #fff;
  position: relative;
  margin: 0 10px 10px 0;
  overflow: hidden; }
  .sticker-pack:hover {
    cursor: pointer; }
  .sticker-pack:nth-child(3n) {
    margin-right: 0; }
  .sticker-pack .image-wrapper {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    margin: 0;
    min-height: 140px;
    text-align: center; }
    .sticker-pack .image-wrapper img {
      height: 130px;
      width: 130px;
      margin: 10px; }
  .sticker-pack h1 {
    margin: 5px 0 0 0;
    font-size: 12px;
    color: #404040;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }
  .sticker-pack p.price-credits, .sticker-pack p.in-inventory {
    text-align: left;
    position: relative;
    top: 12px; }
  .sticker-pack p.in-inventory {
    text-transform: uppercase;
    color: #a8a8a8;
    letter-spacing: 1px; }
  .sticker-pack .hidden {
    display: none; }

.mobile .sticker-pack {
  width: 138px;
  height: 198px; }
  .mobile .sticker-pack img {
    width: 118px;
    height: 118px; }
  .mobile .sticker-pack h1 {
    margin: 0 0 0 0;
    position: relative;
    top: -8px; }
  .mobile .sticker-pack p.price-credits, .mobile .sticker-pack p.in-inventory {
    top: 7px; }
  .mobile .sticker-pack:nth-child(3n) {
    margin-right: 10px; }
/*css!/common/waf/js/widget/simpleScroller/SimpleScroller.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.simple-scroller {
  overflow-y: auto; }
  .simple-scroller .simple-scroller-viewport {
    position: relative;
    white-space: nowrap;
    height: 100px;
    overflow-y: hidden;
    overflow-x: scroll;
    transition: all 0.15s; }
  .simple-scroller .simple-scroller-target {
    overflow-x: auto !important;
    display: inline-block; }
  .simple-scroller .simple-scroller-left.simple-scroller-left.simple-scroller-left,
  .simple-scroller .simple-scroller-right.simple-scroller-right.simple-scroller-right {
    height: 50px;
    font-size: 15px;
    line-height: 50px;
    max-height: 50px;
    background: rgba(255, 255, 255, 0.95);
    z-index: 200; }
    .simple-scroller .simple-scroller-left.simple-scroller-left.simple-scroller-left[disabled],
    .simple-scroller .simple-scroller-right.simple-scroller-right.simple-scroller-right[disabled] {
      opacity: 0; }
  .simple-scroller .simple-scroller-left {
    position: absolute;
    top: 0;
    left: 0; }
  .simple-scroller .simple-scroller-right {
    position: absolute;
    top: 0;
    right: -1px; }

@media only screen and (max-width: 1019px) {
  .mobile .simple-scroller {
    -webkit-overflow-scrolling: touch; }
    .mobile .simple-scroller .simple-scroller-left,
    .mobile .simple-scroller .simple-scroller-right {
      display: none; } }

.mobile nav .simple-scroller .simple-scroller-viewport {
  height: 50px; }

.small-simple-scroller .simple-scroller {
  overflow-y: hidden;
  height: 24px; }
  .small-simple-scroller .simple-scroller .simple-scroller-viewport {
    width: 100%;
    margin: 0 auto; }
  .small-simple-scroller .simple-scroller .simple-scroller-left.simple-scroller-left.simple-scroller-left,
  .small-simple-scroller .simple-scroller .simple-scroller-right.simple-scroller-right.simple-scroller-right {
    min-height: 20px;
    max-height: 20px;
    line-height: 20px;
    height: 20px;
    width: 20px;
    padding: 1px; }
    .small-simple-scroller .simple-scroller .simple-scroller-left.simple-scroller-left.simple-scroller-left[disabled],
    .small-simple-scroller .simple-scroller .simple-scroller-right.simple-scroller-right.simple-scroller-right[disabled] {
      display: none; }

.dark-theme .small-simple-scroller .simple-scroller .simple-scroller-left.simple-scroller-left.simple-scroller-left,
.dark-theme .simple-scroller .simple-scroller-left.simple-scroller-left.simple-scroller-left {
  background: none;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75) 75%, transparent); }

.dark-theme .small-simple-scroller .simple-scroller .simple-scroller-right.simple-scroller-right.simple-scroller-right,
.dark-theme .simple-scroller .simple-scroller-right.simple-scroller-right.simple-scroller-right {
  background: none;
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.75) 75%, transparent); }

.dark-theme .simple-scroller,
.dark-theme .small-simple-scroller {
  color: #fff;
  background: none; }
/*css!/common/withme/js/widget/chatBarMenu/StickerPackList.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.sticker-pack-list {
  height: 100%; }
/*css!/common/withme/js/widget/chatBarMenu/StickerPackItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.sticker-pack-item {
  display: inline-block;
  margin-left: 10px;
  padding: 7px 5px 0;
  transition: opacity 0.15s;
  cursor: pointer;
  height: 100%;
  width: 30px;
  overflow: hidden;
  margin: 0;
  text-align: center; }
  .sticker-pack-item:hover {
    opacity: 0.75; }
  .sticker-pack-item:active {
    opacity: 0.5625; }
  .sticker-pack-item img {
    display: inline-block; }
/*css!/common/withme/js/dialog/feedLightbox/TagPanel.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.tag-panel {
  padding: 15px 15px 0; }
  .tag-panel .no-results {
    display: none; }
  .tag-panel.has-no-tags .no-results {
    display: flex; }
/*css!/common/withme/js/dialog/feedLightbox/FeedTagTile.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.feed-tag-tile {
  height: 260px;
  display: inline-block; }
  .feed-tag-tile:nth-child(even) {
    margin-right: 15px; }
  .feed-tag-tile .dual-name {
    background-color: #f2f2f2;
    height: 50px; }
  .feed-tag-tile .product-info {
    display: grid;
    grid-auto-columns: 1fr min-content;
    grid-template-rows: 25px; }
  .feed-tag-tile .product-name {
    font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    font-style: normal;
    color: #404040;
    position: relative;
    top: 3px;
    grid-column-start: 1;
    grid-column-end: 3; }
  .feed-tag-tile .price-info {
    position: relative; }
  .feed-tag-tile .cart-button {
    right: -3px !important;
    bottom: 25px !important; }
/*css!/common/withme/js/dialog/feedLightbox/ActionBar.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.action-bar.feed-action-bar {
  background: #fff;
  justify-content: flex-end; }
  .action-bar.feed-action-bar .action-more-container {
    flex-grow: 0;
    justify-content: center; }
  .action-bar.feed-action-bar .action-like-container {
    padding-left: 3px; }
    .action-bar.feed-action-bar .action-like-container .count-likes {
      display: inline-block;
      min-width: 10px; }
  .action-bar.feed-action-bar .action-tag-container,
  .action-bar.feed-action-bar .action-comment-container {
    display: none; }
/*css!/common/withme/js/widget/feed/FeedActionBar.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.feed-action-bar {
  display: flex;
  flex-direction: column; }
  .feed-action-bar .counts-container {
    display: flex;
    width: auto;
    margin: 0 10px;
    border-bottom: 1px solid #f2f2f2; }
    .feed-action-bar .counts-container a {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      text-transform: uppercase;
      color: #404040; }
      .feed-action-bar .counts-container a .count {
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal;
        text-transform: uppercase;
        color: #404040; }
  .feed-action-bar .actions-container {
    align-items: flex-start;
    justify-content: space-between;
    min-height: 50px;
    color: #a8a8a8;
    fill: #a8a8a8;
    display: flex;
    flex-direction: row;
    width: 100%; }
  .feed-action-bar .action-bar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    text-align: center;
    height: 50px; }
    .feed-action-bar .action-bar-item svg {
      width: 25px;
      height: 25px; }
  .feed-action-bar .action-more {
    position: relative;
    width: 45px;
    justify-content: center; }
  .feed-action-bar .action-more-container {
    flex-grow: 1;
    justify-content: flex-end;
    padding-left: 0;
    order: 4; }
  .feed-action-bar .btn {
    display: flex;
    align-items: center;
    background: none;
    color: #404040; }
    .feed-action-bar .btn:active {
      background: none; }
  .feed-action-bar .icon {
    width: 25px;
    height: 25px;
    min-width: 25px;
    padding: 2px; }
  .feed-action-bar .icon-more {
    width: 22px;
    min-width: 22px; }
  .feed-action-bar .action-like.is-liked .icon-like-off,
  .feed-action-bar .action-like:not(.is-liked) .icon-like-on {
    display: none; }
  .feed-action-bar > li {
    justify-content: center;
    transition: opacity 0.15s;
    width: auto;
    padding-left: 15px; }
    .feed-action-bar > li:hover {
      opacity: 0.75; }
    .feed-action-bar > li:active {
      opacity: 0.5625; }
  .feed-action-bar .btn {
    padding: 0; }
/*css!/common/withme/js/dialog/photobooth/PhotoBoothCaptionDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
[data-ui-role="modal-dialog"].photo-booth-caption-dialog {
  width: 470px; }
  [data-ui-role="modal-dialog"].photo-booth-caption-dialog .dialog-container {
    padding: 0;
    height: auto;
    max-height: 1200px; }
  [data-ui-role="modal-dialog"].photo-booth-caption-dialog .aux-header {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end; }
  [data-ui-role="modal-dialog"].photo-booth-caption-dialog .dialog-header a.cta {
    transition: opacity 0.15s; }
    [data-ui-role="modal-dialog"].photo-booth-caption-dialog .dialog-header a.cta:hover {
      opacity: 0.75; }
    [data-ui-role="modal-dialog"].photo-booth-caption-dialog .dialog-header a.cta:active {
      opacity: 0.5625; }
  [data-ui-role="modal-dialog"].photo-booth-caption-dialog .save {
    position: absolute;
    right: 15px;
    top: 0;
    transition: opacity 0.15s; }
    [data-ui-role="modal-dialog"].photo-booth-caption-dialog .save:hover {
      opacity: 0.75; }
    [data-ui-role="modal-dialog"].photo-booth-caption-dialog .save:active {
      opacity: 0.5625; }
  [data-ui-role="modal-dialog"].photo-booth-caption-dialog .back {
    margin-left: 25px; }
  [data-ui-role="modal-dialog"].photo-booth-caption-dialog .dialog-body {
    position: relative;
    margin-top: 50px;
    padding: 0; }
    [data-ui-role="modal-dialog"].photo-booth-caption-dialog .dialog-body .canvas-container {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      width: 466px;
      height: 466px;
      margin-left: auto;
      margin-right: auto; }
      [data-ui-role="modal-dialog"].photo-booth-caption-dialog .dialog-body .canvas-container .image-container {
        width: 100%;
        height: 100%;
        background-size: cover; }
      [data-ui-role="modal-dialog"].photo-booth-caption-dialog .dialog-body .canvas-container .canvas-footer {
        display: none; }
    [data-ui-role="modal-dialog"].photo-booth-caption-dialog .dialog-body .input-caption {
      width: 100%;
      border-radius: 0; }
    [data-ui-role="modal-dialog"].photo-booth-caption-dialog .dialog-body textarea {
      border-radius: 0; }

.mobile [data-ui-role="modal-dialog"].photo-booth-caption-dialog .aux-header {
  width: auto; }

.mobile [data-ui-role="modal-dialog"].photo-booth-caption-dialog .back {
  display: none; }

.mobile [data-ui-role="modal-dialog"].photo-booth-caption-dialog .dialog-body .main-container {
  display: flex;
  flex-direction: row;
  height: auto;
  min-height: 200px; }

.mobile [data-ui-role="modal-dialog"].photo-booth-caption-dialog .dialog-body .canvas-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 30%;
  background-color: #fff;
  height: auto; }
  .mobile [data-ui-role="modal-dialog"].photo-booth-caption-dialog .dialog-body .canvas-container .image-container {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain; }
  .mobile [data-ui-role="modal-dialog"].photo-booth-caption-dialog .dialog-body .canvas-container .canvas-footer {
    display: flex;
    height: 24px;
    width: 100%;
    background-color: #f2f2f2;
    order: 2; }
  .mobile [data-ui-role="modal-dialog"].photo-booth-caption-dialog .dialog-body .canvas-container .feed-photo {
    background-color: #fff;
    align-items: flex-start; }

.mobile [data-ui-role="modal-dialog"].photo-booth-caption-dialog .dialog-body .controls-container {
  width: 70%; }

.mobile [data-ui-role="modal-dialog"].photo-booth-caption-dialog textarea {
  border-radius: 0;
  height: 200px; }
/*css!/common/waf/js/widget/uploadCurtain/UploadCurtain.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.upload-curtain {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.3);
  display: none; }
  .upload-curtain::before {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
  .upload-curtain::before {
    content: "";
    font-size: 24px;
    opacity: 0;
    display: block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-radius: 30px;
    color: #404040;
    background-color: rgba(255, 255, 255, 0.95);
    transition: all 0.6s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -30px; }
  .upload-curtain:not(.loading)::before {
    opacity: 1;
    transform: scale(1.2); }
/*css!/common/waf/js/widget/photoBooth/component_control_presenters/CaptionControlsPresenter.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
/*css!/common/waf/js/widget/photoBooth/component_control_presenters/BaseControlsPresenter.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.control-presenter {
  background-color: #f2f2f2;
  position: relative;
  width: 100%; }
  .control-presenter .simple-scroller .simple-scroller-viewport {
    width: 100%;
    height: auto; }
  .control-presenter .simple-scroller .simple-scroller-left,
  .control-presenter .simple-scroller .simple-scroller-right {
    transform: translateY(-50%);
    top: 50%;
    width: 24px;
    height: 75px;
    max-height: 75px;
    padding: 0 0 0 5px;
    margin: 0 1px 0 0; }
  .control-presenter ul.component-options {
    padding: 21px 0 21px 20px;
    list-style-type: none;
    font-size: 0;
    display: inline-block; }
    .control-presenter ul.component-options li.component-option {
      cursor: pointer;
      vertical-align: top;
      display: inline-block;
      height: 75px;
      width: 75px;
      margin-right: 20px;
      background-color: #000;
      background-clip: border-box;
      background-origin: border-box;
      background-repeat: no-repeat; }
      .control-presenter ul.component-options li.component-option.selected {
        box-shadow: inset 0 0 0 2px #000; }

.desktop .control-presenter .simple-scroller .simple-scroller-viewport {
  overflow: hidden; }
/*css!/common/withme/js/dialog/photobooth/PhotoBoothDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
[data-ui-role="modal-dialog"].photo-booth-dialog {
  width: 470px; }
  [data-ui-role="modal-dialog"].photo-booth-dialog .dialog-container {
    padding: 0; }
  [data-ui-role="modal-dialog"].photo-booth-dialog .dialog-header a.cta {
    transition: opacity 0.15s; }
    [data-ui-role="modal-dialog"].photo-booth-dialog .dialog-header a.cta:hover {
      opacity: 0.75; }
    [data-ui-role="modal-dialog"].photo-booth-dialog .dialog-header a.cta:active {
      opacity: 0.5625; }
  [data-ui-role="modal-dialog"].photo-booth-dialog .post {
    position: absolute;
    right: 15px;
    top: 0;
    transition: opacity 0.15s; }
    [data-ui-role="modal-dialog"].photo-booth-dialog .post:hover {
      opacity: 0.75; }
    [data-ui-role="modal-dialog"].photo-booth-dialog .post:active {
      opacity: 0.5625; }
  [data-ui-role="modal-dialog"].photo-booth-dialog .dialog-body {
    position: relative;
    margin-top: 50px;
    padding: 0; }
    [data-ui-role="modal-dialog"].photo-booth-dialog .dialog-body .canvas-container {
      display: flex;
      align-items: center;
      justify-content: center; }
    [data-ui-role="modal-dialog"].photo-booth-dialog .dialog-body textarea {
      border-radius: 0; }
/*css!/common/withme/js/widget/profileDetailSidebar/ProfilePosts.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.profile-posts .loading-feed .card-description {
  padding-bottom: 60px; }
  .profile-posts .loading-feed .card-description::after {
    animation: ball-scale 1s 0s ease-in-out infinite;
    animation-fill-mode: both;
    content: '';
    display: block;
    background: #deb359;
    border-radius: 100%;
    height: 60px;
    width: 60px;
    margin-left: 50%;
    margin-top: 20px;
    position: absolute; }
/*css!/common/withme/js/widget/feed/FeedItemHeader.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.feed-item-header .bar {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%; }
  .feed-item-header .bar .timestamp-widget {
    flex-grow: 0;
    flex-shrink: 0;
    width: auto;
    margin-left: 10px; }

.feed-mode[data-layout=a1] .feed-item-header .bar .dual-name {
  width: 0px;
  min-width: initial;
  max-width: initial;
  flex-grow: 1;
  flex-shrink: 0;
  overflow: hidden; }

.feed-mode[data-layout=c1] .feed-item-header {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
  height: 100%; }
  .feed-mode[data-layout=c1] .feed-item-header .bar {
    display: block;
    text-align: center; }
    .feed-mode[data-layout=c1] .feed-item-header .bar .dual-name {
      margin-top: 20px;
      max-width: 100%; }
  .feed-mode[data-layout=c1] .feed-item-header .username {
    margin: 4px 0 2px;
    line-height: 20px;
    height: 20px;
    max-width: 150px; }
  .feed-mode[data-layout=c1] .feed-item-header time,
  .feed-mode[data-layout=c1] .feed-item-header timestamp.timestamp-widget.feed-item-timestamp {
    display: none; }
/*css!/common/withme/js/widget/feed/FeedItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
@keyframes favoriteScale {
  0% {
    transform: scale(1); }
  25% {
    transform: scale(1.3); }
  100% {
    transform: scale(1); } }

@keyframes pulseFull {
  0% {
    transform: scale(0); }
  50% {
    transform: scale(1); }
  100% {
    transform: scale(0); } }

@keyframes disable-screen {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.feed-item {
  width: 100%;
  height: auto;
  margin: 0 10px 10px 0;
  position: relative;
  background: transparent; }
  .feed-item.sorting {
    display: none; }
  .feed-item .bar {
    height: auto; }
  .feed-item .imageloader {
    display: none; }
  .feed-item .feed-item-text,
  .feed-item .feed-item-photo {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background-color: #f2f2f2;
    overflow: hidden;
    margin: 0; }
  .feed-item .caption:not(.hidden) {
    background-color: white; }
    .feed-item .caption:not(.hidden).has-caption {
      padding: 10px 10px 0 10px; }
  .feed-item .photo-room-users ~ .caption:not(.hidden).has-caption {
    padding: 5px 10px; }
  .feed-item .feed-item-photo {
    height: 100%;
    width: 100%;
    padding-bottom: 100%; }
    .feed-item .feed-item-photo img {
      position: absolute; }
  .feed-item .feed-item-text {
    display: flex;
    align-items: center;
    padding: 20px 20px;
    word-wrap: break-word;
    font-size: 24px;
    color: #404040;
    height: 100%; }
    .feed-item .feed-item-text .message {
      overflow: hidden;
      white-space: normal;
      hyphens: none; }
    .feed-item .feed-item-text .more-indicator {
      position: absolute;
      bottom: 8px;
      left: 0;
      width: 100%;
      text-align: center;
      color: #deb359;
      display: none;
      text-transform: uppercase;
      font-size: 10px; }
  .feed-item .feed-item-footer {
    padding: 0 0 0 0;
    background: #fff;
    flex-shrink: 0; }
  .feed-item .feed-item-header {
    background: rgba(255, 255, 255, 0.95);
    padding: 0 15px; }
  .feed-item .spinner {
    position: absolute;
    top: calc(50% - 24px);
    left: calc(50% - 15px);
    font-size: 3em;
    z-index: 4;
    -webkit-animation: disable-screen 1.5s linear infinite;
    width: 100%;
    display: none; }
  .feed-item > .feed-item-container {
    position: relative;
    background-color: #f2f2f2;
    overflow: hidden; }
    .feed-item > .feed-item-container > .dummy {
      margin-top: 100%; }
  .feed-item .photo-with {
    display: none; }
  .feed-item > .image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;
    left: 0;
    z-index: 0;
    border: 0;
    overflow: hidden; }
    .feed-item > .image[style=""]::after, .feed-item > .image:not([style])::after {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 50px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -25px;
      margin-left: -25px; }
  .feed-item .extension-bar {
    display: none; }

.mode[data-layout=c1] .feed-item {
  width: 150px; }
  .mode[data-layout=c1] .feed-item .photo-room-container {
    display: none; }
  .mode[data-layout=c1] .feed-item .feed-item-container::before {
    display: none; }
  .mode[data-layout=c1] .feed-item .bar {
    height: 0px; }
  .mode[data-layout=c1] .feed-item .feed-item-photo img {
    transition: transform 0.15s ease; }
  .mode[data-layout=c1] .feed-item .feed-item-text {
    padding: 10px;
    font-size: 10px; }
  .mode[data-layout=c1] .feed-item .more-indicator {
    visibility: hidden; }
  .mode[data-layout=c1] .feed-item .feed-item-runner {
    opacity: 0;
    width: 100%;
    z-index: 1;
    pointer-events: none; }
  .mode[data-layout=c1] .feed-item .feed-item-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50%;
    background: none; }
    .mode[data-layout=c1] .feed-item .feed-item-footer .feed-action-bar {
      display: none; }
    .mode[data-layout=c1] .feed-item .feed-item-footer .extension-bar-column-info {
      display: grid;
      grid: auto / auto auto;
      align-items: center;
      grid-gap: 3px; }
    .mode[data-layout=c1] .feed-item .feed-item-footer .extension-bar-icon {
      width: 20px;
      height: 20px; }
    .mode[data-layout=c1] .feed-item .feed-item-footer .extension-bar {
      display: grid;
      justify-content: center;
      grid: auto / auto auto;
      grid-gap: 10px;
      border: none;
      color: #fff;
      font-size: 15px;
      text-align: center;
      line-height: 60px; }
      .mode[data-layout=c1] .feed-item .feed-item-footer .extension-bar .likes-labels,
      .mode[data-layout=c1] .feed-item .feed-item-footer .extension-bar .comments-labels {
        display: none; }
  .mode[data-layout=c1] .feed-item:hover .feed-item-runner {
    opacity: 1;
    transition: opacity 0.3s ease; }
  .mode[data-layout=c1] .feed-item:hover .feed-item-photo img {
    transform: scale(1.1);
    transition-delay: 0.45s; }
/*css!/common/withme/js/widget/profileDetailSidebar/ProfileFeedListPresenter.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.profile-feed .no-results {
  width: auto;
  margin: 15px; }
/*css!/common/withme/js/widget/profileDetailSidebar/ProfileFeedPostNow.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.profile-feed-post-now {
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  .profile-feed-post-now img {
    width: 30%;
    padding: 20% 0 10% 0; }
  .profile-feed-post-now button {
    width: 50%; }
/*css!/common/withme/js/widget/feed/Feed.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.feed .notation {
  margin-right: 0; }

.feed .collection-error .btn {
  margin-left: 10px; }
/*css!/common/withme/js/dialog/profileLightbox/ProfileLightbox.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
[data-ui-role="modal-dialog"].profile-lightbox .invisible {
  visibility: hidden; }

[data-ui-role="modal-dialog"].profile-lightbox .headpiece .widgets {
  display: grid;
  grid-template: 'headpiece' auto 'action-bar' auto / auto; }
  [data-ui-role="modal-dialog"].profile-lightbox .headpiece .widgets .profile-headpiece {
    grid-area: headpiece; }
  [data-ui-role="modal-dialog"].profile-lightbox .headpiece .widgets .profile-action-bar {
    grid-area: action-bar; }

.dialog-manager.transparent-avatar,
.profile-lightbox.lightbox-dialog .lightbox.transparent-avatar {
  background: none; }

.dialog-manager.transparent-avatar .gutter {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  pointer-events: none; }

.dialog-manager.transparent-avatar .gutter.left {
  left: 0; }

.dialog-manager.transparent-avatar .gutter.right {
  right: 0; }

.profile-lightbox.lightbox-dialog .lightbox-sidebar.transparent-avatar {
  background-color: #f2f2f2; }

.transparent-avatar .dialog-container {
  box-shadow: rgba(0, 0, 0, 0.9) 0 0 0 100vmax; }

body.has-transparent-avatar-dialog .audience-counter,
body.has-transparent-avatar-dialog .join-as-presenter-widget,
body.has-transparent-avatar-dialog .name-tag-layer-manager,
body.has-transparent-avatar-dialog .room-tutorial-tooltip {
  display: none; }

.desktop [data-ui-role="modal-dialog"].profile-lightbox.transparent-avatar {
  padding: 100px 50px 100px 50px;
  max-width: 100%; }

.desktop [data-ui-role="modal-dialog"].profile-lightbox .header-button {
  position: absolute;
  bottom: 100%;
  right: 0;
  padding-bottom: 10px;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal;
  text-decoration: none;
  text-transform: uppercase; }

.desktop [data-ui-role="modal-dialog"].profile-lightbox .lightbox .lightbox-sidebar .sticky-content {
  padding: 0 10px;
  width: 100%; }
  .desktop [data-ui-role="modal-dialog"].profile-lightbox .lightbox .lightbox-sidebar .sticky-content .simple-scroller {
    position: relative;
    overflow: hidden; }
    .desktop [data-ui-role="modal-dialog"].profile-lightbox .lightbox .lightbox-sidebar .sticky-content .simple-scroller .simple-scroller-viewport {
      overflow-x: hidden;
      height: 50px; }
  .desktop [data-ui-role="modal-dialog"].profile-lightbox .lightbox .lightbox-sidebar .sticky-content .nav-container {
    display: inline-block;
    height: auto;
    line-height: 50px;
    position: relative;
    text-align: center; }
    .desktop [data-ui-role="modal-dialog"].profile-lightbox .lightbox .lightbox-sidebar .sticky-content .nav-container .nav.center-nav {
      display: inline-block; }
    .desktop [data-ui-role="modal-dialog"].profile-lightbox .lightbox .lightbox-sidebar .sticky-content .nav-container.persona-nav {
      display: none; }
      .desktop [data-ui-role="modal-dialog"].profile-lightbox .lightbox .lightbox-sidebar .sticky-content .nav-container.persona-nav .nav.center-nav {
        display: block; }

.mobile .transparent-overlay {
  position: fixed;
  right: 0;
  left: 0;
  overflow: hidden; }

.mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox {
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); }
  .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .lightbox {
    overflow: auto; }
  .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container {
    max-width: 100%; }
    .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .dialog-body {
      border-radius: 0;
      height: 100%; }
      .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .dialog-body .main-container {
        top: 0;
        left: 0;
        z-index: 2;
        height: 0;
        width: 100%;
        padding-bottom: 100%;
        position: absolute; }
        .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .dialog-body .main-container .profile-look {
          position: absolute;
          top: 0;
          width: 0;
          height: 100%;
          width: 100%; }
      .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .dialog-body .lightbox-sidebar {
        z-index: 2;
        overflow: hidden; }
        .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .dialog-body .lightbox-sidebar .sidebar-content {
          height: 100%;
          overflow: auto; }
        .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .dialog-body .lightbox-sidebar .widgets {
          position: absolute;
          bottom: 50px;
          display: inline-block;
          z-index: 5;
          width: calc(100% - 50px); }
          .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .dialog-body .lightbox-sidebar .widgets .display-name .display-name-text {
            max-width: 100%; }
        .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .dialog-body .lightbox-sidebar .sticky-container-wrap {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          z-index: 5; }
        .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .dialog-body .lightbox-sidebar .sidebar-panels {
          z-index: 4; }
    .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .dialog-header {
      display: flex;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
      width: 100%;
      justify-content: space-between;
      position: absolute;
      border-radius: 0;
      z-index: 999; }
      .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .dialog-header.non-transparent {
        background: #fff; }
        .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .dialog-header.non-transparent .dialog-x, .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .dialog-header.non-transparent .dialog-title, .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .dialog-header.non-transparent .edit-profile {
          color: #404040; }
    .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container:not(.confirm-dialog) .dialog-x {
      position: relative;
      line-height: 50px;
      padding-left: 15px;
      padding-bottom: 0; }
    .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .edit-profile {
      text-transform: uppercase;
      line-height: 50px;
      color: #fff;
      padding-right: 15px;
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal; }
    .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .shields {
      top: 65px; }
    .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .headpiece {
      position: relative;
      height: 0;
      padding-bottom: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end; }
      .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .headpiece::after {
        content: '';
        pointer-events: none;
        position: absolute;
        z-index: 4;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, #fff 100%); }
      .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .headpiece .widgets {
        background: transparent; }
        .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .headpiece .widgets .profile-headpiece {
          background: transparent; }
    .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .dialog-container .mobile-overlay .sticky-content {
      background: #fff;
      margin-top: 50px; }
  .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .sticky-content {
    background: transparent; }
  .mobile [data-ui-role="modal-dialog"].lightbox-dialog.profile-lightbox .simple-scroller .simple-scroller-viewport {
    height: auto; }
/*css!/common/withme/js/dialog/edit_profile/EditProfileDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
[data-ui-role="modal-dialog"].edit-profile-dialog .dialog-container {
  height: 470px; }

[data-ui-role="modal-dialog"].edit-profile-dialog .dialog-body {
  height: calc(100% - 50px);
  padding-bottom: 0; }

[data-ui-role="modal-dialog"].edit-profile-dialog .dialog-footer {
  background: rgba(255, 255, 255, 0.95);
  padding: 15px; }

[data-ui-role="modal-dialog"].edit-profile-dialog .profile {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: 100%; }
  [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset {
    padding: 0 15px; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset:not(:first-child) {
      margin-top: 10px; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset legend {
      margin-bottom: 10px; }
      [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset legend.edit-profile-header {
        text-transform: uppercase;
        color: #a8a8a8;
        font-size: 12px;
        margin: 0 15px 5px; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset.has-textarea-above {
      margin-top: 0px; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .change-profile {
      background: #fff; }
      [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .change-profile .change-profile-image {
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        margin-left: 40px; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .separator {
      background: #fff; }
      [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .separator::before {
        content: '';
        display: block;
        margin: 0 10px;
        border-bottom: solid 1px #d4d4d4; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset #location {
      cursor: pointer;
      color: #a8a8a8; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset label {
      text-transform: capitalize; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset textarea {
      width: 100%;
      border-radius: 0;
      height: 40px;
      overflow-y: auto;
      font-size: 12px;
      line-height: 18px; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset div.background-container {
      background-color: #fff;
      padding: 10px;
      width: 100%; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset div.background-container::after {
      clear: both;
      content: "";
      display: block; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .dropdown {
      width: 100%;
      margin-bottom: 5px;
      display: block;
      box-shadow: none; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .country .dropdown {
      margin-bottom: 0; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .change-icon {
      color: #deb359;
      margin-top: 18px;
      display: inline-block;
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 12px;
      letter-spacing: 1px;
      text-transform: uppercase;
      white-space: nowrap; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .change-profile-image-input {
      display: none; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .profile-icon,
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .age {
      float: left; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .age-container {
      margin-bottom: 10px; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .related-pref {
      float: right; }
      [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .related-pref label {
        text-indent: -9999em; }
      [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .related-pref label.change-icon {
        text-indent: 0; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .gender .related-pref {
      margin: 8px 0 -8px; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .looking_for {
      margin-bottom: 10px; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .affinity {
      width: 100%;
      display: flex; }
      [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .affinity .dropdown .dropdown-label {
        text-align: right; }
      [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .affinity .descriptor {
        display: block;
        width: inherit;
        padding: 0 10px;
        line-height: 40px;
        background: #fff; }
      [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .affinity .dropdown {
        margin-bottom: 0; }
    [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .description {
      color: #a8a8a8;
      font-size: 10px;
      margin-top: 3px; }
      [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .description .help-center {
        text-transform: capitalize; }

[data-ui-role="modal-dialog"].edit-profile-dialog .edit-profile-attribute.not-applicable {
  display: none; }

@media screen and (max-width: 469px) {
  .mobile [data-ui-role="modal-dialog"].edit-profile-dialog .dialog-body {
    padding-bottom: 70px; } }

html[dir="rtl"] [data-ui-role="modal-dialog"].edit-profile-dialog .profile fieldset .affinity .dropdown .dropdown-label {
  text-align: left; }
/*css!/common/withme/js/dialog/editProfileImage/EditProfileImageDialog.css*/
@charset "UTF-8";
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
[data-ui-role="modal-dialog"].edit-profile-image-dialog {
  width: 470px; }
  [data-ui-role="modal-dialog"].edit-profile-image-dialog .dialog-container[class] {
    padding: 0;
    min-height: 430px;
    max-height: 430px; }
  [data-ui-role="modal-dialog"].edit-profile-image-dialog .dialog-header a.cta {
    transition: opacity 0.15s; }
    [data-ui-role="modal-dialog"].edit-profile-image-dialog .dialog-header a.cta:hover {
      opacity: 0.75; }
    [data-ui-role="modal-dialog"].edit-profile-image-dialog .dialog-header a.cta:active {
      opacity: 0.5625; }
  [data-ui-role="modal-dialog"].edit-profile-image-dialog .dialog-footer .post {
    width: 100%; }
  [data-ui-role="modal-dialog"].edit-profile-image-dialog .custom-profile-input {
    display: none; }

.mobile [data-ui-role="modal-dialog"].edit-profile-image-dialog .dialog-container[class] {
  min-height: 100%;
  max-height: 100%; }

.mobile [data-ui-role="modal-dialog"].edit-profile-image-dialog .dialog-body {
  height: calc(100% - 90px);
  max-height: calc(100% - 90px);
  padding-bottom: 0; }

.mobile [data-ui-role="modal-dialog"].edit-profile-image-dialog .dialog-header .back-button {
  position: absolute;
  top: 25px;
  left: 25px;
  transform: translateX(-50%) translateY(-50%);
  width: 50px;
  height: 50px;
  text-align: center;
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 15px;
  cursor: pointer; }
  .mobile [data-ui-role="modal-dialog"].edit-profile-image-dialog .dialog-header .back-button::before {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
  .mobile [data-ui-role="modal-dialog"].edit-profile-image-dialog .dialog-header .back-button::before {
    content: ""; }
/*css!/common/withme/js/widget/profileActionBar/ProfileActionBar.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.profile-action-bar {
  display: flex; }
  .profile-action-bar .counts-container {
    display: flex;
    width: auto;
    margin: 0 15px 0 15px;
    height: 45px;
    border-bottom: 1px solid #f2f2f2; }
    .profile-action-bar .counts-container a {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      text-transform: uppercase;
      color: #404040; }
      .profile-action-bar .counts-container a .count {
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal;
        text-transform: uppercase;
        color: #404040; }
  .profile-action-bar .actions-container {
    align-items: flex-start;
    color: #404040;
    fill: #404040;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 40px;
    min-height: 40px; }
    .profile-action-bar .actions-container > li {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 40px;
      text-align: center;
      height: 40px; }
      .profile-action-bar .actions-container > li svg {
        width: 25px;
        height: 25px; }
  .profile-action-bar .follow-container {
    height: 40px; }
    .profile-action-bar .follow-container .follow-button {
      line-height: 30px;
      margin-right: 0;
      height: 30px;
      margin-top: 5px; }
  .profile-action-bar .btn {
    display: flex;
    align-items: center;
    background: none;
    padding: 0; }
    .profile-action-bar .btn:active {
      background: none; }
  .profile-action-bar .icon {
    width: 25px;
    height: 25px;
    min-width: 25px;
    padding: 2px; }
  .profile-action-bar:not(.is-abbreviated) .action-tag-container {
    display: none; }
  .profile-action-bar:not(.is-abbreviated) .action-tag,
  .profile-action-bar:not(.is-abbreviated) .count {
    display: none; }
  .profile-action-bar.is-abbreviated > li {
    justify-content: center;
    transition: opacity 0.15s;
    width: auto;
    padding-left: 15px; }
    .profile-action-bar.is-abbreviated > li:hover {
      opacity: 0.75; }
    .profile-action-bar.is-abbreviated > li:active {
      opacity: 0.5625; }
  .profile-action-bar.is-abbreviated .btn {
    padding: 0; }
  .profile-action-bar.is-abbreviated .action-more-container {
    flex-grow: 1;
    justify-content: flex-end;
    padding-left: 0;
    order: 4; }
  .profile-action-bar.is-abbreviated .action-more {
    position: relative;
    width: 50px; }
    .profile-action-bar.is-abbreviated .action-more .icon-more {
      position: absolute;
      top: 50%;
      right: 0;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, -50%); }
  .profile-action-bar.is-abbreviated .count {
    font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    font-style: normal;
    margin: 0 0 0 5px;
    color: #a8a8a8; }
  .profile-action-bar.is-abbreviated:not(.has-counts) .count {
    display: none; }
/*css!/common/withme/js/dialog/itempicker/ItemPickerDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.itempicker-dialog > .dialog-container {
  max-height: unset;
  z-index: 0; }

.itempicker-dialog .dialog-body {
  padding: 15px; }

.itempicker-dialog .wish-list-container-container {
  margin-top: 10px;
  height: calc(100% - 83px);
  padding: 0; }
  .itempicker-dialog .wish-list-container-container .wish-list-container {
    max-height: calc(100% - 10px);
    overflow-y: auto;
    background-color: #fff; }
    .itempicker-dialog .wish-list-container-container .wish-list-container .wishlist-item {
      cursor: pointer; }
      .itempicker-dialog .wish-list-container-container .wish-list-container .wishlist-item:hover {
        background-color: #404040;
        color: #fff; }

.itempicker-dialog .id-go-to-shop {
  width: 100%;
  text-align: center;
  cursor: pointer;
  line-height: 40px;
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.2em; }

.mobile .itempicker-dialog .dialog-title {
  /* (bshen): this only works for english, we'd want to discuss this with product about rules for what gets truncated */
  max-width: calc(100% - 150px); }

.mobile .itempicker-dialog .wish-list-container-container {
  max-height: calc(100vh - 137px); }
  .mobile .itempicker-dialog .wish-list-container-container .wish-list-container {
    max-height: calc(100vh - 137px); }

.mobile .itempicker-dialog section.dialog-body {
  min-height: unset; }

.mobile .itempicker-dialog .id-go-to-shop {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0; }
/*css!/common/withme/js/widget/filter/SearchWidget.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.search-widget .search {
  height: 40px;
  font-size: 12px;
  line-height: 30px;
  position: relative; }
  .search-widget .search > input {
    font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 12px;
    line-height: 1.4; }
  .search-widget .search > [type="text"].is-filled {
    box-shadow: inset 0 0 0 1px #404040; }
  .search-widget .search > [type="text"] {
    box-shadow: inset 0 0 0 1px #d4d4d4;
    width: 100%;
    height: 40px;
    font-size: 12px;
    padding: 0 40px 0 10px;
    color: #404040; }
    .search-widget .search > [type="text"]::placeholder {
      color: #a8a8a8; }
  .search-widget .search > [type="reset"] {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    width: 40px;
    height: 40px;
    color: #404040;
    text-align: center;
    background: none;
    padding: 0;
    font-size: 14px; }
    .search-widget .search > [type="reset"]:active {
      background: none; }
    .search-widget .search > [type="reset"]:hover {
      color: #404040; }
  .search-widget .search > [type="submit"] {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    padding: 0;
    height: 40px; }
  .search-widget .search > [type="text"]:not(:focus) ~ [type="submit"] {
    background: none;
    color: #a8a8a8; }
  .search-widget .search > .is-filled:not(:focus) ~ [type="submit"] {
    color: #404040;
    background: none; }
  .search-widget .search > [type="text"]:focus ~ [type="submit"],
  .search-widget .search > [type="text"]:not(:focus) ~ [type="reset"]:active ~ [type="submit"] {
    background: #404040;
    color: #deb359; }

.search-widget .search.demo > [type="text"]:not(.focus) ~ [type="submit"] {
  background: none;
  color: #a8a8a8; }

.search-widget .search.demo > .is-filled:not(.focus) ~ [type="submit"] {
  color: #404040;
  background: none; }

.search-widget .search.demo > [type="text"].focus ~ [type="submit"],
.search-widget .search.demo > [type="text"]:not(.focus) ~ [type="reset"].active ~ [type="submit"] {
  background: #404040;
  color: #deb359; }

.search-widget .search.demo > [type="text"].is-filled.focus ~ [type="reset"] {
  opacity: 1;
  cursor: pointer; }

.search-widget.resettable .search > [type="reset"] {
  display: block;
  cursor: pointer;
  opacity: 1; }

.search-widget.resettable .search > [type="submit"] {
  display: none; }

.dark-theme .search-widget .search > [type="text"] {
  background: none;
  box-shadow: inset 0 0 0 1px #a8a8a8;
  color: #fff; }
  .dark-theme .search-widget .search > [type="text"]::placeholder {
    color: #a8a8a8; }
  .dark-theme .search-widget .search > [type="text"]:focus {
    color: #fff;
    box-shadow: inset 0 0 0 1px #fff; }

.dark-theme .search-widget .search > [type="reset"] {
  color: #a8a8a8; }

.dark-theme .search-widget .search > [type="submit"] {
  color: #fff; }

.dark-theme .search-widget .search > .is-filled:not(:focus) ~ [type="submit"] {
  color: #fff; }

.dark-theme .search-widget .search > [type="text"]:focus ~ [type="submit"],
.dark-theme .search-widget .search > [type="text"]:not(:focus) ~ [type="reset"]:active ~ [type="submit"] {
  background: none;
  color: #fff; }
/*css!/common/withme/js/dialog/itempicker/WishlistItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.wishlist-item {
  display: flex; }
  .wishlist-item > .product-img {
    width: 110px;
    height: 110px;
    margin: 10px;
    flex-shrink: 0;
    position: relative; }
    .wishlist-item > .product-img > .ap-badge {
      position: absolute;
      top: 11px;
      right: 11px; }
    .wishlist-item > .product-img > .cover-image {
      background-color: #f2f2f2; }
  .wishlist-item > .product-info {
    flex-grow: 1;
    padding: 10px;
    position: relative; }
    .wishlist-item > .product-info > .product-name {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal; }
    .wishlist-item > .product-info > .price-info {
      position: absolute;
      bottom: 10px; }

.wishlist-item.placeholder-error.error .placeholder-container
.cover-image-placeholder {
  width: 110px;
  height: 110px; }
/*css!/common/withme/js/dialog/shopTogetherCreationDialog/ShopTogetherCreationDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.shop-together-creation-dialog .content {
  padding: 15px 15px 70px; }

.shop-together-creation-dialog .dialog-footer {
  background: rgba(255, 255, 255, 0.9); }

.shop-together-creation-dialog .btn-primary.continue {
  background-color: #404040; }
  .shop-together-creation-dialog .btn-primary.continue:disabled {
    background-color: #d4d4d4; }
/*css!/common/withme/js/dialog/choose_room/ChooseRoomDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.choose-room-dialog .room-list-header {
  font-size: 15px;
  font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #404040;
  padding: 15px 0; }

.choose-room-dialog.is-padded .public-rooms {
  margin-bottom: 50px; }
/*css!/common/withme/js/widget/profileDetailSidebar/ProfileAbout.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.profile-about {
  margin: 30px 15px; }
  .profile-about .info-col {
    flex: 1;
    text-align: center;
    cursor: default; }
    .profile-about .info-col .info-col-header {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      color: #a8a8a8;
      font-size: 10px;
      margin: 0 auto; }
    .profile-about .info-col .info-col-body {
      font-size: 30px;
      margin-top: 15px; }
      .profile-about .info-col .info-col-body svg {
        height: 30px;
        width: 30px; }
    .profile-about .info-col .info-col-footer {
      font-size: 12px; }
    .profile-about .info-col.gender .info-col-footer {
      text-transform: lowercase; }
    .profile-about .info-col.location .info-col-footer {
      text-transform: uppercase; }
      .profile-about .info-col.location .info-col-footer.location-hidden {
        text-transform: lowercase; }
  .profile-about .title {
    text-transform: uppercase; }
  .profile-about .info-row {
    font-size: 15px;
    position: relative;
    cursor: default; }
    .profile-about .info-row > .title {
      margin-bottom: 15px; }
    .profile-about .info-row.current-room .content {
      color: #a8a8a8;
      display: flex; }
      .profile-about .info-row.current-room .content .room-name {
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal;
        cursor: pointer;
        color: #404040;
        margin-left: 10px;
        line-height: 30px; }
      .profile-about .info-row.current-room .content .room-image {
        cursor: pointer;
        width: 30px;
        height: 30px; }
    .profile-about .info-row.creator-shop .content {
      flex-direction: column; }
    .profile-about .info-row.creator-shop .creator-shop-product-title {
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      color: #a8a8a8;
      font-size: 10px;
      text-transform: uppercase; }
    .profile-about .info-row.creator-shop .creator-shop-product-list-container {
      width: 315px;
      margin: 8px 0; }
      .profile-about .info-row.creator-shop .creator-shop-product-list-container .creator-product-list {
        display: flex; }
    .profile-about .info-row.creator-shop button {
      font-size: 12px;
      height: 30px; }
    .profile-about .info-row .horizontal-divider {
      height: 1px;
      width: 100%;
      border-bottom: 1px solid #d4d4d4;
      margin: 30px 0; }
  .profile-about .basic-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
    .profile-about .basic-info .horizontal-divider {
      margin-top: 25px;
      width: 100%; }
    .profile-about .basic-info .vertical-divider {
      width: 1px;
      border-left: 1px solid #d4d4d4;
      margin: 0 7px; }
  .profile-about .empty {
    color: #a8a8a8; }
    .profile-about .empty .affinity-text {
      font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: normal;
      font-style: normal; }
  .profile-about .affinity-title {
    width: 100px; }
  .profile-about .affinity-text {
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }
  .profile-about .is-creator {
    margin-top: 15px; }
/*css!/common/withme/js/widget/profileDetailSidebar/CreatorProductListItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.creator-product-list-item {
  width: 75px;
  height: 75px;
  margin-right: 5px;
  position: relative;
  cursor: pointer;
  background: #d4d4d4; }
  .creator-product-list-item:hover {
    background: #a8a8a8; }
  .creator-product-list-item img {
    width: 75px;
    height: 75px; }
  .creator-product-list-item .ap {
    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
    transition: opacity 0.15s; }
/*css!/common/withme/js/widget/profileDetailSidebar/ProfileCreatorStatus.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.creator-status {
  display: none; }
  .creator-status.show-status {
    display: block; }
  .creator-status-tags {
    display: flex;
    flex-wrap: wrap; }
  .creator-status-tag {
    background-color: #000;
    color: #fff;
    flex: 0 0 auto;
    font-size: .667em;
    font-weight: 600;
    line-height: 1.8;
    margin: 0 .5em .5em 0;
    padding: 0 .5em;
    text-transform: uppercase; }
    .creator-status-tag--active {
      background-image: linear-gradient(to right, #319571, #60C000); }
    .creator-status-tag--master {
      background-image: linear-gradient(to right, #8B077E, #E70076); }
    .creator-status-tag--maven {
      background-image: linear-gradient(to right, #154387, #2A80E5); }
    .creator-status-tag--pro, .creator-status-tag--top {
      background-image: linear-gradient(to right, #F18200, #E90070); }
    .creator-status-tag--tier {
      background-image: linear-gradient(to right, #38209B, #7223B0); }
    .creator-status-tag--veteran {
      background-image: linear-gradient(to right, #2B818C, #36DBD1); }
/*css!/common/withme/js/widget/profileDetailSidebar/ProfileHeadpiece.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.profile-headpiece {
  background: #fff;
  padding-bottom: 15px; }
  .profile-headpiece .main-info {
    min-height: 82px;
    height: auto; }
    .profile-headpiece .main-info.open {
      height: auto; }
    .profile-headpiece .main-info .profile-icon {
      width: 75px;
      height: 75px;
      top: 5px; }
      .profile-headpiece .main-info .profile-icon .profile-icon-image {
        width: 75px;
        height: 75px; }
      .profile-headpiece .main-info .profile-icon .online-status {
        width: 16px;
        height: 16px;
        border: 2px solid #fff; }
    .profile-headpiece .main-info .text .at-avatar-name {
      margin-top: 5px; }
/*css!/common/withme/js/widget/profileLook/ProfileLook.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.profile-look {
  height: 100%;
  position: relative;
  color: #fff; }
  .profile-look .avatar-container {
    background: linear-gradient(to bottom, #93939b 0%, #b0b0b7 25%, #b5b4bc 50%, #ebebeb 75%, #b5b1b5 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%; }
    .profile-look .avatar-container.transparent-avatar {
      border: 4px solid #fff;
      background: none; }
/*css!/common/withme/js/widget/profileLook/ProfileLookError.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.profile-look-error {
  width: 100%;
  height: 369px;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.45) 25%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.45) 75%, transparent 100%);
  opacity: 0.8;
  color: #fff;
  text-align: center;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center; }
  .profile-look-error .error-title {
    text-transform: uppercase;
    size: 14px;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal; }
  .profile-look-error .error-text {
    margin: 10px 35px 15px; }
/*css!/common/withme/js/widget/shields/Shields.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.shields {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 3;
  pointer-events: none; }
  .shields .btn {
    pointer-events: initial;
    display: block;
    margin-bottom: 5px;
    width: 25px;
    height: 25px;
    min-height: 25px;
    padding: 0; }
    .shields .btn svg {
      width: 25px;
      height: 25px; }
    .shields .btn:disabled {
      cursor: default;
      opacity: 1; }
  .shields .btn.host_subscriptions {
    cursor: pointer; }
  .shields .btn.nft-owner {
    background: conic-gradient(from 167.84deg at 46% 50%, #2F1F00 -4deg, #2F1F00 95.47deg, #7D5200 142.56deg, #2F1F00 188.53deg, #2F1F00 289.6deg, #7D5200 324.81deg, #2F1F00 356deg, #2F1F00 455.47deg); }

html[dir="rtl"] .profile-look .shields {
  right: auto;
  left: 15px; }
/*css!/common/withme/js/dialog/NFTIntroDialog/NFTIntroDialog.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
[data-ui-role="modal-dialog"].nft-intro-dialog {
  display: flex;
  min-width: 1030px;
  max-width: 1030px;
  height: 525px;
  background: rgba(0, 0, 0, 0.75); }
  [data-ui-role="modal-dialog"].nft-intro-dialog .column-1 {
    width: 700px; }
  [data-ui-role="modal-dialog"].nft-intro-dialog .column-2 {
    width: 330px;
    display: flex;
    flex-direction: column;
    color: #fff;
    padding: 15px; }
    [data-ui-role="modal-dialog"].nft-intro-dialog .column-2 h1 {
      text-align: center;
      font-size: 12px;
      color: #a8a8a8; }
      [data-ui-role="modal-dialog"].nft-intro-dialog .column-2 h1 span {
        display: block;
        font-size: 24px;
        color: #fff; }
    [data-ui-role="modal-dialog"].nft-intro-dialog .column-2 p {
      text-align: left; }
    [data-ui-role="modal-dialog"].nft-intro-dialog .column-2 .go-to-shop span {
      margin: 0 5px;
      color: #deb359; }
    [data-ui-role="modal-dialog"].nft-intro-dialog .column-2 button.confirmation {
      height: 40px;
      width: 300px;
      border-style: none;
      position: absolute;
      bottom: 15px;
      right: 15px; }
/*css!/common/withme/js/widget/profileDetailSidebar/ProfileFriendsListItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.profile-friends-list-item {
  background: #fff;
  border-bottom: solid 1px #d4d4d4;
  width: 100%;
  transition: opacity 0.15s;
  display: grid;
  grid: auto/minmax(0, 1fr) 95px;
  grid-gap: 10px;
  align-items: center;
  padding: 0 15px;
  height: 70px; }
  .profile-friends-list-item .profile-info .dual-name {
    height: 100%;
    margin-top: auto;
    margin-bottom: auto; }
/*css!/common/withme/js/widget/profileDetailSidebar/ProfileUserListPresenter.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.profile-user-list-presenter .search-container {
  margin: 10px; }

.profile-user-list-presenter section > article.profile-list-item {
  margin: 0;
  border-bottom: solid 1px #d4d4d4;
  width: 100%; }
  .profile-user-list-presenter section > article.profile-list-item .profile-info, .profile-user-list-presenter section > article.profile-list-item .user-info {
    width: 100%; }
  .profile-user-list-presenter section > article.profile-list-item button {
    cursor: pointer; }
  .profile-user-list-presenter section > article.profile-list-item .follow-button.following {
    padding: 0; }

.profile-user-list-presenter section > article.friends-drawer-list-item {
  padding: 15px;
  background: #fff; }
/*css!/common/withme/js/mode/friends/ProfileListItem.css*/
/*
Note: This is not part of any standard, but is supported in all browsers we care
about except Firefox. Until Firefox has a native solution for multi-line
wrapping, please do not try to hack it to make it work. It is not worth the
maintenance cost.
*/
.profile-list-item {
  transition: opacity 0.15s;
  display: grid;
  grid: auto/minmax(0, 1fr) 95px;
  grid-gap: 10px;
  align-items: center;
  padding: 0 15px;
  background-color: #fff;
  height: 70px; }
  .profile-list-item .profile-info {
    display: flex; }
    .profile-list-item .profile-info .disabled-txt {
      font-size: 14px; }