.theme-shoko-aniblackle {
    & {
      --button-danger: #FF5252;
      --button-danger-border: #0B0E17;
      --button-danger-hover: #fa7676;
      --button-danger-text: #010f1c;
      --button-primary: #333;
      --button-primary-border: #333;
      --button-primary-hover: #222;
      --button-primary-text: rgb(150, 179, 150);
      --button-secondary: #333;
      --button-secondary-border: #333;
      --button-secondary-hover: #222;
      --button-secondary-text: rgb(150, 179, 150);
      --header-background: #111;
      --header-icon: #cfd8e3;
      --header-icon-primary: #de7272;
      --header-text: rgb(150, 179, 150);
      --header-text-important: #06C270;
      --header-user-background: #3B82F6;
      --header-user-text: #010f1c;
      --panel-background: #222;
      --panel-background-alt: #111;
      --panel-background-selected-row: rgb(51, 51, 51);
      --panel-background-overlay: #212f3de5;
      --panel-background-poster-overlay: #212f3de5;
      --panel-background-transparent: #222222a6;
      --panel-border: #0B0E17;
      --panel-icon: #cfd8e3;
      --panel-icon-action: rgb(150, 179, 150);
      --panel-icon-danger: #FF5252;
      --panel-icon-important: #06C270;
      --panel-icon-warning: #F1C40F;
      --panel-input: #111;
      --panel-menu-item-background: #333;
      --panel-menu-item-background-hover: #333;
      --panel-menu-item-text: #de7272;
      --panel-table-header: #111;
      --panel-tags: #3f4762;
      --panel-text: #cfd8e3;
      --panel-text-danger: #FF5252;
      --panel-text-important: #06C270;
      --panel-text-other: #AC72F5;
      --panel-text-primary: #de7272;
      --panel-text-warning: #F1C40F;
      --panel-toggle-background: #444;
      --panel-toggle-background-alt: #333;
      --panel-toggle-background-hover: #444;
      --panel-toggle-text: #de7272;
      --panel-toggle-text-alt: rgb(150, 179, 150);
      --slider-background: #0B0E17;
      --slider-background-alt: #171C28;
      --slider-color: rgb(150, 179, 150);
      --slider-color-alt: rgb(150, 179, 150);
      --topnav-background: #333;
      --topnav-border: #0B0E17;
      --topnav-icon: rgb(150, 179, 150);
      --topnav-icon-important: #06C270;
      --topnav-icon-primary: #de7272;
      --topnav-icon-warning: #F1C40F;
      --topnav-text: rgb(150, 179, 150);
      --topnav-text-primary: #de7272;
      --logo-outline: #000;
      --logo-skin: #fdf5e8;
      --logo-face-shadow: #fe514d;
      --logo-eye-ref1: #e3e4d6;
      --logo-eye-ref2: #e8c8bb;
      --logo-eye-ref3: #ffc2b2;
      --logo-eye-gradient1: #ae303b;
      --logo-eye-gradient2: #ec4050;
      --logo-eye-gradient3: #fd877d;
      --logo-hair-gradient1: #c33144;
      --logo-hair-gradient2: #6b8cdb;
      --logo-hair-gradient3: #79f0f8;
    }
  
}


