/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 31 2026 | 15:30:36 */
/*
  Name:         site-darkmode
  Type:         CSS
  Area:         website/dark-mode.md
  Purpose:      Dark mode: theme variables under html[data-theme="dark"] and the dark overrides for every part of the site.
  Depends on:   site-darkmode.js (sets data-theme on <html> and builds the switcher)
  Used by:      Every page
  Loads:        Simple Custom CSS and JS · Where on site: Frontend · Where in page: In the header
  Last updated: 13 October 2026
*/

/* =============================================================
   URAKAN Magazine — Dark mode (CSS)
   Simple Custom CSS and JS → Add Custom CSS
   Where on site: Frontend · Where in page: In the header
   Pairs with: urakan-darkmode.js
   ============================================================= */

/* ---------- 0. iPhone text sizing ----------
   Stops iPhone Safari from enlarging text on its own (it does this when
   it thinks a block of text is too small). Site-wide, light and dark.
   If your Typography snippet already has this, delete one of the two. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---------- 1. Palette ----------
   Variable names in this file: --urk-cream, --urk-ink, --urk-red,
   --urk-red-light, --urk-dark-bg, --urk-dark-field, --urk-bg,
   --urk-text, --urk-muted, --urk-rule and --urk-accent are COLOURS only.
   Never use them for a size. The switcher's own variables (--urk-s,
   --urk-p, --urk-w, --urk-h, --urk-k, --urk-inner, --urk-width,
   --urk-bottom, --urk-grow) are sizes and numbers only. */
:root {
  --urk-cream: #F5F0E8;
  --urk-ink: #1A1712;
  --urk-red: #C0392B;          /* original red: filled buttons */
  --urk-dark-bg: #323230;
  --urk-dark-field: #3D3D3A;   /* form fields, dropdowns */
  --urk-red-light: #E0564A;    /* lightened red: thin/small marks on dark */
  color-scheme: light;
}

html[data-theme="dark"] {
  --urk-bg: var(--urk-dark-bg);
  --urk-text: var(--urk-cream);
  --urk-muted: rgba(245, 240, 232, 0.62);
  --urk-rule: rgba(245, 240, 232, 0.22);
  --urk-accent: var(--urk-red-light);
  color-scheme: dark;
}

/* ---------- 2. Theme colour presets ----------
   Flips the theme's own colour slots (confirmed from the site)
   so everything that uses them follows automatically.
   WordPress's generic defaults (white, black, vivid-*, pale-*)
   are left alone on purpose. */
html[data-theme="dark"],
html[data-theme="dark"] body {
  --wp--preset--color--background: var(--urk-dark-bg);      /* was #fafafa */
  --wp--preset--color--tertiary: var(--urk-dark-bg);        /* was #fafafa */
  --wp--preset--color--foreground: var(--urk-cream);        /* was #111111 */
  --wp--preset--color--primary: var(--urk-cream);           /* was #111111 */
  --wp--preset--color--custom-color-1: var(--urk-cream);    /* was #000 */
  --wp--preset--color--secondary: rgba(245, 240, 232, .06); /* was a faint dark tint */
}

/* ---------- 3. Page base ---------- */
html[data-theme="dark"] body {
  background-color: var(--urk-bg) !important;
  color: var(--urk-text) !important;
}
/* ---------- Theme switch fade ----------
   Main method (Safari 18+, Chrome, Edge, Firefox 144+): the browser
   photographs the page, applies the new theme and cross-fades the two
   pictures on the graphics chip. Smooth regardless of page size. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .45s;
  animation-timing-function: ease;
}
/* The switcher is left out of the cross-fade so its knob slide
   stays visible and crisp */
.urk-switch {
  view-transition-name: urk-switch;
}
::view-transition-group(urk-switch),
::view-transition-new(urk-switch) {
  animation: none;
}
::view-transition-old(urk-switch) {
  display: none;
}

/* Backup for older browsers: for half a second, every element fades
   its own colours. The JS adds and removes the class. */
