/*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/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/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/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/waf/js/nav/GlobalNavBase.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.
*/
.global-nav {
  top: 0;
  left: 0;
  width: 100%;
  position: fixed;
  transform: translateZ(0);
  z-index: 500;
  font-size: 12px;
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  background: #404040;
  color: #fff;
  padding: 0 15px;
  cursor: default;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch; }
  .global-nav .drawer-container-sibling {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch; }
  .global-nav .system-tray {
    flex-basis: auto;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    flex: 1 0; }
    .global-nav .system-tray > div {
      height: 50px;
      margin-right: 10px; }
      .global-nav .system-tray > div:first-child {
        margin-left: 15px; }
    .global-nav .system-tray .update-indicator-placeholder {
      display: none; }
    .global-nav .system-tray .logo {
      order: 1;
      width: 30px;
      overflow: hidden; }
      .global-nav .system-tray .logo svg {
        width: 30px;
        height: 50px; }
      .global-nav .system-tray .logo svg.vipLogo {
        display: none;
        color: #deb359; }
      .global-nav .system-tray .logo svg.imvuLogo {
        display: inline-block; }
      .global-nav .system-tray .logo.logoVIP {
        width: 40px;
        height: 60px;
        margin: 0 10px; }
        .global-nav .system-tray .logo.logoVIP .vipLogo {
          display: inline-block; }
        .global-nav .system-tray .logo.logoVIP .imvuLogo {
          display: none; }
      .global-nav .system-tray .logo.logoVIP:hover {
        opacity: 1; }
    .global-nav .system-tray .qa-nav {
      order: 2; }
  .global-nav .main-nav {
    flex-basis: auto;
    display: inline-flex;
    display: -webkit-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center; }
    .global-nav .main-nav .nav-home {
      order: 1; }
    .global-nav .main-nav .nav-feed {
      order: 2; }
    .global-nav .main-nav .nav-dressup {
      order: 3; }
    .global-nav .main-nav .nav-shop {
      order: 4; }
    .global-nav .main-nav .nav-chat {
      order: 5; }
  .global-nav .secondary-nav {
    flex-basis: auto;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    flex: 1 0; }
    .global-nav .secondary-nav .nav-vcoin {
      order: 1; }
    .global-nav .secondary-nav .nav-credits {
      order: 2; }
    .global-nav .secondary-nav .nav-shoppingCart {
      order: 3;
      position: relative; }
    .global-nav .secondary-nav .nav-activityCenter {
      order: 4; }
    .global-nav .secondary-nav .nav-chats {
      order: 5; }
    .global-nav .secondary-nav .nav-messages {
      order: 6; }
    .global-nav .secondary-nav .nav-friends {
      order: 7; }
    .global-nav .secondary-nav .nav-account {
      order: 8;
      width: 45px; }
      .global-nav .secondary-nav .nav-account a {
        width: 30px;
        height: 30px; }
  .global-nav li {
    position: relative; }
    .global-nav li a {
      width: 100%;
      height: 100%; }
  .global-nav:not(.reveal-submode-specific) .submode-specific {
    display: none; }
  .global-nav .nav-item {
    height: 100%;
    align-items: center;
    display: grid;
    grid-auto-flow: column;
    place-content: center; }
    .global-nav .nav-item a {
      display: grid;
      align-self: center; }
    .global-nav .nav-item.active, .global-nav .nav-item.open-drawer {
      color: #deb359;
      fill: #deb359; }
      .global-nav .nav-item.active > a, .global-nav .nav-item.open-drawer > a {
        box-shadow: none;
        color: #deb359;
        fill: #deb359; }
        .global-nav .nav-item.active > a:hover, .global-nav .nav-item.open-drawer > a:hover {
          opacity: 1; }
  .global-nav [data-count]:not([data-count='0'])::after {
    display: block;
    position: absolute;
    top: 12.5%;
    left: calc(100% - 10px);
    content: attr(data-count);
    color: #fff;
    background-color: #deb359;
    border-radius: 40px;
    width: 17px;
    height: 17px;
    line-height: 17px;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0; }
  .global-nav [data-count]:not([data-count='0']):not([data-count='1']):not([data-count='2']):not([data-count='3']):not([data-count='4']):not([data-count='5']):not([data-count='6']):not([data-count='7']):not([data-count='8']):not([data-count='9'])::after {
    padding: 0 2px; }
  .global-nav [data-count]:not([data-count='0'])[data-count='99+']::after {
    padding: 0 5px 0 4px !important; }

.desktop .global-nav {
  font-size: 12px;
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  padding: 0; }

.mobile .global-nav {
  transition: background 0.25s ease;
  background: #404040;
  overflow: visible;
  position: fixed;
  z-index: 500;
  padding: 0;
  white-space: nowrap; }
  .mobile .global-nav .nav-item {
    justify-content: start; }
  .mobile .global-nav.open {
    z-index: 502; }
  .mobile .global-nav .tray {
    z-index: 1000; }

.global-nav {
  transition: opacity 0.075s;
  opacity: 1; }
  .global-nav.loading {
    opacity: 0; }
  .global-nav.hide {
    display: none; }

html[dir="rtl"] .global-nav .drawer-container-sibling > li {
  margin: 0 0 0 15px; }

html[dir="rtl"] .global-nav .drawer-container-sibling .system-tray > div {
  margin: 0 0 0 15px; }

html[dir="rtl"] .global-nav .drawer-container-sibling .system-tray .logo {
  margin: 0 15px 0 0; }

html[dir="rtl"] .global-nav .drawer-container-sibling .system-tray .qa-nav {
  direction: ltr;
  margin: 0 10px 0 0; }

html[dir="rtl"] .global-nav .drawer-container-sibling .secondary-nav {
  justify-content: flex-start; }
  html[dir="rtl"] .global-nav .drawer-container-sibling .secondary-nav li:first-child {
    margin: 0 15px 0 15px; }
  html[dir="rtl"] .global-nav .drawer-container-sibling .secondary-nav .nav-vcoin {
    order: 8;
    direction: ltr; }
  html[dir="rtl"] .global-nav .drawer-container-sibling .secondary-nav .nav-credits {
    order: 7;
    direction: ltr; }
    html[dir="rtl"] .global-nav .drawer-container-sibling .secondary-nav .nav-credits a {
      margin: 0 5px 0 0; }
      html[dir="rtl"] .global-nav .drawer-container-sibling .secondary-nav .nav-credits a span {
        padding: 5px 5px 5px 0; }
  html[dir="rtl"] .global-nav .drawer-container-sibling .secondary-nav .nav-shoppingCart {
    order: 6; }
  html[dir="rtl"] .global-nav .drawer-container-sibling .secondary-nav .nav-activityCenter {
    order: 5; }
  html[dir="rtl"] .global-nav .drawer-container-sibling .secondary-nav .nav-chats {
    order: 4; }
  html[dir="rtl"] .global-nav .drawer-container-sibling .secondary-nav .nav-messages {
    order: 3; }
  html[dir="rtl"] .global-nav .drawer-container-sibling .secondary-nav .nav-friends {
    order: 2; }
  html[dir="rtl"] .global-nav .drawer-container-sibling .secondary-nav .nav-account {
    order: 1;
    width: 30px;
    margin: 0 0 0 15px; }
    html[dir="rtl"] .global-nav .drawer-container-sibling .secondary-nav .nav-account > .profile-icon {
      margin: 0; }

html[dir="rtl"] .mobile .drawer-container-sibling .system-tray {
  justify-content: flex-end; }

html[dir="rtl"] .desktop .global-nav .drawer-container-sibling .secondary-nav {
  flex-direction: row-reverse; }
/*css!/common/withme/js/widget/insertErrorEmulation/InsertErrorEmulation.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.
*/
.insert-error-emulation {
  padding: 15px; }
  .insert-error-emulation .write-toggle-container {
    height: 50px;
    display: grid;
    grid: auto / auto auto;
    grid-gap: 10px;
    align-items: center;
    justify-content: center; }
  .insert-error-emulation .dialog-footer {
    display: flex;
    flex-direction: column; }
/*css!/common/withme/js/widget/insertErrorEmulation/ErrorEmulationItem.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.
*/
.error-emulation-item {
  padding: 1px;
  background: #ff374d;
  color: #fff; }
  .error-emulation-item .error-emulation-fields {
    display: flex; }
    .error-emulation-item .error-emulation-fields button {
      background-color: #000;
      font-size: 20px; }
      .error-emulation-item .error-emulation-fields button.remove {
        color: #ff374d; }
      .error-emulation-item .error-emulation-fields button.update {
        color: #00FF9C; }
    .error-emulation-item .error-emulation-fields .error-emulation-input {
      display: inline-flex;
      border: thin solid #ff374d; }
      .error-emulation-item .error-emulation-fields .error-emulation-input:nth-child(2) {
        max-width: 100px; }
      .error-emulation-item .error-emulation-fields .error-emulation-input:nth-child(3) {
        max-width: 50px; }
      .error-emulation-item .error-emulation-fields .error-emulation-input:nth-child(4) {
        max-width: 200px; }
      .error-emulation-item .error-emulation-fields .error-emulation-input input {
        width: 100%; }
    .error-emulation-item .error-emulation-fields .query-match-arrow div {
      font-size: 20px;
      text-align: center;
      line-height: 2;
      padding: 0 5px; }
/*css!/common/withme/js/widget/insertErrorEmulation/QueryMatch.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.
*/
.query-match {
  padding: 0;
  background: #000;
  color: #fff;
  display: flex; }
/*css!/common/withme/js/widget/insertErrorEmulation/QueryMatchItem.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.
*/
.query-match-item button {
  font-size: 20px; }
  .query-match-item button.remove {
    color: #ff374d;
    background-color: #fff; }
/*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/QANav.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.
*/
.qa-nav {
  position: relative;
  background: rgba(255, 55, 77, 0.5625);
  border-left: 3px solid #ff374d;
  border-right: 3px solid #ff374d;
  padding: 0 15px;
  color: #fff;
  pointer-events: all; }
  .qa-nav .qa-nav-force-production {
    font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    font-style: normal;
    display: none;
    flex-direction: column;
    white-space: nowrap;
    padding: 10px;
    background: rgba(64, 64, 64, 0.75);
    text-transform: capitalize;
    letter-spacing: 0;
    z-index: 1; }
  .qa-nav .qa-nav-row {
    width: 0; }
  .qa-nav:hover .qa-nav-row {
    width: auto; }
  .qa-nav:hover .qa-nav-force-production {
    display: flex; }
  .qa-nav .qa-nav-force-production-label.qa-nav-force-production-label {
    display: flex;
    align-items: center;
    width: 160px;
    cursor: pointer;
    line-height: 1; }
  .qa-nav .qa-nav-web-pool {
    font-weight: bold; }

.desktop .qa-nav .qa-nav-force-production-row {
  display: flex;
  align-items: center;
  height: 50px; }

.desktop .qa-nav .qa-nav-force-production {
  transform: translateY(-30%); }

.desktop .qa-nav:hover .qa-nav-force-production {
  margin-left: 40px; }

.mobile .tray .qa-nav {
  border: none;
  width: 100%;
  padding: 5px 15px;
  background: rgba(255, 55, 77, 0.75);
  color: #fff;
  line-height: 19px; }
  .mobile .tray .qa-nav .qa-nav-force-production {
    display: flex;
    background: none;
    padding: 0;
    margin: 10px 0; }
  .mobile .tray .qa-nav .qa-nav-row {
    width: auto; }
  .mobile .tray .qa-nav .qa-nav-force-production-row {
    display: none; }
/*css!/unicorns_sections/welcome/desktop/js/nav/LoggedOutTopNav.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.
*/
.global-nav .secondary-nav {
  font-size: 20px;
  color: #a8a8a8; }
  .global-nav .secondary-nav > .sign-in {
    font-size: 12px;
    pointer-events: auto;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    margin-right: 15px;
    letter-spacing: 1px; }
  .global-nav .secondary-nav button {
    display: block; }
  .global-nav .secondary-nav .have-an-account {
    font-size: 12px;
    font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    padding-right: 5px;
    letter-spacing: 0px; }

.global-nav .logo {
  cursor: pointer; }

.mobile .global-nav.logged-out .have-an-account {
  display: none; }

html[dir="rtl"] .global-nav .secondary-nav > .sign-in {
  margin-right: 0;
  margin-left: 15px; }

html[dir="rtl"] .global-nav .secondary-nav .have-an-account {
  padding-right: 0;
  padding-left: 5px; }
/*css!/unicorns_sections/welcome/js/mixins/InputMixin.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.
*/
.holder-label {
  display: flex;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  justify-content: space-between; }
  .holder-label > .info {
    transition: top 250ms;
    position: relative;
    top: 20px;
    right: 0;
    bottom: 0;
    left: 0;
    visibility: hidden;
    color: #a8a8a8;
    text-align: left; }
    .holder-label > .info.show-label {
      visibility: visible;
      top: 0px; }
  .holder-label > .content {
    flex-grow: 0;
    flex-shrink: 0; }

.error > .holder-label {
  text-transform: initial;
  letter-spacing: 0px; }
  .error > .holder-label > .info {
    color: #ff374d; }
/*css!/unicorns_sections/welcome/js/mode/landing/LoginDialog.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.
*/
div[data-ui-role="modal-dialog"].login-dialog .dialog-container {
  background-color: #e5e5e5 !important; }
  div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body {
    padding-bottom: 0;
    height: auto; }
    div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body .message {
      text-align: center;
      padding: 30px 0 10px 0; }
    div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form {
      padding: 20px 0 20px 0; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form:not(.can-signup) .signup {
        display: none; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form p {
        margin: 0; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .label {
        position: relative;
        padding: 0 100px 5px; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .languages {
        padding: 5px 0 12px; }
        div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .languages a.language {
          color: #404040; }
        div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .languages a.language.current_language {
          font-weight: bold;
          color: #404040; }
        div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .languages .more-locales {
          background: transparent;
          min-height: 18px;
          transform: scale(1.6); }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .label-first .holder-label {
        cursor: default; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .label-second {
        padding-bottom: 0;
        margin-bottom: 2px; }
        div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .label-second .holder-label {
          display: none; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .label-forgot {
        margin-bottom: 30px; }
        div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .label-forgot .forgot-password-link {
          text-transform: initial;
          display: inline-block; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .label-log-in {
        padding-bottom: 0;
        margin-bottom: 7px; }
        div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .label-log-in .btn-primary {
          width: 100%; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .label-or {
        color: #404040;
        font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 15px;
        line-height: 22px;
        text-align: center;
        margin-bottom: 2px; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .label-apple {
        margin-bottom: 3px; }
        div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .label-apple .btn-apple {
          width: 100%;
          background-color: #000;
          color: #fff; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .label-fb .btn-fb {
        width: 100%; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form input {
        display: block;
        width: 100%;
        margin: 2px auto;
        height: 40px;
        line-height: normal;
        font-size: 12px;
        padding: 10px; }
        div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form input[name="avatarname"] {
          margin-top: 2px; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .signup {
        display: block;
        width: 100%;
        text-align: center;
        color: #404040;
        cursor: default;
        height: 16px;
        line-height: 16px;
        margin: 30px 0 0 0; }
        div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .signup .id-signup {
          cursor: pointer; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .need-help {
        display: block;
        width: 100%;
        text-align: center;
        height: 16px;
        line-height: 16px;
        bottom: 15px;
        margin-top: 16px; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .submit button {
        display: block;
        width: 235px;
        margin: 0 auto;
        margin-top: 40px;
        margin-bottom: 15px; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .submit .error-message {
        display: block !important;
        color: #ff374d;
        opacity: 1;
        transition: all 0.8s ease;
        height: auto;
        overflow: hidden;
        text-align: left;
        padding-left: 100px;
        padding-right: 100px; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .submit .error-message:not(.active) {
        height: 0px;
        opacity: 0; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .submit .error-message.active {
        margin-bottom: 10px; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .text-spacing {
        padding-top: 10px; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .toggle-password-visibility {
        font-size: 20px;
        color: #404040;
        position: absolute;
        right: 0;
        top: calc(50% - 15px);
        line-height: 30px;
        height: 30px;
        width: 30px;
        text-align: center;
        cursor: pointer;
        display: none; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .login_password input:focus + .toggle-password-visibility, div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .toggle-password-visibility:hover {
        display: block; }
      div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .privacy-agreements {
        font-size: 10px;
        width: 275px;
        margin: 10px auto;
        display: block;
        margin-top: 20px; }

.mobile div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .label {
  padding: 0 60px 5px; }

.mobile div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .label-log-in {
  margin-bottom: 0px; }

.mobile div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .label-or {
  margin-bottom: 0px; }

.mobile div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .label-apple {
  margin-bottom: 5px; }

.mobile div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .signup {
  height: 32px; }

@media only screen and (max-width: 320px) {
  .mobile div[data-ui-role="modal-dialog"].login-dialog .dialog-container .dialog-body form .label-fb .btn-fb {
    font-size: 10px; } }
/*css!/unicorns_sections/welcome/js/dialog/privacy_policy/PrivacyPolicyMinorsPendingDialog.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.
*/
.privacy-policy-minors-pending-dialog .copy-body {
  text-align: center;
  margin: 40px;
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal; }

.privacy-policy-minors-pending-dialog .privacy-policy-link {
  text-transform: capitalize;
  text-align: center;
  margin-bottom: 15px; }
/*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!/unicorns_sections/welcome/js/dialog/privacy_policy/PrivacyPolicyAdultDialog.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.
*/
.privacy-policy-adult-dialog .copy-body {
  text-align: center;
  margin: 40px;
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal; }

.privacy-policy-adult-dialog .privacy-policy-link {
  text-transform: capitalize;
  text-align: center;
  margin-bottom: 15px; }

.privacy-policy-adult-dialog .accept-button {
  margin-top: 80px;
  width: 100%;
  text-align: center; }
/*css!/unicorns_sections/welcome/js/dialog/privacy_policy/PrivacyPolicyMinorsDialog.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.
*/
.privacy-policy-minors-dialog .dialog-body {
  justify-content: flex-start; }

.privacy-policy-minors-dialog .privacy-policy-minors-body {
  text-align: center;
  margin: 20px;
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal; }

.privacy-policy-minors-dialog .privacy-policy-minors-form {
  margin: 0 10px; }

.privacy-policy-minors-dialog .privacy-policy-minors-form-title {
  text-align: center; }

.privacy-policy-minors-dialog .fieldset {
  margin: 10px 0; }
  .privacy-policy-minors-dialog .fieldset label {
    margin: 15px 0 5px;
    display: block;
    text-transform: uppercase;
    font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 500;
    font-style: normal;
    cursor: none; }
    .privacy-policy-minors-dialog .fieldset label span {
      text-transform: lowercase;
      font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: normal;
      font-style: normal; }
  .privacy-policy-minors-dialog .fieldset .input-note {
    margin-top: 5px;
    text-align: center; }
  .privacy-policy-minors-dialog .fieldset .input-error {
    margin-top: 5px;
    text-align: center;
    color: #ff374d; }

.privacy-policy-minors-dialog .privacy-policy-link {
  text-transform: capitalize;
  text-align: center;
  margin-bottom: 15px; }
/*css!/unicorns_sections/welcome/js/dialog/privacy_policy/PrivacyPolicyMinorsGuardianDialog.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.
*/
.privacy-policy-minors-guardian-dialog .dialog-body {
  padding: 40px; }

.privacy-policy-minors-guardian-dialog div {
  text-align: center;
  margin: 15px 0;
  font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  font-style: normal; }

.privacy-policy-minors-guardian-dialog .privacy-policy-link {
  text-transform: capitalize;
  text-align: center;
  margin-bottom: 15px; }
/*css!/unicorns_sections/welcome/css/main.css*/
/* override base withme styling for easier reintegration */
/*
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 .progress .bar {
  background-color: rgba(222, 179, 89, 0.3) !important;
  height: 25px !important;
  border-radius: 0px !important; }

.loading-progress .progress .border {
  display: none; }

.loading-progress .progress .percentage {
  user-select: none;
  cursor: default; }

.desktop .submode-ftux.ftux-layout:not(.is2d) .ftux-body {
  top: 50px !important; }

.welcome-funcaptcha-loader {
  display: none; }
/*css!/unicorns_sections/welcome/js/mode/landing/SocialLoginServiceFailureDialog.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.
*/
.social-login-service-failure-dialog .dialog-container .dialog-body {
  padding: 30px 15px;
  height: 130px; }
  .social-login-service-failure-dialog .dialog-container .dialog-body .social_login_service_failure_form {
    margin: 0;
    padding: 0;
    background-color: #f3f3f3;
    text-align: center; }
    .social-login-service-failure-dialog .dialog-container .dialog-body .social_login_service_failure_form .label {
      margin: 0;
      padding: 0;
      display: block;
      width: 100%; }
  .social-login-service-failure-dialog .dialog-container .dialog-body footer button {
    margin-top: 58px; }
/*css!/common/waf/js/widget/imqStatus/ImqStatus.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.
*/
.imq-status {
  z-index: 1000;
  position: fixed;
  right: 10px;
  bottom: 10px;
  padding: 5px;
  color: #fff;
  background-color: #ff374d;
  transition: opacity 1s ease-in 0s; }
  .imq-status.connecting {
    background-color: #deb359; }
    .imq-status.connecting .timer, .imq-status.connecting button.retry {
      display: none; }
  .imq-status.connected {
    background-color: #00FF9C;
    opacity: 0; }
    .imq-status.connected .timer, .imq-status.connected button.retry {
      display: none; }
  .imq-status .status {
    margin: 0px; }
  .imq-status .timer {
    margin: 5px 0px 0px 0px; }
/*css!/common/waf/js/manager/ContextMenuManager.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.
*/
.context-menu-manager {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  display: none; }
  .context-menu-manager.in-use {
    display: block; }
  .context-menu-manager > .context-menu {
    min-width: 150px;
    max-width: 280px;
    position: absolute;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); }
    .context-menu-manager > .context-menu .header,
    .context-menu-manager > .context-menu .header:hover {
      text-align: center;
      font-size: 10px;
      color: #404040;
      background: rgba(255, 255, 255, 0.75);
      cursor: default;
      opacity: 1; }
    .context-menu-manager > .context-menu li {
      cursor: pointer;
      padding: 10px;
      background: rgba(255, 255, 255, 0.95); }
      .context-menu-manager > .context-menu li:hover, .context-menu-manager > .context-menu li:active {
        background: #404040;
        color: #fff; }
        .context-menu-manager > .context-menu li:hover + .caret, .context-menu-manager > .context-menu li:active + .caret {
          border-right: 16px solid #404040; }
      .context-menu-manager > .context-menu li.disabled {
        opacity: 1;
        color: rgba(168, 168, 168, 0.5);
        cursor: not-allowed; }
        .context-menu-manager > .context-menu li.disabled:hover, .context-menu-manager > .context-menu li.disabled:active {
          background: rgba(255, 255, 255, 0.95);
          color: rgba(168, 168, 168, 0.5); }
      .context-menu-manager > .context-menu li.divider {
        border-bottom: 1px solid #eaeaea; }
  .context-menu-manager .caret {
    display: block;
    position: absolute;
    bottom: 10px;
    left: -16px;
    border-top: 8px solid transparent;
    border-right: 16px solid rgba(255, 255, 255, 0.95);
    border-bottom: 8px solid transparent; }
/*css!/common/waf/js/ModeManager.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.
*/
#imvu .mode-container {
  margin-top: 0px; }
  #imvu .mode-container .mode {
    padding-top: 100px; }
    #imvu .mode-container .mode .fixed-position-ghost-layout {
      height: calc(100% - 100px);
      top: 100px; }
  #imvu .mode-container.no-navs .mode {
    padding-top: 0; }
  #imvu .mode-container.no-subnav .mode {
    padding-top: 50px; }
    #imvu .mode-container.no-subnav .mode .fixed-position-ghost-layout {
      height: calc(100% - 50px);
      top: 50px; }
  #imvu .mode-container .mode.store-mode {
    padding-top: 50px; }
    #imvu .mode-container .mode.store-mode .store-mode {
      padding-top: 100px; }
  #imvu .mode-container > .mode > .submodes {
    z-index: 100; }

#imvu .add-overlay ~ .mode-container .mode.store-mode {
  padding-top: 0; }

#imvu .mode-container.is-permalink .mode {
  padding-top: 50px; }

#imvu .mode-container.is-permalink .lightbox-perfect-square-container {
  height: 100%; }

#imvu .mode-container.is-permalink .room-detail-widget {
  position: relative;
  height: calc(100vh - 50px); }

body.mobile #imvu .add-overlay ~ .mode-container .mode.store-mode > .submodes {
  margin-top: 0; }

body.mobile #imvu .add-overlay ~ .mode-container.no-subnav .mode.store-mode .submodes {
  margin-top: 50px; }

body.mobile #imvu .mode-container.no-subnav .mode.store-mode {
  padding-top: 0; }

body.mobile #imvu .mode-container .mode {
  padding-top: 50px; }

body.mobile #imvu .mode-container .mode.expand-left-column .submodes {
  margin-top: 0; }

body.mobile #imvu .mode-container .mode.expand-left-column .fixed-position-ghost-layout {
  height: calc(100% - 50px);
  top: 50px; }
  body.mobile #imvu .mode-container .mode.expand-left-column .fixed-position-ghost-layout fieldset:first-child {
    margin-top: 0; }

body.mobile #imvu .mode-container > .mode > .submodes {
  top: 0px;
  margin-top: 50px;
  padding-bottom: inherit; }
  body.mobile #imvu .mode-container > .mode > .submodes .submode .room-detail-widget {
    top: 0px; }

body.mobile #imvu .mode-container.no-subnav .submodes {
  margin-top: 0px; }

body.mobile #imvu .mode-container.is-permalink .mode {
  padding-top: 0; }

body.mobile #imvu .mode-container.is-permalink .right-panel {
  width: 100%; }

body.mobile #imvu .mode-container.is-permalink .main-column {
  padding: 0; }
/*css!/common/waf/js/dialog/downloadAppDialog/downloadAppDialog.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"].download_app_dialog .dialog-container {
  height: auto !important;
  min-height: auto !important; }

[data-ui-role="modal-dialog"].download_app_dialog .dialog-body {
  height: calc(100% - 50px); }
  [data-ui-role="modal-dialog"].download_app_dialog .dialog-body .dialog-content {
    height: calc(100% - 30px);
    background: #fff;
    margin: 15px;
    padding: 20px 15px;
    text-align: center; }
    [data-ui-role="modal-dialog"].download_app_dialog .dialog-body .dialog-content svg.icon-imvu-logo {
      width: 40px;
      height: 40px;
      margin-bottom: 15px; }
    [data-ui-role="modal-dialog"].download_app_dialog .dialog-body .dialog-content .dialog-content-heading {
      font-weight: bold;
      text-transform: uppercase;
      margin-bottom: 20px; }

@media screen and (max-width: 738px) {
  .mobile [data-ui-role="modal-dialog"].edit-profile-dialog {
    max-width: 100%; } }
/*css!/common/waf/js/widget/avatar/Avatar2d.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.
*/
.avatar-2d {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden; }
  .avatar-2d > img {
    transition: opacity 0.65s ease;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    max-height: 1300px; }
    .avatar-2d > img.silhouette, .avatar-2d > img.vanishing {
      opacity: 0; }
    .avatar-2d > img.fade-in {
      animation-name: fadein;
      animation-duration: 0.65s;
      animation-timing-function: ease-in;
      animation-iteration-count: 1; }
  .avatar-2d.loading img.avatar-image {
    opacity: 0.5; }
  .avatar-2d.error img.avatar-image, .avatar-2d.loading:not(.populated) img.avatar-image {
    opacity: 0; }
  .avatar-2d.error img.silhouette, .avatar-2d.loading:not(.populated) img.silhouette {
    opacity: 1; }
  .avatar-2d .avatar-2d-ie11-fix {
    width: auto; }
/*css!/common/waf/js/dialog/2fa/TwoFactorChallenge.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-challenge-dialog {
  color: #404040; }
  [data-ui-role="modal-dialog"].two-factor-challenge-dialog .dialog-body {
    color: #404040;
    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-challenge-dialog .dialog-body .content-block {
      margin-top: 30px; }
      [data-ui-role="modal-dialog"].two-factor-challenge-dialog .dialog-body .content-block p.desc {
        margin-bottom: 30px; }
      [data-ui-role="modal-dialog"].two-factor-challenge-dialog .dialog-body .content-block .input-panel {
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center; }
        [data-ui-role="modal-dialog"].two-factor-challenge-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-challenge-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-challenge-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-challenge-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-challenge-dialog .dialog-body .content-block .input-panel .challenge-error {
          text-align: center;
          width: 250px;
          padding: 5px 0px 0px 0px;
          color: #ff374d;
          display: none; }
          [data-ui-role="modal-dialog"].two-factor-challenge-dialog .dialog-body .content-block .input-panel .challenge-error.error-visible {
            display: block; }
        [data-ui-role="modal-dialog"].two-factor-challenge-dialog .dialog-body .content-block .input-panel .remember-device {
          margin-top: 20px; }
      [data-ui-role="modal-dialog"].two-factor-challenge-dialog .dialog-body .content-block .link-panel {
        text-align: center; }
        [data-ui-role="modal-dialog"].two-factor-challenge-dialog .dialog-body .content-block .link-panel p {
          margin-bottom: 10px; }
          [data-ui-role="modal-dialog"].two-factor-challenge-dialog .dialog-body .content-block .link-panel p span {
            cursor: pointer;
            color: #deb359;
            font-weight: bold; }
  [data-ui-role="modal-dialog"].two-factor-challenge-dialog .dialog-footer {
    padding: 15px 15px 0px 15px;
    position: relative !important;
    background: white; }
    [data-ui-role="modal-dialog"].two-factor-challenge-dialog .dialog-footer button {
      line-height: 35px;
      height: 40px;
      width: 100%;
      color: white;
      background: #404040; }
      [data-ui-role="modal-dialog"].two-factor-challenge-dialog .dialog-footer button.disabled {
        background: #d4d4d4; }

@media screen and (min-width: 470px) {
  [data-ui-role="modal-dialog"].two-factor-challenge-dialog .dialog-container {
    min-height: 328px !important;
    height: auto !important; } }
/*css!/common/waf/js/widget/diagnostics/Diagnostics.css*/
.diagnostics {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 10px 20px 15px;
  margin: 20px;
  z-index: 9999;
  width: 235px;
  display: none; }
  .diagnostics .diagnostics-title {
    margin: 0 0 10px 0; }
/*css!/unicorns_sections/welcome/js/mode/landing/LoginFBBannedDialog.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.
*/
.login-fb-banned-dialog .dialog-container .dialog-body {
  padding-bottom: 0;
  height: auto; }
  .login-fb-banned-dialog .dialog-container .dialog-body .login_fb_banned_form {
    margin: 0;
    padding: 0;
    background-color: #404040; }
    .login-fb-banned-dialog .dialog-container .dialog-body .login_fb_banned_form .label {
      margin: 0;
      padding: 0;
      display: block;
      width: 100%;
      text-align: center;
      color: #fff; }
    .login-fb-banned-dialog .dialog-container .dialog-body .login_fb_banned_form .banned_exclamation {
      margin-top: 30px;
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 16px; }
    .login-fb-banned-dialog .dialog-container .dialog-body .login_fb_banned_form .banned_explanation {
      margin-top: 10px;
      font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: normal;
      font-style: normal;
      font-size: 12px; }
    .login-fb-banned-dialog .dialog-container .dialog-body .login_fb_banned_form .label-email {
      margin-top: 100px;
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 16px;
      text-transform: uppercase; }
      .login-fb-banned-dialog .dialog-container .dialog-body .login_fb_banned_form .label-email .btn-primary {
        width: 100%; }
    .login-fb-banned-dialog .dialog-container .dialog-body .login_fb_banned_form .label-or {
      margin-top: 10px;
      font-family: "Gotham SSm 4r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: normal;
      font-style: normal;
      font-size: 12px; }
    .login-fb-banned-dialog .dialog-container .dialog-body .login_fb_banned_form .label-fb {
      margin-top: 10px;
      font-family: "Gotham SSm 5r", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 18px;
      text-transform: uppercase;
      margin-bottom: 30px; }
      .login-fb-banned-dialog .dialog-container .dialog-body .login_fb_banned_form .label-fb .btn-fb {
        width: 100%; }
/*css!/common/withme/js/widget/notificationBar/NotificationBar.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.
*/
.notification-bar {
  z-index: 600;
  position: fixed;
  top: 50px;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column; }

.mobile .notification-bar {
  grid-template-columns: 25px 1fr 25px; }

body.logged-out.mobile .notification-bar,
body.logged-out:not(.open-dialog) .notification-bar {
  top: 50px; }
/*css!/common/withme/js/widget/notificationBar/BarItem.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.
*/
.bar-item {
  display: grid;
  grid-template-columns: 1fr 470px 1fr;
  align-items: center;
  text-align: left;
  grid-gap: 10px;
  place-content: center;
  padding: 10px 15px;
  background: #ff374d;
  color: #fff;
  min-height: 50px;
  overflow: hidden; }
  .bar-item.service-bar {
    background: #FFCD1A;
    color: #404040; }
    .bar-item.service-bar a {
      font-weight: bold;
      color: #404040; }
  .bar-item.performance-bar a {
    font-weight: bold;
    color: #fff; }
  .bar-item.gold-bar {
    background: #DEB359;
    color: #fff; }
    .bar-item.gold-bar a {
      font-weight: bold;
      color: #fff; }
  .bar-item.event-bar {
    background: #BF3CF0;
    color: #fff; }
    .bar-item.event-bar .bar-info svg {
      width: 23.75px;
      height: 16px;
      margin-top: 5px; }
  .bar-item .bar-icon-hitbox {
    display: grid;
    grid: 25px / 25px;
    height: 25px; }
  .bar-item .bar-info {
    grid: 25px / 25px;
    justify-content: end; }
  .bar-item .bar-dismiss {
    cursor: pointer; }
  .bar-item .icon-notification-bar-info {
    width: 25px;
    height: 25px; }
    .bar-item .icon-notification-bar-info svg {
      fill: currentColor; }
  .bar-item .icon-close {
    align-self: center;
    justify-self: center;
    width: 15px;
    height: 15px; }
  .bar-item .bar-text {
    word-break: break-word; }

.mobile .bar-item {
  grid-template-columns: 25px 1fr 25px; }