.theme-shoko-nn {
    & {
        /* COLOUR VARIABLES */
        --ui-colour-accent:#ea005e;
        --ui-colour-accent2:#a497b0;
        --ui-colour-highlight:#94aad1;
        --ui-colour-important:#00ab3f;
        --ui-colour-danger:#cc0000;
        --ui-colour-danger-hover:#a30000;
        --ui-colour-warning:#f9c851;
        --ui-colour-base:#1c1c1c;
        --ui-colour-dark:#0f0f0f;
        --ui-colour-dark2:#151515;
        --ui-colour-hover:#2e2e2e;
        --ui-colour-text:#dedede;
        --ui-colour-text-hover:#ffffff;
  
        /* COLOUR REASSIGNMENT */
        --button-danger:var(--ui-colour-danger);
        --button-danger-border:var(--ui-colour-dark);
        --button-danger-hover:var(--ui-colour-danger-hover);
        --button-danger-text:var(--ui-colour-dark);
        --button-primary:var(--ui-colour-accent2);
        --button-primary-border:var(--ui-colour-dark);
        --button-primary-hover:var(--ui-colour-accent);
        --button-primary-text:var(--ui-colour-dark);
        --button-secondary:var(--ui-colour-dark2);
        --button-secondary-border:var(--ui-colour-dark2);
        --button-secondary-hover:var(--ui-colour-hover);
        --button-secondary-text:var(--ui-colour-text-hover);
        --header-background:var(--ui-colour-base);
        --header-icon:var(--ui-colour-text);
        --header-icon-primary:var(--ui-colour-accent);
        --header-text:var(--ui-colour-text-hover);
        --header-text-important:var(--ui-colour-important);
        --header-user-background:var(--ui-colour-accent);
        --header-user-text:var(--ui-colour-accent);
        --panel-background:var(--ui-colour-base);
        --panel-background-alt:var(--ui-colour-dark);
        --panel-background-selected-row:var(--ui-colour-hover);
        --panel-background-overlay:color-mix(in srgb, var(--ui-colour-dark) 90%, transparent);
        --panel-background-poster-overlay:color-mix(in srgb, var(--ui-colour-dark) 70%, transparent);
        --panel-background-transparent:color-mix(in srgb, var(--ui-colour-base) 70%, transparent);
        --panel-border:var(--ui-colour-dark);
        --panel-icon:var(--ui-colour-text);
        --panel-icon-action:var(--ui-colour-highlight);
        --panel-icon-danger:var(--ui-colour-danger);
        --panel-icon-important:var(--ui-colour-important);
        --panel-icon-warning:var(--ui-colour-warning);
        --panel-input:var(--ui-colour-dark2);
        --panel-menu-item-background:var(--ui-colour-dark);
        --panel-menu-item-background-hover:var(--ui-colour-hover);
        --panel-menu-item-text:var(--ui-colour-text-hover);
        --panel-table-header:var(--ui-colour-dark);
        --panel-tags:var(--ui-colour-base);
        --panel-text:var(--ui-colour-text);
        --panel-text-danger:var(--ui-colour-danger);
        --panel-text-important:var(--ui-colour-important);
        --panel-text-other:var(--ui-colour-text);
        --panel-text-primary:var(--ui-colour-highlight);
        --panel-text-warning:var(--ui-colour-warning);
        --panel-toggle-background:var(--ui-colour-dark);
        --panel-toggle-background-alt:var(--ui-colour-dark2);
        --panel-toggle-background-hover:var(--ui-colour-hover);
        --panel-toggle-text:var(--ui-colour-text-hover);
        --panel-toggle-text-alt:var(--ui-colour-text);
        --slider-background:var(--ui-colour-base);
        --slider-background-alt:var(--ui-colour-base);
        --slider-color:var(--ui-colour-dark);
        --slider-color-alt:var(--ui-colour-dark);
        --topnav-background:var(--ui-colour-base);
        --topnav-border:var(--ui-colour-base);
        --topnav-icon:var(--ui-colour-text);
        --topnav-icon-important:var(--ui-colour-important);
        --topnav-icon-primary:var(--ui-colour-accent);
        --topnav-icon-warning:var(--ui-colour-warning);
        --topnav-text:var(--ui-colour-text);
        --topnav-text-primary:var(--ui-colour-accent);
        --logo-skin:#eea47b;
        --logo-outline:#000000;
        --logo-face-shadow:#925648;
        --logo-eye-ref1:#fafcf9;
        --logo-eye-ref2:#efeefa;
        --logo-eye-ref3:#f8e8ff;
        --logo-eye-gradient1:#514271;
        --logo-eye-gradient2:#c98ccb;
        --logo-eye-gradient3:#f9c2ff;
        --logo-hair-gradient1:#b8977f;
        --logo-hair-gradient2:#eddeaf;
        --logo-hair-gradient3:#ece1b8;
    }
  
    /* WHEN VARIABLES FAIL */
    /* remove top nav vertical padding */
    div.mx-auto.flex.w-full.items-center.justify-between.px-6.py-2{padding:0 1.5rem}
  
    /* invert main scrollbar colours */
    .scroll-gutter{scrollbar-color:var(--slider-background) var(--slider-color)}
  
    /* reduce common padding value */
    .p-6{padding:1rem}
  
    /* adjust sidepanel for padding change */
    div.border-panel-border.bg-panel-background.sticky.top-24.ml-6{top:5.35rem}
  
    /* make logs more compact */
    div.w-full.overflow-y-auto.rounded-lg.border-16.border-panel-input.bg-panel-input.contain-strict{
        font-size:.9em;
        border:none;
        background-color:var(--ui-colour-base);
    }
    div.flex.gap-x-6.pt-2{padding-top:.2rem}
  
}