html.urk-theming,
html.urk-theming *:not(.urk-switch):not(.urk-switch *),
html.urk-theming *:not(.urk-switch):not(.urk-switch *)::before,
html.urk-theming *:not(.urk-switch):not(.urk-switch *)::after {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease,
              fill .45s ease, stroke .45s ease, filter .45s ease, box-shadow .45s ease !important;
}
html.urk-theming :is(a, span, em, strong, b, i, u, sup, sub, small, cite, q, time, mark, abbr):not(.wp-element-button):not(.wp-block-button__link):not(.urakan-glitch):not(.urk-switch *):not(.wp-block-site-title a):not(.wp-element-caption *) {
  color: inherit !important;
  transition: background-color .45s ease, border-color .45s ease,
              fill .45s ease, stroke .45s ease !important;
}
html[data-theme="dark"] ::selection {
  background: var(--urk-accent);
  color: var(--urk-cream);
}

/* Text: the site sets many elements to black directly, so the
   page colour alone doesn't reach them. Buttons, the glitch logo
   and the switcher are handled separately. Kept at low
   specificity so the caption, drop cap and footnote rules below
   still win. */
html[data-theme="dark"] body :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, td, th, dt, dd, label, legend, caption):where(:not(.urk-switch *, .wp-block-button__link *)) {
  color: var(--urk-text) !important;
}
/* Bold, italic, links and other inline styling follow the text around
   them at rest. Links then turn red on hover and keyboard focus: see
   "Link hover" below (light mode's hover comes from Styles). */
html[data-theme="dark"] body :where(a, span, em, strong, b, i, u, sup, sub, small, cite, q, time, mark, abbr):where(:not(.wp-element-button, .wp-block-button__link, .urakan-glitch, .urk-switch *, .wp-block-button__link *, .wp-block-site-title a)) {
  color: inherit !important;
}
/* The logo and glitch text keep their hover animation, so no !important here */
html[data-theme="dark"] .wp-block-site-title a,
html[data-theme="dark"] .urakan-glitch {
  color: var(--urk-text);
}

/* Header and footer areas painted cream in the site's own CSS */
html[data-theme="dark"] .wp-block-template-part {
  background-color: var(--urk-bg) !important;
}

/* Link hover (dark mode): linked titles and links in running text turn
   the lighter red on hover and keyboard focus, same rule as light mode.
   Not affected: menus (header, submenus, footer), buttons, the topic tags
   under articles (.urk-tags, own hover in the article snippet), the logo and
   glitch text, the switcher. Koleksi keeps its own triggers (below). */
html[data-theme="dark"] body a:not(.wp-element-button):not(.wp-block-button__link):not(.urk-btn-outline a):not(.urk-tags a):not(.wp-block-navigation a):not(.wp-block-site-title a):not(.urakan-glitch):not(.urk-switch):not(.koleksi-page a):is(:hover, :focus-visible),
html[data-theme="dark"] body a:not(.wp-element-button):not(.wp-block-button__link):not(.urk-btn-outline a):not(.urk-tags a):not(.wp-block-navigation a):not(.wp-block-site-title a):not(.urakan-glitch):not(.urk-switch):not(.koleksi-page a):is(:hover, :focus-visible) :is(h1, h2, h3, h4, h5, h6, p, span, em, strong, b, i, small, time, cite):not(.urakan-glitch) {
  color: var(--urk-accent) !important;
}
/* Red text that belongs to other snippets (homepage sections, single
   post, footer). The rules above force links and inline text to follow
   the surrounding cream, which would erase these reds; name them here
   so they keep their red, as the lighter red. */
html[data-theme="dark"] body :is(
  .urk-kicker a:first-child,
  .urk-mix__all a,
  .urk-index__item strong,
  .urakan-genre,
  .urakan-genre a,
  .footer-label
) {
  color: var(--urk-accent) !important;
}
/* URAKAN glitch text inside a footer label follows the label's red
   (no !important, so the glitch hover animation still runs) */
