/* VETTA mobile dock final geometry. Loaded after all dashboard styles. */
@media (max-width: 760px) {
  html,
  body {
    overscroll-behavior-y: none;
  }

  body.has-mobile-nav,
  body.community-mode.has-mobile-nav {
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.has-mobile-nav > .ds,
  body.has-mobile-nav .ds {
    padding-bottom: 0 !important;
  }

  body.has-mobile-nav .mobile-nav,
  body.community-mode.has-mobile-nav .mobile-nav {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    overflow: visible !important;
    isolation: isolate;
  }

  body.has-mobile-nav .mobile-nav::after,
  body.community-mode.has-mobile-nav .mobile-nav::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(100% - 1px);
    right: 0;
    left: 0;
    height: max(48px, env(safe-area-inset-bottom, 0px));
    background: inherit;
    pointer-events: none;
  }

  body.has-mobile-nav .mobile-nav-inner {
    position: relative;
    z-index: 1;
    height: 58px !important;
  }

  body.has-mobile-nav .mob-nav-btn {
    position: relative;
    min-height: 54px !important;
    padding: 5px 2px 8px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    transition: color .18s ease, transform .18s ease !important;
  }

  body.has-mobile-nav .mob-nav-btn::after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: 1px;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: var(--blue);
    box-shadow: 0 2px 8px rgba(26, 111, 245, .34);
    transform: translateX(50%);
    transition: width .18s ease;
  }

  body.has-mobile-nav .mob-nav-ic-wrap {
    width: 38px !important;
    height: 38px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

	  body.has-mobile-nav .mob-nav-btn .ic,
	  body.has-mobile-nav .mob-nav-btn .ic i,
	  body.has-mobile-nav .mob-nav-btn .ic i::before {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: #64748b !important;
    font-size: 21px !important;
    line-height: 1 !important;
    filter: none;
    transform: none !important;
	    background: transparent !important;
	    box-shadow: none !important;
	    text-shadow: none !important;
	    transition: color .18s ease !important;
  }

  body.has-mobile-nav .mob-nav-btn.active {
    color: var(--blue) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.has-mobile-nav .mob-nav-btn.active::after {
    width: 18px;
  }

  body.has-mobile-nav .mob-nav-btn.active .mob-nav-ic-wrap {
    color: var(--blue) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

	  body.has-mobile-nav .mob-nav-btn.active .ic,
	  body.has-mobile-nav .mob-nav-btn.active .ic i,
	  body.has-mobile-nav .mob-nav-btn.active .ic i::before {
	    color: var(--blue) !important;
	    filter: none !important;
	    background: transparent !important;
	    box-shadow: none !important;
	    text-shadow: none !important;
	    transform: none !important;
	  }

  body.has-mobile-nav .mob-nav-btn span:last-child {
    background: transparent !important;
    text-shadow: none !important;
  }

  body.has-mobile-nav .mob-nav-btn.active span:last-child {
    color: var(--blue) !important;
  }

  [data-theme="dark"] body.has-mobile-nav .mob-nav-btn .ic,
  [data-theme="dark"] body.has-mobile-nav .mob-nav-btn .ic i {
    color: #94a3b8 !important;
  }

  [data-theme="dark"] body.has-mobile-nav .mob-nav-btn.active .ic,
  [data-theme="dark"] body.has-mobile-nav .mob-nav-btn.active .ic i {
    color: #38bdf8 !important;
  }

  /* Keep selected items borderless even against older panel-specific rules. */
  html body.has-mobile-nav > #mobile-nav.mobile-nav .mobile-nav-inner .mob-nav-btn,
  html body.has-mobile-nav > #mobile-nav.mobile-nav .mobile-nav-inner .mob-nav-btn.active,
  html body.has-mobile-nav > #mobile-nav.mobile-nav .mobile-nav-inner .mob-nav-btn .mob-nav-ic-wrap,
  html body.has-mobile-nav > #mobile-nav.mobile-nav .mobile-nav-inner .mob-nav-btn.active .mob-nav-ic-wrap,
  html body.has-mobile-nav > #mobile-nav.mobile-nav .mobile-nav-inner .mob-nav-btn .ic,
  html body.has-mobile-nav > #mobile-nav.mobile-nav .mobile-nav-inner .mob-nav-btn.active .ic,
  html body.has-mobile-nav > #mobile-nav.mobile-nav .mobile-nav-inner .mob-nav-btn .ic i,
  html body.has-mobile-nav > #mobile-nav.mobile-nav .mobile-nav-inner .mob-nav-btn.active .ic i,
  html body.has-mobile-nav > #mobile-nav.mobile-nav .mobile-nav-inner .mob-nav-btn .ic i::before,
  html body.has-mobile-nav > #mobile-nav.mobile-nav .mobile-nav-inner .mob-nav-btn.active .ic i::before {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    text-shadow: none !important;
    transform: none !important;
  }

  html body.has-mobile-nav > #mobile-nav.mobile-nav .mobile-nav-inner .mob-nav-btn.active .ic,
  html body.has-mobile-nav > #mobile-nav.mobile-nav .mobile-nav-inner .mob-nav-btn.active .ic i,
  html body.has-mobile-nav > #mobile-nav.mobile-nav .mobile-nav-inner .mob-nav-btn.active .ic i::before {
    color: #168cf2 !important;
  }
}