/* Klimaatroute-huisstijl: Clash Display voor koppen, Satoshi voor tekst.
   De fontbestanden staan lokaal in /static/fonts, dus de app doet geen
   verzoeken naar buiten en werkt ook zonder internet. */
@font-face {
  font-family: "Clash Display";
  src: url("/static/fonts/ClashDisplay-Semibold.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("/static/fonts/ClashDisplay-Bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/static/fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/static/fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/static/fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  --blauw-200: #C3CDEE;
  --blauw-300: #9CACE3;
  --blauw-600: #3250B3;
  --blauw-700: #273E8B;
  --blauw-850: #162450;
  --groen-200: #DBF1C1;
  --groen-300: #C3E897;
  --groen-600: #79BB2A;
  --groen-700: #5E9221;
  --groen-800: #436817;
  --teal-200: #B3F6FF;
  --teal-600: #00CAE5;
  --teal-800: #007080;
  --turquoise-400: #7ECEC8;
  --oranje-200: #FFD0B3;
  --oranje-300: #FFB080;
  --oranje-500: #FF711A;
  --oranje-700: #B24400;
  --grijs-050: #F0F1F2;
  --grijs-100: #D6D9DB;
  --grijs-300: #9FA6AC;
  --grijs-500: #6B737B;
  --grijs-800: #242629;

  --rond: 18px;
  --rond-klein: 12px;
  /* Vlak, zonder schaduwen: rust komt van ruimte en kleur, niet van diepte. */
  --schaduw: none;
}

* { box-sizing: border-box; }

/* Achter de pagina ligt het donkerblauw van de balk. Wat er dan ook even
   doorheen schijnt — een overgang, doorscrollen voorbij het einde, de strook
   bij de klok en batterij — het is nooit wit. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--blauw-850);
  /* Ruimte voor de schuifbalk blijft altijd staan. Anders wordt het venster
     op een korte pagina breder en verspringt alles wat gecentreerd staat. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--grijs-050);
  color: var(--grijs-800);
  font-family: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Clash Display", system-ui, sans-serif;
  font-weight: 700;
  color: var(--blauw-850);
  line-height: 1.15;
  /* Clash Display staat van zichzelf krap; iets meer woordruimte leest beter. */
  word-spacing: .08em;
  margin: 0 0 .25rem;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

a { color: var(--teal-800); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }

/* --- kop met tabs bovenaan --- */

.kop {
  position: sticky; top: 0; z-index: 10;
  background: var(--blauw-850);
  color: #fff;
  /* De ruimte voor de inkeping hoort bóven de knoppen, anders vallen ze
     achter de klok en de batterij. */
  padding: calc(.55rem + env(safe-area-inset-top)) 0 .55rem;
}
/* De zijmarge zit hierbinnen, net als bij .inhoud. Anders staat het logo op
   een breed scherm niet op één lijn met de pagina eronder. */
.kop__binnen {
  max-width: 48rem; margin: 0 auto; padding: 0 .85rem;
  display: flex; align-items: center; gap: .75rem;
}
.merk { flex: none; display: block; line-height: 0; }
.merk img { display: block; width: 30px; height: 30px; }

/* Tabs: horizontaal scrollbaar op smalle schermen, zoals een app. */
.tabs {
  display: flex; gap: .3rem; align-items: center;
  flex: 1; min-width: 0;
}
.tab {
  display: inline-flex; align-items: center; gap: .35rem; flex: none;
  height: 34px; padding: 0 .75rem; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: #fff;
  font-size: .82rem; font-weight: 700; text-decoration: none;
  transition: background .15s, color .15s;
}
.tab:hover { background: rgba(255, 255, 255, .22); }
.tab--aan, .tab--aan:hover { background: var(--groen-600); color: #fff; }
.tab__icoon { width: 18px; height: 18px; flex: none; }
.tab__icoon svg { display: block; width: 100%; height: 100%; }

/* De twee tabs waar je het vaakst bent houden hun naam, en delen de ruimte
   gelijk zodat ze even breed zijn. Profiel en Beheer zijn een icoon; welke
   pagina dat is, zegt de titel bovenaan. */
.tab--breed {
  flex: 1 1 0; min-width: 0; justify-content: center;
  padding: 0 .5rem; gap: .3rem; font-size: .78rem;
}
.tab--breed .tab__naam {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tab--icoon { padding: 0 .5rem; }
.tab--icoon .tab__naam {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.inhoud {
  padding: 1rem .85rem 3rem;
  max-width: 48rem; margin: 0 auto;
}
/* Bij het vegen schuift de inhoud een klein stukje mee; de balk blijft staan.
   Laat je los zonder door te vegen, dan veert hij terug. */
.inhoud--terug { transition: transform .18s ease-out; }
.fijndruk { color: var(--grijs-500); font-size: .84rem; margin: 0 0 .8rem; }

/* --- meldingen --- */

.melding {
  position: relative;
  padding: .8rem 1rem .8rem 1.1rem;
  border-radius: var(--rond-klein);
  margin: 0 0 1rem;
  background: #fff;
  font-size: .95rem;
  overflow: hidden;
}
.melding::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: var(--blauw-600);
}
.melding--ok::before { background: var(--groen-600); }
.melding--fout::before { background: var(--oranje-500); }

/* --- overgang tussen pagina's --- */
/* Browsers die dit kennen laten de nieuwe pagina overvloeien. De rest springt
   gewoon, zoals altijd. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  /* De oude pagina blijft staan, de nieuwe komt eroverheen. Zouden ze allebei
     half doorzichtig zijn, dan schijnt de achtergrond ertussendoor. */
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: pagina-erbij .07s ease-out both; }
}
@keyframes pagina-erbij { from { opacity: 0; } }

/* --- uitleg per pagina --- */
/* Weggevouwen achter een i, zodat de pagina rustig blijft voor wie het al weet. */
.uitleg-blok { margin: 0 0 1rem; }
.uitleg-knop {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .8rem .35rem .35rem; border-radius: 999px;
  background: #fff; color: var(--blauw-850);
  font-size: .8rem; font-weight: 700; cursor: pointer;
  list-style: none;
}
.uitleg-knop::-webkit-details-marker { display: none; }
.uitleg-knop:hover { background: var(--grijs-050); }
.uitleg-knop__teken {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blauw-850); color: #fff;
  font-family: "Clash Display", system-ui, sans-serif; font-size: .8rem;
}
.uitleg-blok[open] .uitleg-knop { background: var(--blauw-850); color: #fff; }
.uitleg-blok[open] .uitleg-knop__teken { background: #fff; color: var(--blauw-850); }
.uitleg-knop:focus-visible {
  outline: 3px solid var(--blauw-600); outline-offset: 2px;
}
.uitleg-blok__tekst {
  margin-top: .5rem; padding: .9rem 1rem; border-radius: var(--rond);
  background: #fff; color: var(--grijs-800); font-size: .88rem; line-height: 1.5;
}
.uitleg-blok__tekst p { margin: 0 0 .6rem; }
.uitleg-blok__tekst p:last-child { margin-bottom: 0; }
.uitleg-blok__tekst strong { color: var(--blauw-850); }

/* --- beheer: tweede navigatielaag --- */
/* Onder de titel Beheer staat de naam van de subpagina, een maat kleiner. */
.subkop {
  font-family: "Clash Display", system-ui, sans-serif;
  font-size: 1.5rem; font-weight: 700; color: var(--blauw-850);
  margin: 0;
}
/* Zelfde vorm als de balk bovenaan, maar licht: het is een laag lager. */
.subnav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.subnav__knop {
  padding: .45rem .9rem; border-radius: 999px;
  background: #fff; color: var(--blauw-850);
  font-size: .82rem; font-weight: 700; text-decoration: none;
}
.subnav__knop:hover { background: var(--grijs-050); }
/* De actieve knop houdt zijn donkere vlak, anders valt de witte tekst weg.
   Zelfde afspraak als bij de tabs bovenaan. */
.subnav__knop--aan { background: var(--blauw-850); color: #fff; }
.subnav__knop--aan:hover { background: var(--blauw-700); }

.uitleg { color: var(--grijs-500); font-size: .88rem; }

/* --- dagen --- */

.dagen { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .4rem; }
.dag {
  position: relative;
  background: #fff;
  border-radius: var(--rond-klein);
  overflow: hidden;
}
.dag::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--grijs-100);
  transition: background .15s;
}
.dag:has(input:checked)::before, .dag:has(.badge--ja)::before { background: var(--groen-600); }
.dag:has(input:checked) { background: linear-gradient(90deg, #fbfef7, #fff 40%); }
.dag--vrij { background: transparent; border: 1px dashed var(--grijs-100); }
.dag--vrij::before { display: none; }
.dag--vandaag { box-shadow: inset 0 0 0 2px var(--turquoise-400); }
.dag--vandaag .rij__dag::after { content: " · vandaag"; color: var(--teal-800); font-size: .75rem; }

/* Twee regels per dag: naam met stempel, daaronder de details met de actie.
   Zo past een hele week op één telefoonscherm. */
.rij {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem .6rem; padding: .6rem .8rem; flex-wrap: wrap;
}
.rij--onder { padding-top: 0; gap: .6rem; }
.rij__dag {
  font-family: "Clash Display", system-ui, sans-serif;
  font-weight: 600; font-size: 1rem; color: var(--blauw-850);
  word-spacing: .06em;
}
.rij__bij { color: var(--grijs-500); font-size: .82rem; min-width: 0; }
/* Breekt de regel af, dan blijft de knop toch in de rechterkolom staan. */
.rij form { flex: none; margin-left: auto; }

/* Springt de pagina na een ruilactie naar een dag, dan moet die onder de
   vaste kop uitkomen en niet erachter. */
.dag { scroll-margin-top: calc(5rem + env(safe-area-inset-top)); }

/* Aanvinkbare rij: op Aanmelden en bij je vaste lunchdagen. */
.kiesrij {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .8rem; min-height: 56px; cursor: pointer;
}
.kiesrij .rij__dag { flex: 1; min-width: 0; }

/* Aanmelden toont dezelfde stempels als Mijn week. Beide standen staan in de
   pagina; het verborgen vinkje bepaalt welke zichtbaar is. */
.kiesrij input:not(:checked) ~ .stempel--aangemeld,
.kiesrij input:checked ~ .stempel--afgemeld { display: none; }
.kiesrij:hover .stempel { box-shadow: inset 0 0 0 1.5px var(--grijs-100); }
.kiesrij input:focus-visible ~ .stempel {
  outline: 3px solid var(--blauw-600); outline-offset: 2px;
}

/* Visueel verborgen invoer: de stempel ernaast laat de stand al zien, terwijl
   toetsenbord en screenreader gewoon het keuzevakje krijgen. */
.kiesrij input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Kleine, grijze bijtekst; komt ook los van een dagrij voor. */
.dag__bij { color: var(--grijs-500); font-size: .84rem; }

.menu { font-size: .85rem; font-weight: 500; color: var(--groen-800); margin: 0; }

/* Net geruild: een paar regels, geen kaart met kop. */
.nieuws {
  list-style: none; margin: 0 0 .9rem; padding: .6rem .8rem;
  background: var(--groen-200); border-radius: var(--rond-klein);
  color: var(--groen-800); font-size: .85rem;
  display: grid; gap: .2rem;
}

.paginakop { margin-bottom: .9rem; }
.paginakop__bij { margin: .1rem 0 0; color: var(--grijs-500); font-size: .85rem; }

/* Status of actie? De vorm zegt het:
   rechthoekig en gevuld = informatie, rond met een rand = knop.
   De icoontjes zijn overal even groot en zeggen wát er gebeurt. */
.vorm { width: 16px; height: 16px; flex: none; display: block; }

.stempel {
  /* Zelfde pilvorm als de tabs bovenaan, en overal even breed. */
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  height: 28px; min-width: 8.4rem; padding: 0 .7rem; border-radius: 999px;
  font-size: .76rem; font-weight: 700; white-space: nowrap; flex: none;
  background: var(--grijs-050); color: var(--grijs-500);
}
.stempel--vrij { min-width: 0; }
.stempel--aangemeld { background: var(--groen-200); color: var(--groen-800); }
.stempel--afgemeld { background: var(--grijs-050); color: var(--grijs-500); }
.stempel--aangeboden { background: var(--oranje-200); color: var(--oranje-700); }
.stempel--zoekt { background: var(--teal-200); color: var(--teal-800); }
.stempel--vrij { background: transparent; color: var(--grijs-500); font-weight: 500; }

/* De kleur van het stempel keert terug in de rand van de dag. */
.dag--aangemeld::before { background: var(--groen-600); }
.dag--afgemeld::before { background: var(--grijs-100); }
.dag--aangeboden::before { background: var(--oranje-500); }
.dag--zoekt::before { background: var(--teal-800); }
.dag--voorbij { opacity: .65; }

.badge {
  padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  white-space: nowrap; letter-spacing: .01em;
}
.badge--ja { background: var(--groen-200); color: var(--groen-800); }
.badge--nee { background: var(--grijs-050); color: var(--grijs-500); }

/* --- knoppen --- */

.opslaanbalk {
  position: sticky; bottom: .6rem;
  padding: .6rem 0 .25rem;
  background: linear-gradient(to top, var(--grijs-050) 65%, transparent);
}
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .75rem 1.1rem; border: 0; border-radius: 999px;
  background: #fff; color: var(--blauw-850); font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
}
.knop:active { transform: scale(.985); }
.knop--cta {
  background: var(--oranje-500); color: #fff; width: 100%;
  font-size: .95rem; letter-spacing: .01em; padding: .85rem 1.1rem;
}
.knop--cta:hover { background: var(--oranje-700); }
.knop--cta:active { transform: scale(.985); }
.knop--daad {
  /* Exact de maten van een stempel: alleen de vulling verschilt. */
  position: relative;
  height: 28px; min-width: 8.4rem; padding: 0 .7rem; gap: .35rem;
  border-radius: 999px; font-size: .76rem; font-weight: 700;
  background: #fff; border: 1.5px solid currentColor; box-shadow: none;
}
/* Het raakvlak is groter dan de knop zelf, zodat hij op een telefoon goed te
   raken blijft zonder dat hij dikker oogt. */
.knop--daad::after { content: ""; position: absolute; inset: -8px; }

.knop--geef { color: var(--oranje-700); }
.knop--geef:hover { background: var(--oranje-200); }
.knop--zoek { color: var(--teal-800); }
.knop--zoek:hover { background: var(--teal-200); }
.knop--stil { color: var(--grijs-500); }
.knop--stil:hover { background: var(--grijs-050); }

.knoppen { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
/* Een witte knop op een witte kaart is geen knop meer; daar krijgt hij een
   eigen vlak. De oranje hoofdknop houdt zijn kleur. */
.kaart .knoppen .knop:not(.knop--cta) { background: var(--grijs-050); }
.link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--teal-800); font: inherit; text-decoration: underline;
}
/* Een waarde die je niet kunt aanpassen, zoals je inlogadres. */
.vast {
  margin: 0 0 .3rem; padding: .8rem .9rem;
  background: var(--grijs-050); border-radius: var(--rond-klein);
  font-weight: 700; color: var(--blauw-850);
  overflow-wrap: anywhere;
}

.intro { margin-bottom: 1.25rem; }
.intro__tekst { color: var(--grijs-500); font-size: 1.05rem; max-width: 30rem; }
.afsluiten { margin-top: 2rem; text-align: center; }
.afsluiten .link { color: var(--grijs-500); }

/* --- kaarten, formulieren, tabellen --- */

.kaart, .blok {
  background: #fff; border-radius: var(--rond); padding: 1rem;
  margin-bottom: .9rem;
}
.blok > h2 { margin: 1.2rem 0 .3rem; }
.blok > h2:first-child { margin-top: 0; }
.blok > .knop { width: 100%; margin-top: .4rem; }
.kaart--vandaag { box-shadow: inset 0 0 0 2px var(--turquoise-400); }
.kaart > h2 { margin-bottom: .4rem; }
.kaart > .uitleg { margin-top: 0; }
.kaart > .knop { width: 100%; }
.fijndruk { color: var(--grijs-500); font-size: .85rem; margin: 0 0 1rem; }

/* Keuzerijen binnen een kaart: geen losse kaartjes, wel dezelfde raakvlakken. */
.keuzelijst { list-style: none; margin: .5rem 0 1.25rem; padding: 0; }
.keuzelijst li + li { border-top: 1px solid var(--grijs-050); }
/* Binnen een kaart lopen de rijen mee met de velden eromheen; op Aanmelden
   staan ze los op de pagina en houden ze hun eigen marge. */
.keuzelijst .kiesrij { padding-left: 0; padding-right: 0; }

.velden-naast {
  display: grid; gap: 0 .75rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.groepskop {
  margin: 1.1rem 0 .45rem; font-size: .74rem; font-weight: 700;
  color: var(--grijs-500); text-transform: uppercase; letter-spacing: .07em;
  display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap;
}
.groepskop__bij { font-weight: 500; text-transform: none; letter-spacing: 0; }

.veld { display: block; margin-bottom: 1rem; border: 0; padding: 0; }
.veld > span, .veld > legend {
  display: block; font-size: .82rem; font-weight: 700; margin-bottom: .3rem;
  color: var(--blauw-850);
}
.veld input, .veld select {
  width: 100%; padding: .8rem .9rem; font: inherit;
  border: 1.5px solid var(--grijs-100); border-radius: var(--rond-klein);
  background: #fff; color: var(--grijs-800);
  transition: border-color .15s, box-shadow .15s;
}
.veld input:focus, .veld select:focus {
  outline: none; border-color: var(--blauw-600);
  box-shadow: 0 0 0 3px rgba(50, 80, 179, .16);
}
.cijfers {
  font-size: 1.6rem; font-weight: 700; letter-spacing: .25em;
  text-align: center; font-family: "Clash Display", system-ui, monospace;
}
.vinkjes { display: grid; gap: .4rem; }
.vinkjes label { display: flex; gap: .5rem; align-items: center; }
.vinkjes input { width: auto; }

.namen { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .2rem; }
.namen--stil { color: var(--grijs-500); }
/* Naam en mailadres naast elkaar, op een smal scherm onder elkaar: HR leest
   hier af of iemand die aanschuift ook echt is aangemeld. */
.namen li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; }
details summary { cursor: pointer; color: var(--teal-800); font-size: .9rem; font-weight: 500; }

.tabel {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: var(--rond); overflow: hidden; margin-bottom: 1rem;
}
.tabel th, .tabel td {
  text-align: left; padding: .7rem .8rem;
  border-bottom: 1px solid var(--grijs-050); font-size: .9rem; vertical-align: top;
}
.tabel th {
  background: var(--blauw-850); color: #fff; font-weight: 700;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
}
.tabel tr.uit { color: var(--grijs-500); }

/* --- rapportage: een brede tabel op een smal scherm --- */
.tabelrand { overflow-x: auto; }
.tabel--rapport { white-space: nowrap; }
.tabel--rapport th, .tabel--rapport td {
  padding: .4rem .5rem; font-size: .8rem; text-align: center; vertical-align: middle;
}
/* De naam blijft staan terwijl je langs de dagen schuift. */
.tabel--rapport .kolom--naam {
  text-align: left; position: sticky; left: 0; background: #fff; z-index: 1;
}
.tabel--rapport thead .kolom--naam { background: var(--blauw-850); }
.tabel--rapport .kolom--naam .dag__bij { display: block; font-size: .72rem; }
.tabel--rapport .cel--ja { color: var(--groen-700); font-weight: 700; }
.tabel--rapport .cel--nee { color: var(--grijs-300); }
.tabel--rapport tfoot td {
  border-top: 2px solid var(--grijs-100); font-weight: 700; background: var(--grijs-050);
}
.tabel--rapport tfoot .kolom--naam { background: var(--grijs-050); }

/* Alleen voor een screenreader: de tabel leest anders als losse tekens. */
.visueel-verborgen {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media (min-width: 46rem) {
  h1 { font-size: 2.4rem; }
  /* Op een breed scherm is er ruimte voor alle namen, ook van Profiel en
     Beheer, en hoeven de brede tabs de ruimte niet meer op te vullen. */
  /* Alle vier even breed en even uitgelijnd: op een breed scherm is het één
     rij knoppen, geen twee soorten. */
  .tab--breed, .tab--icoon {
    /* Ruim genoeg voor het langste woord, anders wordt die ene knop breder. */
    flex: none; min-width: 7.5rem; justify-content: center;
    padding: 0 .75rem; gap: .35rem; font-size: .82rem;
  }
  .tab--icoon .tab__naam { position: static; width: auto; height: auto;
    margin: 0; clip-path: none; }
  .rij, .kiesrij { padding-left: 1rem; padding-right: 1rem; }
  .kop { padding: calc(1rem + env(safe-area-inset-top)) 0 1rem; }
  .kop__binnen { padding: 0 1.5rem; }
  .kop__nav { display: block; }
  .inhoud { padding: 1.5rem 1.5rem 3rem; }
  .opslaanbalk { bottom: 0; }
  .knop--cta { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}