html[data-theme="dark"] body .footer-label .urakan-glitch {
  color: inherit;
}
html[data-theme="dark"] body :is(.urk-pair__cols, .urk-pair__second)::after {
  color: var(--urk-accent) !important;
}

/* Koleksi: same triggers as koleksi.css (title or thumbnail hover, focus) */
html[data-theme="dark"] body .koleksi-page .koleksi-entry:has(.koleksi-entry-title a:hover) .koleksi-entry-title a,
html[data-theme="dark"] body .koleksi-page .koleksi-entry:has(.koleksi-thumb:hover) .koleksi-entry-title a,
html[data-theme="dark"] body .koleksi-page .koleksi-entry-title a:focus-visible {
  color: var(--urk-accent) !important;
}

/* ---------- 4. Catch-alls for colours typed directly into blocks ---------- */
html[data-theme="dark"] [style*="background-color:#f5f0e8" i],
html[data-theme="dark"] [style*="background-color: #f5f0e8" i] {
  background-color: var(--urk-bg) !important;
}
html[data-theme="dark"] [style*="color:#1a1712" i]:not([style*="background-color:#1a1712" i]),
html[data-theme="dark"] [style*="color: #1a1712" i]:not([style*="background-color: #1a1712" i]) {
  color: var(--urk-text) !important;
}
html[data-theme="dark"] [style*="border"][style*="#1a1712" i] {
  border-color: var(--urk-rule) !important;
}

/* ---------- 5. Navigation ---------- */
html[data-theme="dark"] .wp-block-navigation__submenu-container {
  background-color: var(--urk-dark-field) !important;
  color: var(--urk-text) !important;
  border-color: var(--urk-rule) !important;
}
html[data-theme="dark"] .wp-block-navigation__submenu-icon,
html[data-theme="dark"] .wp-block-navigation__submenu-icon svg {
  background: transparent !important;
  color: inherit !important;
  stroke: currentColor;
}
html[data-theme="dark"] .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--urk-bg) !important;
  color: var(--urk-text) !important;
}

/* ---------- 6. Rules, separators, tables ---------- */
html[data-theme="dark"] hr,
html[data-theme="dark"] .wp-block-separator {
  color: var(--urk-rule) !important;
  border-color: var(--urk-rule) !important;
}
html[data-theme="dark"] .wp-block-separator.has-background {
  background-color: var(--urk-rule) !important;
}
html[data-theme="dark"] :is(.wp-block-table, table) :is(table, thead, tbody, tfoot, tr, th, td),
html[data-theme="dark"] .wp-block-table,
html[data-theme="dark"] table {
  background-color: transparent !important;
  border-color: var(--urk-rule) !important;
}
html[data-theme="dark"] .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: rgba(245, 240, 232, .05) !important;
}

/* ---------- 7. Secondary text ---------- */
html[data-theme="dark"] figure.wp-block-image figcaption.wp-element-caption,
html[data-theme="dark"] .wp-caption .wp-caption-text,
html[data-theme="dark"] .wp-element-caption {
  color: var(--urk-muted) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .wp-element-caption :is(em, i, a, span, small) {
  color: inherit !important;
}
html[data-theme="dark"] .wp-element-caption :is(strong, b) {
  color: rgba(245, 240, 232, .85) !important;
}

/* ---------- 8. Red accents (lightened) ---------- */
html[data-theme="dark"] .has-drop-cap:not(:focus)::first-letter {
  color: var(--urk-accent) !important;
}
html[data-theme="dark"] #urakan-progress {
  background: var(--urk-accent) !important;
}
/* Footnote flash: more specific than the footnote snippet's own
   rule, so the lighter red wins whichever snippet loads last */
html[data-theme="dark"] body sup.fn.footnote-flash,
html[data-theme="dark"] body sup.fn.footnote-flash a,
html[data-theme="dark"] body .wp-block-footnotes li.footnote-flash,
html[data-theme="dark"] body .wp-block-footnotes li.footnote-flash a {
  color: var(--urk-accent) !important;
}

