/* Dorax Finance — the company's fixed costs and reserves in the owner's v6 look (v467, features/phone/r6-co-pages.js). v470: as the household's Plan
   and Goals (look-r6-plan.css, look-r6-goals.css draw them: the classes are theirs), here only the company's colours: its white where the household
   has its lime (the paid circle, the paid line, the rings, the pieces of where it is, the reserve chosen for the button at the thumb), the soon ones
   amber as on its summary. What they share with the summary and the converter: css/look/look-r6-company.css. */
@media (max-width: 920px) {
  /* ---------- the fixed costs ---------- */
  /* the thick line of what is paid, in white */
  :root.in-app.r6.r6-co #view .r6co-thick { background: rgba(239, 241, 246, .1); }
  :root.in-app.r6.r6-co #view .r6co-thick > i { background: var(--co-hi); }
  :root.in-app.r6.r6-co #view .r6-st > b { font-size: clamp(18px, 6.1vw, 24px); }      /* the two figures whole on a narrow phone */
  /* the costs: the soon one amber, the circle filled white once paid; a paid one quiet, its name struck */
  :root.in-app.r6.r6-co #view .r6co-bills .bp-w.soon { padding: 2px 9px; border-radius: 999px; background: rgba(247, 210, 122, .14); color: #F7D27A; font-weight: 500; }
  :root.in-app.r6.r6-co #view .r6co-bills .bp-check.on { background: var(--co-hi); color: var(--co-on); box-shadow: none; }
  :root.in-app.r6.r6-co #view .r6co-bills .bp-row.done .bp-open { opacity: .55; }
  :root.in-app.r6.r6-co #view .r6co-bills .bp-row.done .bp-t > b { text-decoration: line-through; }
  :root.in-app.r6.r6-co #view .bp-note > b { color: #EFF1F6; }

  /* ---------- the reserves: where it is in the shades of the company's white, each reserve its white ring ---------- */
  :root.in-app.r6.r6-co #view .r6co-where i.p0 { background: var(--co-hi); }
  :root.in-app.r6.r6-co #view .r6co-where i.p1 { background: rgba(239, 241, 246, .62); }
  :root.in-app.r6.r6-co #view .r6co-where i.p2 { background: rgba(239, 241, 246, .38); }
  :root.in-app.r6.r6-co #view .r6co-where i.p3 { background: rgba(239, 241, 246, .24); }
  :root.in-app.r6.r6-co #view .r6co-where i.p4 { background: rgba(239, 241, 246, .14); }
  :root.in-app.r6.r6-co #view .r6co-gt { transition: outline-color .25s ease, transform .34s cubic-bezier(.2, .9, .3, 1.25); }
  :root.in-app.r6.r6-co #view .r6co-gt.on { outline: 1.5px solid #D9DCE1; outline-offset: -1.5px; }
  :root.in-app.r6.r6-co #view .r6co-gt .r6-gt-ring { color: #EFF1F6; }
  :root.in-app.r6.r6-co #view .r6co-gt .r6-gt-ring svg:first-child circle { stroke: rgba(239, 241, 246, .12); }
  :root.in-app.r6.r6-co #view .r6co-gt .r6-gt-ring svg:first-child circle.on { stroke: var(--co-hi); }
  :root.in-app.r6.r6-co #view .r6co-gt .r6-gt-ring > svg:last-child { position: relative; width: 26px; height: 26px; stroke-width: 1.7; }
  :root.in-app.r6.r6-co #view .r6co-gt .r6-gt-t > small :is(b, .nw) { white-space: nowrap; }
  :root.in-app.r6.r6-co #view .r6co-gt-m { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; color: #EFF1F6; font-size: 12.5px; font-weight: 500; }
  :root.in-app.r6.r6-co #view .r6co-gt-m.ok { color: rgba(239, 241, 246, .62); }
  :root.in-app.r6.r6-co #view .r6co-gt-m svg { flex: none; width: 13px; height: 13px; stroke-width: 2.8; }
  :root.in-app.r6.r6-co #view .r6-gt-new .r6-gt-plus { background: rgba(239, 241, 246, .1); color: #EFF1F6; }
  @media (max-width: 374px) { :root.in-app.r6.r6-co #view .r6co-gt .r6-gt-ring > svg:last-child { width: 22px; height: 22px; } }
  /* none yet: the shield drawn dashed, its coin in white */
  :root.in-app.r6.r6-co #view .r6co-shield path { stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  :root.in-app.r6.r6-co #view .r6co-shield .o { stroke: rgba(239, 241, 246, .35); stroke-dasharray: 6 6; }
  :root.in-app.r6.r6-co #view .r6co-shield .c { stroke: #EFF1F6; }
  :root.in-app.r6.r6-co #view .r6co-res-none { margin-top: 28px; }

  @media (prefers-reduced-motion: reduce) { :root.in-app.r6.r6-co #view .r6co-gt { transition: none; } }
}