/* =====================================================================
   Diwali festive theme layer
   ---------------------------------------------------------------------
   Opt-in: everything is scoped to `body.dv-festive`. To switch it off,
   remove that class from <body>. It is set in four places, one per page
   shell (find them with: git grep 'class="dv-festive').

   Rules this layer follows:
   - Nothing moves on top of data. The fireworks, lights and wishes live
     in a banner that scrolls away; lanterns, diyas and rangoli sit
     behind the page (z-index:-1), so cards always cover them.
   - Screen only: printed pages stay plain.
   - The markup (.dv-sky, .dv-banner, .dv-auth, .dv-pill) comes from
     public/assets/js/diwali.js.

   Must load after custom-*.css and @yield('page-css').
   Plain CSS on purpose: public/assets/css is served as is, with no Sass step.
   ===================================================================== */

/* The Nuxt site drops the class on routes it does not theme. */
body:not(.dv-festive) .dv-sky,
body:not(.dv-festive) .dv-banner,
body:not(.dv-festive) .dv-auth { display: none; }

@media screen {
  @keyframes dv-flow    { from { transform: translateX(-50%); } to { transform: translateX(0); } }
  @keyframes dv-drift-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(70px, 50px); } }
  @keyframes dv-drift-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-80px, -40px); } }
  @keyframes dv-turn    { to { transform: rotate(360deg); } }
  @keyframes dv-sway    { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
  @keyframes dv-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  @keyframes dv-caret   { 50% { opacity: 0; } }
  @keyframes dv-shine   { from { background-position: 0 0; } to { background-position: 200% 0; } }

  body.dv-festive {
    --dv-plum: #4a1259;
    --dv-wine: #8e1450;
    --dv-magenta: #b0185c;
    --dv-rust: #c2410c;
    --dv-marigold: #ffb300;
    --dv-gold: #f5c542;
    --dv-cream: #fff6e8;
    --dv-rainbow: linear-gradient(90deg, #c2185b, #f4511e, #ffb300, #00897b, #6a1b9a, #c2185b);
    --dv-action: linear-gradient(120deg, var(--dv-magenta), var(--dv-rust));
    --dv-dusk: linear-gradient(180deg, #140c3d 0%, #3b1166 42%, #92205f 76%, #e8622c 100%);

    /* measured in the browser: 60px header + 49px menu (appnew layout) */
    --dv-header-h: 60px;
    --dv-menu-h: 49px;
    --dv-banner-h: 84px;
    --dv-page-gap: 12px;

    /* :root derives these from --primary-rgb once, so each one is restated */
    --primary-rgb: 176, 24, 92;
    --primary-color: rgb(176, 24, 92);
    --primary-border: rgb(176, 24, 92);
    --primary-light: #c2185b;
    --primary-lighter: #d84a7f;
    --primary-dark: #8e1450;
    --primary-darker: #6e0f3e;
    --primary005: rgba(176, 24, 92, .05);
    --primary01: rgba(176, 24, 92, .1);
    --primary02: rgba(176, 24, 92, .2);
    --primary03: rgba(176, 24, 92, .3);
    --primary04: rgba(176, 24, 92, .4);
    --primary05: rgba(176, 24, 92, .5);
    --primary06: rgba(176, 24, 92, .6);
    --primary07: rgba(176, 24, 92, .7);
    --primary08: rgba(176, 24, 92, .8);
    --primary09: rgba(176, 24, 92, .9);

    /* the same trap in the dashboard, menu and header tokens */
    --dw-primary: rgb(176, 24, 92);
    --dw-primary-soft: rgba(176, 24, 92, .1);
    --dw-primary-dark: #8e1450;
    --dw-border: #f6e3c6;
    --dw-border-strong: #eccf9f;
    --nv-navy: #8e1450;
    --nv-navy-soft: rgba(176, 24, 92, .1);
    --nv-hover: rgba(255, 179, 0, .16);
    --hd-bg-line: rgba(245, 197, 66, .7);

    position: relative;
    background-color: var(--dv-cream) !important;
  }

  body.dv-festive ::selection { background: var(--dv-marigold); color: var(--dv-plum); }

  /* The page scrollbar belongs to <html>, which a body-scoped rule cannot reach. */
  html:has(body.dv-festive)::-webkit-scrollbar-thumb,
  body.dv-festive ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--dv-magenta), var(--dv-rust));
    border-radius: 8px;
  }
  html:has(body.dv-festive)::-webkit-scrollbar-track,
  body.dv-festive ::-webkit-scrollbar-track { background: #fff1dc; }

  /* these paint over the sky layer otherwise */
  body.dv-festive .page,
  body.dv-festive .main-content,
  body.dv-festive .min-h-screen,
  body.dv-festive .authentication,
  body.dv-festive .footer.bg-white { background: transparent !important; }

  /* ---------- behind the page ---------- */
  body.dv-festive .dv-sky {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(160deg, #fff3dc 0%, #ffeaf0 48%, #f4e9ff 100%);
  }

  body.dv-festive .dv-aura {
    position: absolute;
    width: 70vw;
    height: 70vw;
    border-radius: 50%;
    will-change: transform;
  }
  body.dv-festive .dv-aura--a {
    top: -30vw;
    left: -20vw;
    background: radial-gradient(closest-side, rgba(255, 179, 0, .34), transparent);
    animation: dv-drift-a 46s ease-in-out infinite;
  }
  body.dv-festive .dv-aura--b {
    right: -24vw;
    bottom: -34vw;
    background: radial-gradient(closest-side, rgba(194, 24, 91, .24), transparent);
    animation: dv-drift-b 54s ease-in-out infinite;
  }

  body.dv-festive .dv-rangoli {
    position: absolute;
    bottom: -130px;
    width: 320px;
    height: 320px;
    background: url("../diwali/rangoli.svg") center / contain no-repeat;
    opacity: .9;
    animation: dv-turn 220s linear infinite;
    will-change: transform;
  }
  body.dv-festive .dv-rangoli--l { left: -130px; }
  body.dv-festive .dv-rangoli--r { right: -130px; animation-direction: reverse; }

  /* gutter lanterns hang from the menu on one long cord */
  body.dv-festive .dv-lantern {
    position: absolute;
    top: calc(var(--dv-header-h) + var(--dv-menu-h));
    width: 44px;
    transform-origin: 50% 0;
    animation: dv-sway 7s ease-in-out infinite;
    will-change: transform;
  }
  /* no menu on the Blade sign-in page: they hang from the top of the window */
  body.dv-festive.dv-has-cover .dv-lantern { top: 0; }
  body.dv-festive .dv-lantern i {
    display: block;
    width: 1px;
    margin: 0 auto;
    background: #9a6a2c;
  }
  body.dv-festive .dv-lantern img { display: block; width: 100%; height: auto; margin-top: -1px; }
  body.dv-festive .dv-lantern--1 { left: 10px; }
  body.dv-festive .dv-lantern--1 i { height: 118px; }
  body.dv-festive .dv-lantern--2 { right: 10px; animation-delay: -2.4s; }
  body.dv-festive .dv-lantern--2 i { height: 182px; }
  body.dv-festive .dv-lantern--3 { left: 22px; animation-delay: -4.1s; }
  body.dv-festive .dv-lantern--3 i { height: 328px; }
  body.dv-festive .dv-lantern--4 { right: 22px; animation-delay: -1.2s; }
  body.dv-festive .dv-lantern--4 i { height: 392px; }

  body.dv-festive .dv-diya {
    position: absolute;
    bottom: 2px;
    width: 58px;
  }
  body.dv-festive .dv-diya img { display: block; width: 100%; height: auto; }
  body.dv-festive .dv-diya--l { left: 1px; }
  body.dv-festive .dv-diya--r { right: 1px; }

  /* ---------- the banner: dusk sky between the menu and the page ----------
     On <body>, not inside .main-content, so it stays full-bleed whatever padding a
     page gives its content. The space is reserved here rather than by the script,
     so the page does not jump when the banner arrives. */
  body.dv-festive .main-content {
    margin-top: calc(var(--dv-menu-h) + var(--dv-banner-h) + var(--dv-page-gap)) !important;
  }

  body.dv-festive .dv-banner {
    position: absolute;
    top: calc(var(--dv-header-h) + var(--dv-menu-h));
    left: 0;
    right: 0;
    height: var(--dv-banner-h);
    overflow: hidden;
    pointer-events: none;
    background: var(--dv-dusk);
    box-shadow: 0 2px 0 var(--dv-gold), 0 8px 18px rgba(74, 18, 89, .16);
  }

  /* pre-login pages have no menu to sit under: the banner opens the page */
  body.dv-festive .dv-banner--flow {
    position: relative;
    top: auto;
    flex: 0 0 auto;
    width: 100%;
  }

  body.dv-festive .dv-stars,
  body.dv-festive .dv-stars::after {
    position: absolute;
    inset: 0 0 26px;
    content: "";
    background-image:
      radial-gradient(circle, #fff 0 1px, transparent 1.6px),
      radial-gradient(circle, #ffe9a0 0 .8px, transparent 1.4px);
    background-size: 137px 53px, 89px 41px;
    background-position: 11px 7px, 47px 23px;
  }
  body.dv-festive .dv-stars { animation: dv-twinkle 4.2s ease-in-out infinite; }
  body.dv-festive .dv-stars::after {
    background-size: 113px 47px, 71px 37px;
    background-position: 63px 19px, 21px 3px;
    animation: dv-twinkle 3.1s ease-in-out -1.5s infinite;
  }

  body.dv-festive .dv-fw {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  body.dv-festive .dv-skyline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    background: url("../diwali/skyline.svg") repeat-x left bottom / auto 40px;
  }

  body.dv-festive .dv-string {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: url("../diwali/lights.svg") repeat-x left top / auto 30px;
  }

  body.dv-festive .dv-ledge {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    gap: 2px;
  }
  body.dv-festive .dv-ledge img { display: block; width: 40px; height: auto; }
  body.dv-festive .dv-ledge--l { left: 5%; }
  body.dv-festive .dv-ledge--r { right: 5%; }

  body.dv-festive .dv-hanging {
    position: absolute;
    top: 0;
    width: 30px;
    transform-origin: 50% 0;
    animation: dv-sway 6s ease-in-out infinite;
  }
  body.dv-festive .dv-hanging img { display: block; width: 100%; height: auto; }
  body.dv-festive .dv-hanging--1 { left: 22%; }
  body.dv-festive .dv-hanging--2 { left: 28%; top: -8px; animation-delay: -2s; }
  body.dv-festive .dv-hanging--3 { right: 28%; top: -8px; animation-delay: -3.3s; }
  body.dv-festive .dv-hanging--4 { right: 22%; animation-delay: -1.1s; }

  body.dv-festive .dv-wish {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 12px;
  }

  body.dv-festive .dv-wish-txt {
    min-height: 1.4em;
    background: linear-gradient(90deg, #ffe082, #fff6d2, #ffb300, #fff6d2, #ffe082);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* a slow sheen on painted text: 12 updates a second look the same as 60 */
    animation: dv-shine 6s steps(72) infinite;
  }
  body.dv-festive .dv-wish-txt,
  body.dv-festive .dv-pill-txt {
    font-family: "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Gujarati", "Noto Sans Tamil",
                 "Noto Sans Telugu", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Gurmukhi",
                 "Noto Sans Oriya", "Nirmala UI", "Inter", sans-serif;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
  }
  body.dv-festive .dv-wish-txt { font-size: 26px; filter: drop-shadow(0 1px 8px rgba(255, 179, 0, .45)); }

  /* out of view, nothing in the banner needs to run */
  body.dv-festive .dv-banner.dv-idle *,
  body.dv-festive .dv-banner.dv-idle *::after { animation-play-state: paused !important; }

  body.dv-festive .dv-cur {
    width: 2px;
    height: 1.2em;
    margin-left: 3px;
    background: var(--dv-gold);
    animation: dv-caret 1s steps(1) infinite;
  }
  body.dv-festive .dv-wish .dv-cur { height: 28px; }

  /* ---------- chrome ----------
     custom-header.css styles the bar as `html .app-header.modern-header` with
     !important and bars its pseudo-elements, so these have to outrank that. */
  html body.dv-festive .app-header.modern-header {
    background: linear-gradient(90deg, #ffefc9 0%, #ffe3e6 52%, #eedcff 100%) !important;
    border-bottom-color: rgba(245, 197, 66, .7) !important;
  }
  html body.dv-festive .app-header.modern-header::before {
    content: "" !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    /* moved with transform, on a strip two colour cycles wide: animating
       background-position here would repaint the header on every frame */
    width: 600%;
    height: 3px;
    background: var(--dv-rainbow);
    background-size: 50% 100%;
    pointer-events: none;
    animation: dv-flow 14s linear infinite;
    will-change: transform;
  }

  body.dv-festive .app-sidebar {
    border-bottom-color: rgba(245, 197, 66, .55) !important;
  }

  body.dv-festive .app-sidebar .slide.active > .side-menu__item,
  body.dv-festive .app-sidebar .side-menu__item.active {
    background: linear-gradient(120deg, rgba(176, 24, 92, .12), rgba(255, 179, 0, .2)) !important;
    box-shadow: inset 0 -2px 0 var(--dv-marigold) !important;
  }
  body.dv-festive .app-sidebar .side-menu__item:hover {
    background: rgba(255, 179, 0, .16) !important;
  }

  /* ---------- dashboard widgets ---------- */
  /* dw-rise fills "both", so every finished card stays a separate compositor layer,
     stacked above the animating sky. That alone took the dashboard's main thread from
     about 40% to about 80% busy. "backwards" keeps the entrance and lets the layers go. */
  body.dv-festive .db-grid > *,
  body.dv-festive .db-row > * { animation-fill-mode: backwards !important; }

  body.dv-festive .dw-card {
    background: linear-gradient(90deg, #c2185b, #f4511e, #ffb300, #00897b, #6a1b9a) top / 100% 3px no-repeat, #fff !important;
    border-color: #f6e3c6 !important;
    box-shadow: 0 2px 6px rgba(142, 20, 80, .05), 0 6px 16px rgba(142, 20, 80, .05);
  }
  body.dv-festive .dw-card:hover {
    box-shadow: 0 4px 10px rgba(142, 20, 80, .08), 0 12px 26px rgba(245, 158, 11, .16);
  }

  /* a slice of rangoli behind each card title */
  body.dv-festive .dw-card-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    border-bottom-color: #f8ead3 !important;
  }
  body.dv-festive .dw-card-head::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -74px;
    z-index: -1;
    width: 190px;
    height: 190px;
    margin-top: -95px;
    background: url("../diwali/rangoli.svg") center / contain no-repeat;
    opacity: .2;
    pointer-events: none;
  }

  body.dv-festive .dw-card-icon {
    background: linear-gradient(135deg, var(--dv-marigold), #f4511e) !important;
    color: #fff !important;
    box-shadow: 0 3px 8px rgba(244, 81, 30, .3);
  }

  body.dv-festive .dw-tile {
    background: linear-gradient(135deg, #fff, #fffaf1) !important;
    border-color: #f8ead3 !important;
  }
  body.dv-festive .dw-tile:hover {
    border-color: var(--dv-marigold) !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, .22);
  }

  body.dv-festive .dw-filters { background: #fffaf1 !important; border-color: #f8ead3 !important; }

  /* ---------- other pages ---------- */
  body.dv-festive .card.custom-card { border-top: 3px solid var(--dv-marigold); }
  body.dv-festive .card .card-title,
  body.dv-festive .dw-card-title { color: var(--dv-plum); }

  body.dv-festive .table > :not(caption) > * > th,
  body.dv-festive .table thead th,
  body.dv-festive .dw-table-wrap table.table > thead > tr > th,
  body.dv-festive .dw-table-host table.table > thead > tr > th {
    background-color: #fff1dc !important;
    color: var(--dv-plum) !important;
    border-bottom-color: rgba(245, 197, 66, .7);
  }

  /* :not(.disabled) as well as :not(:disabled): Bootstrap marks links that way */
  body.dv-festive .btn-primary:not(:disabled):not(.disabled),
  body.dv-festive .dw-apply:not(:disabled):not(.disabled) {
    background: var(--dv-action) !important;
    border-color: transparent !important;
    color: #fff !important;
  }
  body.dv-festive .btn-primary:not(:disabled):not(.disabled):hover,
  body.dv-festive .dw-apply:not(:disabled):not(.disabled):hover {
    box-shadow: 0 4px 14px rgba(194, 65, 12, .35);
  }

  body.dv-festive .btn-primary:disabled,
  body.dv-festive .btn-primary.disabled,
  body.dv-festive fieldset:disabled .btn-primary,
  body.dv-festive .dw-apply:disabled,
  body.dv-festive .dw-apply.disabled {
    background: #c9b8ae !important;
    border-color: #c9b8ae !important;
    color: #fff !important;
    box-shadow: none !important;
    cursor: not-allowed;
  }

  body.dv-festive .form-control:focus,
  body.dv-festive .form-select:focus,
  body.dv-festive #__nuxt input:focus {
    border-color: var(--dv-marigold) !important;
    box-shadow: 0 0 0 3px rgba(255, 179, 0, .22) !important;
  }

  /* ---------- pre-login: the dusk scene ---------- */
  body.dv-festive .authentication-cover,
  body.dv-festive .dv-stage {
    position: relative;
    overflow: hidden;
    background: var(--dv-dusk) !important;
  }
  /* the theme's purple tint would sit on top of the sky */
  body.dv-festive .authentication-cover::before { content: none; }

  body.dv-festive .dv-auth {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
  }
  /* what the visitor reads and clicks stays over the fireworks */
  body.dv-festive .authentication-cover .aunthentication-cover-content,
  body.dv-festive .dv-stage > :not(.dv-auth) {
    position: relative;
    z-index: 2;
  }
  /* blurring a moving canvas costs a repaint every frame */
  body.dv-festive .authentication-cover .aunthentication-cover-content {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(20, 12, 61, .62);
  }

  body.dv-festive .dv-auth .dv-skyline { height: 90px; background-size: auto 90px; }
  body.dv-festive .dv-auth .dv-string { height: 46px; background-size: auto 46px; }

  body.dv-festive .dv-auth-lantern {
    position: absolute;
    top: 0;
    width: 74px;
    transform-origin: 50% 0;
    animation: dv-sway 7s ease-in-out infinite;
  }
  body.dv-festive .dv-auth-lantern img { display: block; width: 100%; height: auto; }
  body.dv-festive .dv-auth-lantern--1 { left: 9%; }
  body.dv-festive .dv-auth-lantern--2 { left: 20%; top: 32px; width: 54px; animation-delay: -2.6s; }
  body.dv-festive .dv-auth-lantern--3 { right: 20%; top: 32px; width: 54px; animation-delay: -4s; }
  body.dv-festive .dv-auth-lantern--4 { right: 9%; animation-delay: -1.3s; }

  body.dv-festive .dv-pill {
    position: absolute;
    left: 50%;
    bottom: 22px;
    z-index: 2;
    display: flex;
    align-items: center;
    max-width: 92vw;
    padding: 7px 20px;
    transform: translateX(-50%);
    border: 1px solid var(--dv-gold);
    border-radius: 30px;
    background: rgba(20, 12, 61, .78);
    box-shadow: 0 0 22px rgba(255, 179, 0, .35);
  }
  body.dv-festive .dv-pill-txt { font-size: 16px; color: #ffe9a0; }

  /* the cover's slides reach the bottom of the panel: the clear space is above them */
  body.dv-festive .authentication-cover .dv-pill { top: 58px; bottom: auto; }

  /* ---------- Nuxt sign-in ---------- */
  /* its blur and white wash read as a stray band on the warm page */
  body.dv-festive #__nuxt .navbar {
    background: linear-gradient(90deg, #ffefc9 0%, #ffe3e6 52%, #eedcff 100%);
    border-bottom: 1px solid rgba(245, 197, 66, .7);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* the component sets its colour inline; its disabled Back button is left alone */
  body.dv-festive #__nuxt button[style*="background"]:not(:disabled) {
    background: var(--dv-action) !important;
    border-color: transparent !important;
    color: #fff !important;
  }

  /* ---------- the cover panel is showing: no banner needed ---------- */
  @media (min-width: 1200px) {
    body.dv-festive.dv-has-cover .dv-banner--flow { display: none; }
  }

  /* ---------- no room in the gutters: drop what would not fit ---------- */
  @media (max-width: 1199.98px) {
    body.dv-festive .dv-lantern,
    body.dv-festive .dv-diya { display: none; }
  }

  /* Pre-login pages keep their columns close to the edges, and the sign-in card is
     see-through, so a decoration there would show behind text. Its 1668px content
     leaves the lanterns' 74px on each side only from 1820px up. */
  @media (max-width: 1819.98px) {
    body.dv-festive.dv-nuxt .dv-lantern,
    body.dv-festive.dv-nuxt .dv-diya,
    body.dv-festive.dv-nuxt .dv-rangoli { display: none; }
  }
  @media (max-width: 1199.98px) {
    body.dv-festive.dv-has-cover .dv-rangoli { display: none; }
  }

  @media (max-width: 991.98px) {
    /* no menu bar here, so the banner starts at the header */
    body.dv-festive { --dv-menu-h: 0px; }
    body.dv-festive .main-content {
      margin-top: calc(var(--dv-banner-h) + var(--dv-page-gap)) !important;
    }
    body.dv-festive .dv-ledge img { width: 30px; }
    body.dv-festive .dv-hanging { display: none; }
    body.dv-festive .dv-wish-txt { font-size: 20px; }
    body.dv-festive .dv-auth-lantern--2,
    body.dv-festive .dv-auth-lantern--3 { display: none; }
  }

  @media (max-width: 767.98px) {
    /* the body's top padding drops to 55px here, 5px short of the header */
    body.dv-festive .main-content {
      margin-top: calc(var(--dv-banner-h) + var(--dv-page-gap) + 5px) !important;
    }
  }

  @media (max-width: 575.98px) {
    body.dv-festive .dv-ledge { display: none; }
    body.dv-festive .dv-wish-txt { font-size: 17px; }
    body.dv-festive .dv-auth-lantern { width: 48px; }
    body.dv-festive .dv-rangoli { width: 300px; height: 300px; bottom: -150px; }
    body.dv-festive .dv-rangoli--l { left: -150px; }
    body.dv-festive .dv-rangoli--r { right: -150px; }
  }

  @media (prefers-reduced-motion: reduce) {
    body.dv-festive .dv-aura,
    body.dv-festive .dv-rangoli,
    body.dv-festive .dv-lantern,
    body.dv-festive .dv-stars,
    body.dv-festive .dv-stars::after,
    body.dv-festive .dv-hanging,
    body.dv-festive .dv-wish-txt,
    body.dv-festive .dv-auth-lantern,
    html body.dv-festive .app-header.modern-header::before { animation: none !important; }

    /* the wish is finished, so nothing is being typed */
    body.dv-festive .dv-cur { display: none; }
  }
}

@media print {
  .dv-sky, .dv-banner, .dv-auth, .dv-pill { display: none !important; }
}