/* Red text chosen in the editor turns to the lighter red.
   Two ways the editor stores it:
   1. a custom colour, written on the block itself as color:#c0392b
      (e.g. the category block in the single post template)
   2. the palette colour "Custom urakan red", stored as a class
   Red button fills are left alone. */
html[data-theme="dark"] body [style*="color:#c0392b" i]:not([style*="background-color:#c0392b" i]),
html[data-theme="dark"] body [style*="color: #c0392b" i]:not([style*="background-color: #c0392b" i]) {
  color: var(--urk-accent) !important;
}

/* Filled buttons keep the original red; cream text reads best on it */
html[data-theme="dark"] .wp-element-button,
html[data-theme="dark"] .wp-block-button__link {
  color: var(--urk-cream) !important;
}
html[data-theme="dark"] body .has-custom-urakan-red-color,
html[data-theme="dark"] body [class*="urakan-red-color"] {
  color: var(--urk-accent) !important;
}

/* The footer subscribe button is cream in light mode; in dark mode
   it joins the other buttons in red */
html[data-theme="dark"] .wp-block-jetpack-button .wp-block-button__link,
html[data-theme="dark"] .wp-block-jetpack-contact-form .wp-block-button__link {
  background-color: var(--urk-red) !important;
  border-color: var(--urk-red) !important;
}

/* ---------- 9. Images: subtle dim, never inverted ---------- */
html[data-theme="dark"] .wp-block-image img,
html[data-theme="dark"] .wp-block-post-featured-image img,
html[data-theme="dark"] .wp-block-gallery img,
html[data-theme="dark"] .wp-block-media-text__media img,
html[data-theme="dark"] .wp-block-cover__image-background,
html[data-theme="dark"] .entry-content img:not(.wp-smiley):not(.emoji) {
  filter: brightness(.86);
}

/* ---------- 10. Subscription form (footer) ---------- */
html[data-theme="dark"] .wp-block-jetpack-contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
html[data-theme="dark"] .wp-block-jetpack-contact-form textarea,
html[data-theme="dark"] .wp-block-jetpack-contact-form select,
html[data-theme="dark"] .contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
html[data-theme="dark"] .contact-form textarea {
  background-color: var(--urk-dark-field) !important;
  color: var(--urk-text) !important;
  border-color: var(--urk-rule) !important;
}
html[data-theme="dark"] .wp-block-jetpack-contact-form ::placeholder,
html[data-theme="dark"] .contact-form ::placeholder {
  color: var(--urk-muted) !important;
}
html[data-theme="dark"] .wp-block-jetpack-contact-form label,
html[data-theme="dark"] .contact-form label {
  color: var(--urk-text) !important;
}
/* Radio buttons and checkboxes: drawn by us in dark mode, so the
   selected state shows whatever Jetpack's own styling does.
   Frame in muted cream; selected dot/tick in the lighter red. */
html[data-theme="dark"] :is(.wp-block-jetpack-contact-form, .contact-form) input:is([type="radio"], [type="checkbox"]) {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-block !important;
  position: relative !important;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 1.1em !important;
  height: 1.1em !important;
  padding: 0 !important;
  margin-top: 0 !important;    /* browsers give radios and checkboxes */
  margin-bottom: 0 !important; /* different defaults; this levels them */
  background: transparent !important;
  border: 1.5px solid var(--urk-muted) !important;
  box-shadow: none !important;
  font-size: inherit !important; /* size follows the label text */
  vertical-align: -0.15em;
  cursor: pointer;
}
html[data-theme="dark"] :is(.wp-block-jetpack-contact-form, .contact-form) input[type="radio"] {
  border-radius: 50% !important;
}
html[data-theme="dark"] :is(.wp-block-jetpack-contact-form, .contact-form) input[type="checkbox"] {
  border-radius: 3px !important;
}
html[data-theme="dark"] :is(.wp-block-jetpack-contact-form, .contact-form) input:is([type="radio"], [type="checkbox"])::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  margin: 0 !important;
  border: 0 !important;
  background: var(--urk-accent) !important;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .15s ease;
}
html[data-theme="dark"] :is(.wp-block-jetpack-contact-form, .contact-form) input[type="radio"]::before {
  content: none !important;
  display: none !important;
}
html[data-theme="dark"] :is(.wp-block-jetpack-contact-form, .contact-form) input[type="radio"]:checked {
  background: radial-gradient(circle, var(--urk-accent) 0 42%, transparent 47%) !important;
}
html[data-theme="dark"] :is(.wp-block-jetpack-contact-form, .contact-form) input[type="checkbox"]::before {
  width: .62em !important;
  height: .62em !important;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}
