/*
 * MoneyGo — Mobile Responsiveness & Modern Navigation
 * Pixel-perfect implementation matching User Screenshots 1 & 2
 */

/* ===== GLOBAL RESETS & ZERO HORIZONTAL OVERFLOW ===== */
html, body {
  overflow-x: clip !important;
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

.layout, .layout-page, .main-content, .main-page {
  overflow-x: clip !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

img {
  max-width: 100%;
  height: auto;
}

/* ===== PHONE RESPONSIVE (≤768px) ===== */
@media screen and (max-width: 768px) {

  /* Force layout to stretch from left=0 without centering offset */
  .layout,
  .layout-page,
  .main-content,
  .q-layout,
  .q-layout--standard {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: clip !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  .q-px-lg {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- 1. HEADER (User Screenshot 2) --- */
  header.q-py-lg:not(.mobile-navigation) {
    display: none !important;
  }

  header.mobile-navigation {
    display: flex !important;
    padding: 12px 16px !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }

  .mobile-navigation .lang-switcher {
    border-radius: 30px !important;
  }

  .mobile-navigation button.button--size-sm {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* --- 2. DRAWER MENU (User Screenshot 1) --- */
  /* Completely hide closed drawer from layout flow to eliminate off-screen overflow */
  .q-drawer.q-layout--prevent-focus,
  .q-drawer:not([style*="translateX(0px)"]):not([style*="translateX(0)"]) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .q-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    background: #FFFFFF !important;
    z-index: 9999 !important;
  }

  .q-drawer__content {
    background: #FFFFFF !important;
    overflow-y: auto !important;
    height: 100% !important;
  }

  /* Close Button (top-right circular button with X) */
  .mobile-navigation__btn--close,
  .q-drawer button.button--size-sm {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 999 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #F4F5F9 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
  }

  .mobile-navigation__btn--close svg,
  .q-drawer button.button--size-sm svg {
    color: #8E92BC !important;
    fill: #8E92BC !important;
    width: 14px !important;
    height: 14px !important;
  }

  .drawer-menu-mobile {
    padding: 72px 16px 28px 16px !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .drawer-menu-mobile__navigation {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Navigation Card Items */
  .drawer-card-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #F5F5FA !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    text-decoration: none !important;
    color: inherit !important;
    box-sizing: border-box !important;
    width: 100% !important;
    border: none !important;
    transition: background 0.15s ease, transform 0.1s ease !important;
  }

  .drawer-card-link:hover,
  .drawer-card-link:active {
    background: #ECECF4 !important;
    transform: scale(0.99) !important;
  }

  .drawer-card-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .drawer-card-icon-wrap {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .drawer-card-icon {
    width: 22px !important;
    height: 22px !important;
    color: #7C4EFF !important;
    fill: #7C4EFF !important;
  }

  .drawer-card-icon path,
  .drawer-card-icon * {
    fill: #7C4EFF !important;
    color: #7C4EFF !important;
  }

  .drawer-card-title {
    font-size: 15.5px !important;
    font-weight: 600 !important;
    color: #1A1C29 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.2 !important;
  }

  .drawer-card-arrow-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .drawer-card-arrow {
    width: 9px !important;
    height: 14px !important;
    color: #A2A4B5 !important;
    fill: #A2A4B5 !important;
  }

  .drawer-card-arrow path {
    fill: #A2A4B5 !important;
  }

  /* Drawer Bottom Auth Section */
  .drawer-menu-mobile__content {
    background: transparent !important;
    padding: 0 !important;
    margin-top: auto !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
  }

  .drawer-menu-mobile__content .text-black:first-child {
    display: none !important;
  }

  .drawer-auth-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding-top: 24px !important;
  }

  .drawer-auth-prompt {
    font-size: 13.5px !important;
    color: #8E92BC !important;
    text-align: center !important;
    line-height: 1.4 !important;
    margin-bottom: 18px !important;
    font-weight: 400 !important;
    padding: 0 8px !important;
  }

  .drawer-auth-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .drawer-btn {
    flex: 1 !important;
    height: 48px !important;
    border-radius: 50px !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, opacity 0.2s ease !important;
    box-sizing: border-box !important;
  }

  .drawer-btn:active {
    transform: scale(0.97) !important;
  }

  /* Register: Magenta / Pink Pill */
  .drawer-btn--register {
    background: linear-gradient(135deg, #FF4585, #DF2B88) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(223, 43, 136, 0.35) !important;
  }

  /* Log in: Purple / Violet Pill */
  .drawer-btn--login {
    background: linear-gradient(135deg, #7C4EFF, #6332E8) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(124, 78, 255, 0.35) !important;
  }

  /* --- 3. HERO BANNER (User Screenshot 2) --- */
  .main-page {
    gap: 24px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  /* Hide desktop banner bottom items */
  .banner__list-item,
  .banner__swiper-slide,
  .swiper-pagination,
  .banner .row.gutter-md.no-wrap {
    display: none !important;
  }

  /* Mobile Banner Card Container */
  .banner,
  .banner--mobile,
  .banner__content {
    background: linear-gradient(180deg, #F3EAFD 0%, #FFE9F3 100%) !important;
    border-radius: 24px !important;
    margin: 0 16px !important;
    padding: 24px 18px 24px 18px !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    min-height: 480px !important;
  }

  .banner__header {
    margin-bottom: 12px !important;
    position: relative !important;
    z-index: 5 !important;
  }

  .banner__title {
    font-size: 26px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    color: #0D0E15 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.5px !important;
    margin: 0 0 8px 0 !important;
  }

  .banner h3,
  .banner .text-body1,
  .banner .text-h3-small {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #4B4D5E !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.3 !important;
  }

  /* Centered 3D Phone Image */
  .banner picture.banner__bg {
    position: absolute !important;
    bottom: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 340px !important;
    height: auto !important;
    z-index: 2 !important;
    display: block !important;
    right: auto !important;
  }

  .banner picture.banner__bg img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Floating pill badge "2M+ Clients Worldwide" */
  .banner__footer {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
    z-index: 10 !important;
    background: transparent !important;
  }

  .banner__footer img {
    height: 44px !important;
    width: auto !important;
  }

  .banner__footer h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0D0E15 !important;
    margin: 0 !important;
    line-height: 1.1 !important;
  }

  .banner__footer p {
    font-size: 13px !important;
    color: #1A1C29 !important;
    font-weight: 400 !important;
    margin: 0 !important;
  }

  /* --- 4. SECTION: "YOU FINALLY FOUND THE KEY TO EASY FINANCES" --- */
  .you-finally,
  .you-finally--mobile {
    padding: 0 !important;
    margin: 0 0 32px 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }

  .you-finally h2,
  .you-finally__title,
  h2.text-uppercase,
  .main-page > h2,
  .main-page > .text-h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    line-height: 1.25 !important;
    color: #0D0E15 !important;
    margin: 32px 0 20px 0 !important;
    padding: 0 16px !important;
    word-break: break-word !important;
    white-space: normal !important;
    letter-spacing: -0.3px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Single Column Cards */
  .you-finally__content {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .you-finally__content > div,
  .you-finally .pad.frame-pad {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    margin: 0 16px !important;
    padding: 24px 20px !important;
    box-sizing: border-box !important;
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04) !important;
  }

  .you-finally__content h3,
  .you-finally__content .text-h3,
  .you-finally__content .text-h4 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0D0E15 !important;
    margin-bottom: 6px !important;
  }

  .you-finally__content p,
  .you-finally__content .text-body1 {
    font-size: 14px !important;
    color: #555768 !important;
    line-height: 1.4 !important;
    margin-bottom: 16px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  .you-finally__img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* --- 5. CHOOSE-THE-OPTION SECTION: Stack to single column --- */
  .choose-the-option,
  .choose-the-option--mobile {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 16px 32px 16px !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .choose-the-option .column,
  .choose-the-option .choose-the-option__block,
  .choose-the-option [class*="choose-the-option__block"] {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .choose-the-option > .row,
  .choose-the-option > .col,
  .choose-the-option .col.no-wrap.row {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Fix signup buttons inside right block */
  .choose-the-option__block--right .row.gutter-md,
  .choose-the-option__block--right .row.no-wrap,
  .choose-the-option .row.gutter-md {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
    margin-top: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    box-sizing: border-box !important;
  }

  .choose-the-option .link--theme-emboss-primary,
  .choose-the-option .link--theme-emboss-secondary {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
    justify-content: center !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Restore Quasar input row layout so append arrow doesn't break */
  .choose-the-option .q-field__control {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .choose-the-option .q-field__append {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .choose-the-option .select,
  .choose-the-option .q-field,
  .choose-the-option .q-field__inner {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .choose-the-option__title {
    font-size: 22px !important;
    line-height: 1.25 !important;
    width: 100% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    margin-bottom: 20px !important;
    text-align: center !important;
  }

  .choose-the-option__block {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 16px !important;
  }

  .choose-the-option img,
  .choose-the-option picture img,
  .choose-the-option img[alt="banner-bg"],
  .choose-the-option__img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    right: 0 !important;
    left: auto !important;
    pointer-events: none !important;
  }

  /* --- 6. ALL OTHER SECTIONS: Prevent any flex row overflow --- */
  .our-priority,
  .getting-started,
  .fees-for-users,
  .universal,
  .services,
  .support,
  .works,
  .partner,
  .meet-our-solutions,
  .security-page {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }

  .our-priority__content,
  .getting-started__content,
  .referral-program-info__statistic-info,
  .account-user-info__form,
  .contacting-support__form--desktop,
  .universal__content,
  .services__bottom,
  .support__wrapper,
  .works__wrapper {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .partners-list {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .footer-column__wrapper {
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }
}

/* ===== SMALL PHONES (≤480px) ===== */
@media screen and (max-width: 480px) {
  .banner__title {
    font-size: 23px !important;
  }
  .you-finally h2,
  .you-finally__title {
    font-size: 20px !important;
  }
  .drawer-card-title {
    font-size: 14.5px !important;
  }
  .choose-the-option {
    margin: 0 8px 24px 8px !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
  }
  .banner,
  .banner--mobile,
  .banner__content {
    margin: 0 8px !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
  }
  .you-finally__content > div,
  .you-finally .pad.frame-pad {
    margin: 0 8px !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
  }
}


/* --- 7. INSTALL APP MODAL & DRAWER INTERACTION FIXES --- */
.mg-install-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: rgba(15, 18, 38, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  animation: mgFadeIn 0.2s ease forwards !important;
}

@media (min-width: 500px) {
  .mg-install-modal-overlay {
    align-items: center !important;
  }
}

.mg-install-modal-box {
  background: #FFFFFF !important;
  border-radius: 28px !important;
  width: 100% !important;
  max-width: 420px !important;
  padding: 28px 24px 24px 24px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
  position: relative !important;
  animation: mgSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  box-sizing: border-box !important;
}

.mg-install-modal-overlay.closing {
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.mg-install-modal-close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #F4F5F9 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.mg-install-modal-close:hover {
  background: #E8E9F1 !important;
}

.mg-install-modal-header {
  text-align: center !important;
  margin-bottom: 22px !important;
}

.mg-install-modal-icon-wrap {
  width: 56px !important;
  height: 56px !important;
  background: #F5F3FF !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
}

.mg-install-modal-icon-wrap svg {
  width: 28px !important;
  height: 28px !important;
}

.mg-install-modal-title {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #1A1C29 !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.25 !important;
}

.mg-install-modal-desc {
  font-size: 13.5px !important;
  color: #717595 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

.mg-install-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
}

.mg-install-step {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: #F8F9FD !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}

.mg-step-num {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #7C4EFF !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.mg-step-text {
  font-size: 13px !important;
  color: #33364D !important;
  line-height: 1.45 !important;
}

.mg-install-modal-btn {
  width: 100% !important;
  height: 48px !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #7C4EFF, #6332E8) !important;
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(124, 78, 255, 0.35) !important;
  transition: transform 0.15s ease, opacity 0.2s ease !important;
}

.mg-install-modal-btn:active {
  transform: scale(0.98) !important;
}

@keyframes mgFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mgSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.drawer-card-link,
.drawer-btn,
.drawer-btn--register,
.drawer-btn--login {
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

/* ===== TRANSLATOR (QSelect / .lang-switcher / .q-menu) ROBUSTNESS ===== */
.lang-switcher,
.lang-switcher .q-field,
.lang-switcher .q-field__inner,
.lang-switcher .q-field__control,
.lang-switcher .q-field__prepend,
.lang-switcher .q-field__append,
.lang-switcher .q-field__native {
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

.lang-switcher .q-field__control {
  min-height: 40px !important;
  border-radius: 30px !important;
  display: flex !important;
  align-items: center !important;
}

.mobile-navigation .lang-switcher {
  border-radius: 30px !important;
  max-width: 110px !important;
  flex-shrink: 0 !important;
}

/* Ensure dropdown menu is always in front of mobile drawer (z-index 9999) & header */
.q-menu {
  z-index: 10005 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.16) !important;
  overflow-y: auto !important;
}

@media screen and (max-width: 768px) {
  .q-menu.q-position-engine {
    max-width: calc(100vw - 24px) !important;
    right: 12px !important;
  }
}

/* =========================================================
   MATERIAL ICONS FONT FIX (Password Visibility Eye)
   ========================================================= */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('/_nuxt/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.D-x-0Q06.woff2') format('woff2'),
       url('/_nuxt/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.Dr0goTwe.woff') format('woff');
  font-display: block;
}

.material-icons,
.q-icon.material-icons {
  font-family: 'Material Icons' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-feature-settings: 'liga' !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  cursor: pointer !important;
  color: #8E92BC !important;
  overflow: hidden !important;
  transition: color 0.15s ease !important;
}

.material-icons:hover,
.q-icon.material-icons:hover {
  color: #5C6079 !important;
}

/* --- BULLETPROOF EYE ICON FIX --- */
.q-field__append .q-icon.material-icons,
.q-field .material-icons.cursor-pointer,
.q-field .q-icon.material-icons {
  font-size: 0 !important;
  line-height: 0 !important;
  color: #8E92BC !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  cursor: pointer !important;
  user-select: none !important;
}

.q-field__append .q-icon.material-icons svg,
.q-field .material-icons.cursor-pointer svg,
.q-field .q-icon.material-icons svg {
  width: 20px !important;
  height: 20px !important;
  fill: #8E92BC !important;
  transition: fill 0.15s ease !important;
}

.q-field__append .q-icon.material-icons:hover svg,
.q-field .material-icons.cursor-pointer:hover svg,
.q-field .q-icon.material-icons:hover svg {
  fill: #5C6079 !important;
}