html[data-theme="dark"] :is(.wp-block-jetpack-contact-form, .contact-form) input:is([type="radio"], [type="checkbox"])::after {
  content: none !important;
  display: none !important;
}
html[data-theme="dark"] :is(.wp-block-jetpack-contact-form, .contact-form) input:is([type="radio"], [type="checkbox"]):checked {
  border-color: var(--urk-accent) !important;
}
html[data-theme="dark"] :is(.wp-block-jetpack-contact-form, .contact-form) input[type="checkbox"]:checked::before {
  transform: translate(-50%, -50%) scale(1);
}
html[data-theme="dark"] :is(.wp-block-jetpack-contact-form, .contact-form) input:is([type="radio"], [type="checkbox"]):focus-visible {
  outline: 2px solid var(--urk-accent);
  outline-offset: 2px;
}

/* ---------- 11. Ant easter egg: red ant, cream full stop ---------- */
html[data-theme="dark"] .urakan-ant [fill]:not([fill="none"]):not(.urakan-ant-carried) {
  fill: var(--urk-accent);
}
html[data-theme="dark"] .urakan-ant [stroke] {
  stroke: var(--urk-accent);
}
html[data-theme="dark"] .urakan-ant .urakan-ant-carried {
  fill: var(--urk-cream);
}
html[data-theme="dark"] .urakan-ant-dot {
  background: var(--urk-cream) !important;
}

/* ---------- 12. The switcher ---------- */
/* Sizes are calculated from three values:
   --urk-s    overall size (1 = full, .85 on phones)
   --urk-p    how collapsed it is (0 = pill, 1 = circle), set by the JS;
              it starts as a circle everywhere
   --urk-grow 1 in light mode: the cream disc grows as it collapses,
              leaving a thin ring (dark mode keeps its disc size) */
.urk-switch {
  /* position matches the language picker: left edge follows the menu
     (--urk-edge-l comes from the sticky header script) */
  --urk-bottom: 12px;
  --urk-s: 1;
  --urk-p: 1;
  --urk-grow: 1;
  --urk-w: calc(68px * var(--urk-s));
  --urk-h: calc(34px * var(--urk-s));
  --urk-inner: calc(var(--urk-h) - 2px);
  --urk-width: calc(var(--urk-w) - (var(--urk-w) - var(--urk-h)) * var(--urk-p));
  --urk-k: calc(26px * var(--urk-s) + (var(--urk-inner) - 2px - 26px * var(--urk-s)) * var(--urk-p) * var(--urk-grow));
  position: fixed;
  left: var(--urk-edge-l, 20px);
  bottom: calc(var(--urk-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  display: block;
  box-sizing: border-box;
  width: var(--urk-width);
  height: var(--urk-h);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(0, 0, 0);
}
.urk-switch__shell {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: var(--urk-width);
  height: var(--urk-h);
  border: 1px solid transparent;
  border-radius: 999px;
  overflow: hidden;
  background: var(--urk-ink);
  box-shadow: 0 2px 10px rgba(26, 23, 18, .18);
  transition: border-color .35s ease, box-shadow .35s ease;
}
html[data-theme="dark"] .urk-switch__shell {
  border-color: rgba(245, 240, 232, .22);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.urk-switch__track {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--urk-w) - 2px);
  height: var(--urk-inner);
  transform: translate3d(0, 0, 0);
}
/* in dark mode the circle keeps the moon side */
html[data-theme="dark"] .urk-switch__track {
  transform: translate3d(calc((var(--urk-h) - var(--urk-w)) * var(--urk-p)), 0, 0);
}
.urk-switch__knob {
  position: absolute;
  width: var(--urk-k);
  height: var(--urk-k);
  left: calc(var(--urk-inner) / 2 - var(--urk-k) / 2);
  top: calc(var(--urk-inner) / 2 - var(--urk-k) / 2);
  border-radius: 50%;
  background: var(--urk-cream);
  transition: transform .42s cubic-bezier(.65, 0, .35, 1), background-color .42s ease;
}
/* dark mode keeps a fixed-size disc (thicker frame) when collapsed */
html[data-theme="dark"] .urk-switch {
  --urk-grow: 0;
}
html[data-theme="dark"] .urk-switch__knob {
  background: #4A4640; /* warm grey disc behind the cream moon */
  transform: translateX(calc(34px * var(--urk-s)));
}
.urk-switch__icon {
  position: absolute;
  top: 50%;
  width: calc(16px * var(--urk-s));
  height: calc(16px * var(--urk-s));
  margin-top: calc(-8px * var(--urk-s));
  transition: color .42s ease, opacity .42s ease, transform .42s cubic-bezier(.65, 0, .35, 1);
}
.urk-switch__icon--sun {
  left: calc(var(--urk-inner) / 2 - 8px * var(--urk-s));
  color: var(--urk-ink);
  transform: scale(calc(1 + .15 * var(--urk-p)));
}
.urk-switch__icon--moon {
  left: calc(34px * var(--urk-s) + var(--urk-inner) / 2 - 8px * var(--urk-s));
  color: var(--urk-cream);
  opacity: .55;
}
html[data-theme="dark"] .urk-switch__icon--sun  { color: var(--urk-cream); opacity: .55; transform: rotate(-90deg); }
html[data-theme="dark"] .urk-switch__icon--moon {
  color: var(--urk-cream);
  opacity: 1;
}

/* Smooth open/close on hover, tap, a tap elsewhere or the idle timer.
   When scrolling closes it, it follows the page directly instead. */
.urk-switch.is-easing .urk-switch__shell {
  transition: width .3s ease, border-color .35s ease, box-shadow .35s ease;
}
.urk-switch.is-easing .urk-switch__track {
  transition: transform .3s ease;
}
.urk-switch.is-easing .urk-switch__knob {
  transition: transform .42s cubic-bezier(.65, 0, .35, 1), background-color .42s ease, width .3s ease, height .3s ease, left .3s ease, top .3s ease;
}
.urk-switch.is-easing .urk-switch__icon--sun,
.urk-switch.is-easing .urk-switch__icon--moon {
  transition: color .42s ease, opacity .42s ease, transform .3s ease;
}

.urk-switch:focus-visible {
  outline: none;
}
.urk-switch:focus-visible .urk-switch__shell {
  outline: 2px solid var(--urk-red);
  outline-offset: 3px;
}
html[data-theme="dark"] .urk-switch:focus-visible .urk-switch__shell {
  outline-color: var(--urk-red-light);
}

/* Phones and portrait tablets: slightly smaller */
@media (max-width: 1024px) {
  .urk-switch {
    --urk-s: .85;
    --urk-bottom: 4px;
  }
  /* Invisible, larger tap area around the pill (touch screens only) */
  .urk-switch::before {
    content: "";
    position: absolute;
    inset: -12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  .urk-switch__shell,
  .urk-switch__track,
  .urk-switch__knob,
  .urk-switch__icon,
  html.urk-theming,
  html.urk-theming *,
  html.urk-theming *::before,
  html.urk-theming *::after {
    transition: none !important;
  }
}
@media print {
  .urk-switch { display: none; }
}