From 6a4a147f438be8d5251d7caf2c98c3989a8c39d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Svatos=CC=8C?= <github@svatos.dev>
Date: Tue, 19 Sep 2023 16:31:33 -0400
Subject: [PATCH] Added new LCARS theme

Signed-off-by: Michal Svatos <github@svatos.dev>
---
 scripts/pi-hole/php/header.php |    2 +-
 scripts/pi-hole/php/theme.php  |    1 +
 style/themes/lcars-picard.css  | 5789 ++++++++++++++++++++++++++++++++
 3 files changed, 5791 insertions(+), 1 deletion(-)
 create mode 100644 style/themes/lcars-picard.css

diff --git a/scripts/pi-hole/php/header.php b/scripts/pi-hole/php/header.php
index 563101e5f0..6431dfe12d 100644
--- a/scripts/pi-hole/php/header.php
+++ b/scripts/pi-hole/php/header.php
@@ -41,7 +41,7 @@
 <?php } ?>
 
     <!-- Theme fonts -->
-<?php if ($theme == 'lcars') { ?>
+<?php if ($theme == 'lcars' || $theme == 'lcars-picard') { ?>
     <link rel="stylesheet" href="<?php echo fileversion('style/vendor/fonts/ubuntu-mono/ubuntu-mono.css'); ?>">
     <link rel="stylesheet" href="<?php echo fileversion('style/vendor/fonts/antonio/antonio.css'); ?>">
 <?php } else { ?>
diff --git a/scripts/pi-hole/php/theme.php b/scripts/pi-hole/php/theme.php
index 361c584e08..7e8536d4cf 100644
--- a/scripts/pi-hole/php/theme.php
+++ b/scripts/pi-hole/php/theme.php
@@ -23,6 +23,7 @@
 // Option to have the theme go with the device dark mode setting, always set the background to black to avoid flashing
 $available_themes['default-auto'] = array('Pi-hole auto theme (light/dark)', true, 'default-auto', '#367fa9');
 $available_themes['lcars'] = array('Star Trek LCARS theme (dark)', true, 'lcars', '#4488FF');
+$available_themes['lcars-picard'] = array('Star Trek Picard LCARS theme (dark)', true, 'lcars-picard', '#53596C');
 
 $webtheme = '';
 // Try to load theme settings from setupVars.conf
diff --git a/style/themes/lcars-picard.css b/style/themes/lcars-picard.css
new file mode 100644
index 0000000000..a50c22da8e
--- /dev/null
+++ b/style/themes/lcars-picard.css
@@ -0,0 +1,5789 @@
+/*
+  - Document: Pi-hole LCARS Star Trek Picard Theme
+  - Version:  1.4.0
+  - Author:   @MichalSvatos (svatos.dev)
+  - Description: Star Trek Picard LCARS Theme for Pi-hole dashboard.
+  - Disclaimer: Due to fact that I have the access only to CSS I was forced to use some !importants and a lot of IDs. I'm sorry.
+  - Resources: mewho.com, Star Trek Picard, various LCARS images and websites
+*/
+
+/* GLOBAL SETTINGS AND VARIABLES
+  ========================================================== */
+
+/*
+  -- breakpoints used (based on Bootstrap)
+  sm: 576px;
+  md: 768px;
+  lg: 992px;
+  xl: 1200px;
+  xxl: 1500px;
+*/
+
+:root {
+  /* -- gaps, sizes */
+  --gap: 1.6rem;
+  --gap75: calc(var(--gap) * 0.75);
+  --gap50: calc(var(--gap) / 2);
+  --gap25: calc(var(--gap) / 4);
+  --sidebar-width: calc(var(--gap) * 14);
+  --collapsed-width: calc(var(--gap) * 3.125);
+  --gradient-pos: 300px;
+  --wrapper-max-width: 1250px;
+  --radius100: var(--gap);
+  --radius75: var(--gap75);
+  --radius50: var(--gap50);
+  --radius25: var(--gap25);
+  --radius-main-lcars: calc(var(--radius100) * 5);
+  --radius-main-lcars-inner: calc(var(--radius100) * 3);
+  --lcars-space: var(--gap25);
+  --border-width: calc(var(--gap) / 8);
+  --border-width-thick: calc(var(--gap) / 2);
+  --border-panel-width: calc(var(--border-width) * 40);
+  --pie-chart-border-width: calc(var(--gap) * 9);
+  --form-fields-height: 34px;
+
+  /* -- colors */
+  --color-background: #000;
+  --color-primary: #313748;
+  --color-primary-text: #9fa5b8;
+  --color-secondary: #53596c;
+  --color-secondary-hover: #9fa5b8;
+  --color-tertiary: #6e748a;
+  --color-tertiary-hover: #80c8ec;
+  --color-quaternary: #915e4d;
+  --color-quinternary: #8e4437;
+  --color-text: #9fa5b8;
+  --color-text-dark: #000;
+  --color-link: #3c8dbc;
+  --color-danger: #d55138;
+  --color-danger-bright: #f37052;
+  --color-red-alert: #ea3323;
+  --color-success: #0bd08a;
+  --color-success-dark: #024b3b;
+  --color-disabled: #1f2228;
+  --color-supplement-01: #411e17;
+  --color-supplement-02: #131315;
+
+  /* -- typo */
+  --font-family: Antonio, Oswald, "Myriad Pro Cond", "Roboto Condensed", "Futura Condensed",
+    "Helvetica Condensed", "Arial Narrow", sans-serif;
+  --font-family-mono: "Ubuntu Mono", Consolas, "Courier New", monospace;
+  --font-light: 300;
+  --font-regular: 400;
+  --font-bold: 600;
+
+  /* -- animations*/
+  --transition-duration: 0.6s;
+  --transition-duration-fast: 0.25s;
+  --transition-duration-slow: 1.6s;
+  --transition-function: cubic-bezier(0.33, 1, 0.68, 1);
+  --transition: var(--transition-duration) var(--transition-function);
+  --transition-fast: var(--transition-duration-fast) var(--transition-function);
+  --transition-slow: var(--transition-duration-slow) var(--transition-function);
+
+  /* -- LCARS panels and gradients */
+  --background-grid: linear-gradient(var(--color-supplement-01) 0.1rem, transparent 0.1rem),
+    linear-gradient(90deg, var(--color-supplement-01) 0.1rem, transparent 0.1rem);
+}
+
+@media (max-width: 767px) {
+  :root {
+    --border-panel-width: var(--border-width-thick);
+  }
+}
+
+/* GLOBAL STYLES
+  ========================================================== */
+
+html {
+  font-size: 62.5%;
+  scrollbar-color: var(--color-primary) var(--color-disabled); /* Firefox only scrollbar */
+  color-scheme: dark;
+}
+
+/* --- Chrome & Safari scrollbar */
+html::-webkit-scrollbar,
+.wrapper::-webkit-scrollbar,
+#output::-webkit-scrollbar,
+.select2-results__options::-webkit-scrollbar {
+  width: var(--gap50);
+  height: var(--gap50);
+}
+
+html::-webkit-scrollbar-thumb,
+.wrapper::-webkit-scrollbar-thumb,
+#output::-webkit-scrollbar-thumb,
+.select2-results__options::-webkit-scrollbar-thumb {
+  background: var(--color-primary);
+  border-radius: var(--radius25);
+}
+
+html::-webkit-scrollbar-track,
+.wrapper::-webkit-scrollbar-track,
+#output::-webkit-scrollbar-track,
+.select2-results__options::-webkit-scrollbar-track {
+  background: var(--color-disabled);
+}
+
+.wrapper,
+#output {
+  scrollbar-color: var(--color-primary) var(--color-disabled);
+}
+
+.layout-boxed .wrapper {
+  box-shadow: none;
+}
+
+@media (min-width: 768px) {
+  .layout-boxed .wrapper {
+    padding-inline: var(--gap25);
+  }
+}
+
+@media (min-width: 768px) {
+  body:not(.layout-boxed) .wrapper {
+    padding-inline: var(--gap25);
+  }
+}
+
+body {
+  font-size: 1.6rem;
+  color: var(--color-text);
+  background: var(--color-background);
+  font-family: var(--font-family);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-family);
+  text-transform: uppercase;
+  font-weight: var(--font-bold);
+}
+
+.sidebar-collapse {
+  --sidebar-width: var(--collapsed-width);
+  --radius-main-lcars: var(--radius100);
+}
+
+@media (max-width: 767px) {
+  :root {
+    --radius-main-lcars: var(--radius100);
+    --radius-main-lcars-inner: var(--radius75);
+  }
+}
+
+.svg-inline--fa {
+  vertical-align: inherit;
+}
+
+/* BUTTONS
+  ========================================================== */
+
+.btn,
+.nav-tabs-custom > .nav-tabs > li > a,
+.main-header .navbar-nav li a {
+  color: var(--color-text);
+  font-weight: var(--font-bold);
+  border: none;
+  min-width: calc(var(--gap) * 6);
+  transition: background-color var(--transition-fast);
+}
+
+.btn-default,
+.btn-primary,
+.btn-success,
+.btn-warning,
+.btn-danger,
+.nav-tabs-custom > .nav-tabs > li > a,
+.main-header .navbar-nav li a,
+.bs-actionsbox button.btn {
+  padding: var(--gap50) var(--gap);
+  border-radius: calc(var(--gap) * 1.5);
+  text-align: right;
+  text-transform: uppercase;
+  letter-spacing: 0.025rem;
+}
+
+.btn-default {
+  background-color: var(--color-disabled);
+  border: none;
+  color: var(--color-text);
+}
+
+.btn-primary {
+  background-color: var(--color-primary);
+  border: none;
+  color: var(--color-text);
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.btn-primary:hover,
+.btn-primary:active,
+.btn-primary.hover {
+  /*background-color: var(--color-primary-hover);*/
+}
+
+.btn-secondary,
+.main-header .navbar-nav li a {
+  background-color: var(--color-secondary);
+  color: var(--color-text-dark);
+}
+
+.btn-secondary:hover,
+.btn-secondary:active,
+.btn-secondary.hover,
+.main-header .navbar-nav li a:hover,
+.main-header .navbar-nav li a:active {
+  background-color: var(--color-secondary-hover);
+}
+
+.btn-warning,
+#add-group .btn-toolbar #add2black {
+  background-color: var(--color-supplement-01);
+  color: var(--color-danger-bright);
+}
+
+.btn-warning:hover,
+#add-group .btn-toolbar #add2black:hover {
+  background-color: var(--color-danger);
+  color: var(--color-background);
+}
+
+.btn-whitelist,
+.btn-blacklist,
+.btn-audit,
+.btn-xs.btn-whitelist,
+.btn-xs.btn-blacklist,
+.btn-xs.btn-audit {
+  position: relative;
+  padding-left: calc(var(--gap) * 2.75);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.btn-xs.btn-whitelist,
+.btn-xs.btn-blacklist,
+.btn-xs.btn-audit {
+  padding: var(--gap25) var(--gap) var(--gap25) calc(var(--gap) * 2.75);
+  border-radius: calc(var(--gap) * 1.5);
+}
+
+.btn-audit {
+  background-color: var(--color-supplement-01);
+}
+
+.btn-whitelist:hover {
+  background-color: var(--color-success-dark) !important;
+  color: #fff !important;
+}
+
+.btn-blacklist:hover {
+  background-color: var(--color-red-alert) !important;
+  color: #fff !important;
+}
+
+.btn-audit:hover {
+  background-color: var(--color-primary);
+  color: #fff !important;
+}
+
+.btn-whitelist > svg.svg-inline--fa,
+.btn-blacklist > svg.svg-inline--fa,
+.btn-audit > svg.svg-inline--fa,
+.btn-xs.btn-whitelist > svg.svg-inline--fa,
+.btn-xs.btn-blacklist > svg.svg-inline--fa,
+.btn-xs.btn-audit > svg.svg-inline--fa {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: calc(var(--gap) * 2);
+  height: calc(var(--gap) * 2 + var(--border-width));
+  padding: 0 var(--gap50);
+  border-right: var(--border-width) solid var(--color-background);
+}
+
+.btn-xs.btn-whitelist > svg.svg-inline--fa,
+.btn-xs.btn-blacklist > svg.svg-inline--fa,
+.btn-xs.btn-audit > svg.svg-inline--fa {
+  height: calc(var(--gap) * 1.5 + var(--border-width));
+}
+
+.btn-xs.btn-whitelist,
+.btn-xs.btn-blacklist {
+  margin-right: var(--gap25);
+}
+
+.btn-success,
+.bs-actionsbox > button.btn-success,
+#add-group .btn-toolbar #add2white {
+  background-color: var(--color-success-dark);
+  color: var(--color-success);
+}
+
+.btn-success:hover,
+.bs-actionsbox > button.btn-success:hover,
+#add-group .btn-toolbar #add2white:hover {
+  background-color: var(--color-link) !important;
+  color: #fff;
+}
+
+#resetButton,
+.btn-danger {
+  background-color: var(--color-red-alert);
+  color: #fff;
+}
+
+#resetButton:hover,
+.btn-danger:hover {
+  --pulse-color: #fff;
+  --pulse-color-background: var(--color-red-alert);
+  color: var(--color-background);
+  animation: pulseBg 2s ease-in-out infinite;
+}
+
+#resetButton {
+  color: #fff !important;
+  margin-top: var(--gap);
+  min-width: calc(var(--gap) * 8);
+}
+
+.btn-xs {
+  padding: 1px 5px;
+  border-radius: 5px;
+  min-width: auto;
+}
+
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-link,
+.login-footer .btn-default,
+.login-box button.btn-primary {
+  background-color: var(--color-disabled) !important;
+  color: var(--color-link);
+  padding: var(--gap50) var(--gap) var(--gap50) calc(var(--gap) * 3.5);
+  position: relative;
+  text-align: right;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-link:hover,
+.login-footer .btn-default:hover,
+.login-box button.btn-primary:hover {
+  background-color: var(--color-primary) !important;
+  color: #fff;
+}
+
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-link svg,
+.login-footer .btn-default svg,
+.login-box button.btn-primary svg {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.35);
+  padding: calc(var(--gap75));
+  width: calc(var(--gap) * 3);
+  height: 36px !important;
+  inset: 0 auto 0 0;
+  border-right: calc(var(--border-width) * 2) solid var(--color-background);
+  border-radius: 18px 0 0 18px;
+}
+
+/* CHECKBOXES, RADIOS
+  ========================================================== */
+
+body [class*="icheck-"] > label {
+  padding-left: calc(var(--gap) * 3.5) !important;
+}
+
+body [class*="icheck-"] > input:first-child:checked + input[type="hidden"] + label,
+body [class*="icheck-"] > input:first-child:checked + label {
+  color: var(--color-tertiary-hover);
+}
+
+/* --- border */
+body [class*="icheck-"] > input:first-child + input[type="hidden"] + label:before,
+body [class*="icheck-"] > input:first-child + label:before {
+  content: "";
+  width: calc(var(--gap) * 2.5);
+  margin-left: calc(var(--gap) * -3.5) !important;
+  border: calc(var(--border-width) * 2) solid var(--color-primary);
+  border-bottom: 0;
+  transition:
+    border-color var(--transition-fast),
+    background-color var(--transition-fast);
+}
+
+body .icheck-primary > input:first-child:checked + input[type="hidden"] + label:before,
+body .icheck-primary > input:first-child:checked + label:before {
+  background-color: transparent;
+  border-color: var(--color-success-dark);
+}
+
+body
+  [class*="icheck-"]
+  > input:first-child:not(:checked):not(:disabled):hover
+  + input[type="hidden"]
+  + label:before,
+body [class*="icheck-"] > input:first-child:not(:checked):not(:disabled):hover + label:before {
+  border-width: calc(var(--border-width) * 2);
+  border-color: var(--color-secondary);
+}
+
+/* --- switch */
+body [class*="icheck-"] > input:first-child + input[type="hidden"] + label:after,
+body [class*="icheck-"] > input:first-child + label:after {
+  content: "";
+  background-color: var(--color-primary);
+  width: var(--gap75);
+  height: 1.4rem;
+  inset: var(--border-width-thick) auto 0 var(--border-width-thick);
+  position: absolute;
+  transition: inset var(--transition);
+}
+
+body [class*="icheck-"] > input:first-child:checked + input[type="hidden"] + label:after,
+body [class*="icheck-"] > input:first-child:checked + label:after {
+  background-color: var(--color-success);
+  width: var(--gap75);
+  height: 1.4rem;
+  transform: none;
+  border: none;
+  inset: var(--border-width-thick) auto 0 calc(var(--border-width) * 10);
+}
+
+/* --- radios */
+body [class*="icheck-"] > input[type="radio"]:first-child + input[type="hidden"] + label:before,
+body [class*="icheck-"] > input[type="radio"]:first-child + label:before {
+  border-radius: 0;
+}
+
+body [class*="icheck-"] > input[type="radio"]:first-child + input[type="hidden"] + label:after,
+body [class*="icheck-"] > input[type="radio"]:first-child + label:after {
+  background-color: var(--color-disabled);
+  width: calc(var(--gap) * 1.5);
+  inset: var(--border-width-thick) auto 0 var(--border-width-thick);
+}
+
+body
+  [class*="icheck-"]
+  > input[type="radio"]:first-child:checked
+  + input[type="hidden"]
+  + label:after,
+body [class*="icheck-"] > input[type="radio"]:first-child:checked + label:after {
+  background-color: var(--color-success);
+}
+
+body [class*="icheck-"] > input:first-child:focus + label:before {
+  outline-color: transparent;
+}
+
+/* FORMS
+  ========================================================== */
+
+.form-control,
+td > .form-group,
+.daterangepicker select.yearselect,
+.daterangepicker select.monthselect,
+.daterangepicker select.hourselect,
+.daterangepicker select.minuteselect,
+.select2-container--default .select2-search--dropdown .select2-search__field,
+input[type="number"],
+select[id="tempunit-selector"],
+select[id="iCheckStyle"] {
+  border-color: var(--color-primary);
+  color: var(--color-tertiary-hover);
+  background-color: var(--color-disabled);
+  transition:
+    background-color var(--transition),
+    border-color var(--transition);
+}
+
+td > .form-group,
+input[type="number"],
+select[id="tempunit-selector"],
+select[id="iCheckStyle"] {
+  border-width: 1px;
+  border-style: solid;
+  padding: 5px 10px; /* from form.less */
+  font-size: 12px; /* from form.less */
+}
+
+.form-control[disabled],
+.form-control[readonly],
+fieldset[disabled] .form-control {
+  border-color: var(--color-primary);
+  background-color: var(--color-disabled);
+}
+
+.form-control:focus,
+td > .form-group:focus,
+.select2-container--default .select2-search--dropdown .select2-search__field:focus,
+input[type="number"]:focus,
+select[id="tempunit-selector"]:focus,
+select[id="iCheckStyle"]:focus {
+  border-color: var(--color-tertiary-hover);
+  background-color: var(--color-background);
+  outline: none;
+}
+
+.input-group .input-group-addon,
+.input-group .input-group-btn .btn-file {
+  background-color: var(--color-secondary-hover);
+  border: none;
+  border-radius: var(--radius100) 0 0 var(--radius100);
+  color: var(--color-text-dark);
+  text-transform: uppercase;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.input-group .input-group-btn .btn-default {
+  background-color: var(--color-secondary-hover);
+  border: none;
+  color: var(--color-text-dark);
+  text-transform: uppercase;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.input-group .input-group-btn .btn-default:hover {
+  background-color: var(--color-tertiary);
+}
+
+.input-group .input-group-btn .btn-default + .btn-default {
+  margin-left: calc(var(--border-width) * 2);
+}
+
+textarea.form-control {
+  resize: vertical;
+}
+
+div.dataTables_wrapper div.dataTables_filter input,
+div.dataTables_wrapper div.dataTables_length select {
+  height: var(--form-fields-height);
+}
+
+div.dataTables_wrapper div.dataTables_length select {
+  border-radius: var(--radius100);
+  margin-inline: var(--gap25);
+}
+
+.dataTables_length[id="all-queries_length"],
+.dataTables_info[id="all-queries_info"] {
+  margin-top: var(--gap);
+  padding-top: 0;
+}
+
+/* -- select2 */
+.select2-container--default .select2-selection--single {
+  height: var(--form-fields-height);
+  border-color: var(--color-tertiary);
+  color: var(--color-tertiary-hover);
+  background-color: var(--color-disabled);
+  border-radius: var(--radius100);
+  font-size: 14px;
+}
+
+.select2-container--default.select2-container--open.select2-container--below
+  .select2-selection--single,
+.select2-container--default.select2-container--open.select2-container--below
+  .select2-selection--multiple {
+  background-color: var(--color-secondary);
+  border-color: var(--color-secondary);
+}
+
+.select2-container--default .select2-selection__placeholder {
+  text-transform: uppercase;
+}
+
+.select2-container--default.select2-container--open .select2-selection__placeholder {
+  color: var(--color-background);
+}
+
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+  color: var(--color-tertiary-hover);
+}
+
+.select2-container--default .select2-selection--single .select2-selection__clear {
+  width: calc(var(--gap) * 2.25);
+  height: calc(var(--gap) * 1.75);
+  background-color: var(--color-danger);
+  overflow: hidden;
+  text-indent: -32px;
+  border: calc(var(--border-width) * 2) solid var(--color-danger);
+  border-radius: var(--radius100) 0 0 var(--radius100);
+  transition:
+    border-color var(--transition),
+    background-color var(--transition);
+}
+
+.select2-container--default .select2-selection--single .select2-selection__clear::before,
+.select2-container--default .select2-selection--single .select2-selection__clear::after {
+  content: "";
+  position: absolute;
+  width: var(--border-width);
+  height: 100%;
+  background-color: var(--color-background);
+  top: 0;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__clear::before {
+  left: calc(50% - (var(--border-width) / 2));
+  rotate: -45deg;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__clear::after {
+  right: calc(50% - (var(--border-width) / 2));
+  rotate: 45deg;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__clear:hover {
+  background-color: var(--color-danger-bright);
+  border-color: var(--color-danger-bright);
+}
+
+.select2-container--default .select2-selection--single .select2-selection__arrow {
+  top: 5px;
+  right: 10px;
+}
+
+.select2-dropdown {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+  translate: 0 2px;
+}
+
+.select2-search--dropdown {
+  padding: var(--gap) var(--gap) var(--gap) var(--gap);
+  background-color: var(--color-primary);
+  position: relative;
+}
+
+.select2-search--dropdown::after {
+  content: "";
+  height: var(--border-width);
+  background-color: var(--color-background);
+  position: absolute;
+  inset: auto calc((var(--gap25) + 1px) * -1) 0 calc((var(--gap25) + 1px) * -1);
+}
+
+.select2-results {
+  padding: var(--gap) var(--gap) 0 var(--gap);
+  background-color: var(--color-background);
+}
+
+.select2-container--open .select2-dropdown--below {
+  padding-inline: var(--gap25);
+  border-bottom-right-radius: var(--radius100);
+  border-bottom-left-radius: var(--radius100);
+  border-bottom-width: var(--gap);
+}
+
+.select2-container--default .select2-results > .select2-results__options {
+  padding-bottom: var(--gap);
+}
+
+.select2-results__option {
+  background-color: var(--color-disabled);
+  color: var(--color-link);
+  font-size: 1.4rem;
+  padding-inline: var(--gap);
+  position: relative;
+  transition:
+    background-color var(--transition),
+    color var(--transition);
+}
+
+.select2-results__option::before {
+  content: "";
+  width: var(--gap50);
+  background-color: var(--color-primary);
+  position: absolute;
+  inset: 0 auto 0 0;
+  border-right: var(--gap25) solid var(--color-background);
+}
+
+.select2-results__option + .select2-results__option {
+  border-top: var(--border-width-thick) solid var(--color-background);
+}
+
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+  background-color: var(--color-secondary);
+  color: var(--color-tertiary-hover);
+}
+
+.select2-container--default .select2-results__option--highlighted[aria-selected]::before {
+  background-color: var(--color-link);
+}
+
+/* PAGINATION
+  ========================================================== */
+
+.pagination {
+  font-size: 1.6rem;
+  margin: var(--gap) 0 !important;
+}
+
+.pagination > li > a {
+  margin: 0 calc(var(--gap) / 8);
+  min-width: calc(var(--gap) * 2);
+  background: var(--color-tertiary);
+  color: var(--color-text-dark);
+  text-align: center;
+  border: none;
+}
+
+.pagination > li > a:focus,
+.pagination > li > a:hover,
+.pagination > li > span:focus,
+.pagination > li > span:hover {
+  color: var(--color-text-dark);
+  background-color: var(--color-tertiary-hover);
+}
+
+.pagination > .disabled > a,
+.pagination > .disabled > a:focus,
+.pagination > .disabled > a:hover,
+.pagination > .disabled > span,
+.pagination > .disabled > span:focus,
+.pagination > .disabled > span:hover {
+  background-color: var(--color-disabled);
+  color: var(--color-text-dark);
+  cursor: default;
+}
+
+.pagination > .active > a,
+.pagination > .active > a:focus,
+.pagination > .active > a:hover,
+.pagination > .active > span,
+.pagination > .active > span:focus,
+.pagination > .active > span:hover {
+  color: var(--color-text-dark);
+  background-color: var(--color-quaternary);
+}
+
+#all-queries_wrapper .pagination > li > a {
+  padding: calc(var(--gap) / 2) calc(var(--gap) / 2);
+  line-height: 1;
+}
+
+#all-queries_wrapper .pagination > li.previous > a,
+.pagination > li:first-child > a {
+  padding-left: calc(var(--gap) * 0.75);
+  border-radius: var(--gap) 0 0 var(--gap);
+  min-width: calc(var(--gap) * 5);
+  text-transform: uppercase;
+}
+
+#all-queries_wrapper .pagination > li.next > a,
+.pagination > li:last-child > a {
+  padding-right: calc(var(--gap) * 0.75);
+  border-radius: 0 var(--gap) var(--gap) 0;
+  min-width: calc(var(--gap) * 5);
+  text-transform: uppercase;
+  margin-right: 0;
+}
+
+#all-queries_filter {
+  margin: var(--gap) 0;
+}
+
+/* LOGIN
+  ========================================================== */
+
+.login-box {
+  width: 90vw;
+  max-width: calc(var(--gap) * 65);
+  padding: calc(var(--gap) * 3) var(--gap);
+}
+
+@media (min-width: 992px) {
+  .login-box {
+    padding: calc(var(--gap) * 3) calc(var(--gap) * 10);
+  }
+}
+
+.login-box::after,
+.login-box::before {
+  content: "";
+  position: absolute;
+}
+
+/* --- login - main panels */
+.login-box::after {
+  --_login-border-radius: calc(var(--radius100) * 3);
+  --_login-main-bg-color: var(--color-disabled);
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    var(--_login-main-bg-color) 50%,
+    var(--_login-main-bg-color) 50%
+  );
+  border-radius: var(--_login-border-radius);
+  transition: border-radius var(--transition);
+  z-index: 0;
+}
+
+/* --- login - panel lines */
+.login-box::before {
+  --_login-lines-bg-color: var(--color-primary);
+  inset: 15% var(--gap50);
+  background-color: var(--_login-lines-bg-color);
+  border-radius: var(--radius100);
+  border: var(--border-width) solid var(--color-background);
+  z-index: 1;
+}
+
+@media (min-width: 992px) {
+  .login-box::after {
+    border-radius: calc(var(--radius100) * 4);
+    animation: loginPanel var(--transition) 0s forwards;
+  }
+
+  .login-box::before {
+    inset: calc(var(--gap) * 1.35) calc(var(--gap) * 6);
+    border-radius: calc(var(--radius100) * 2);
+    animation: loginLines var(--transition) 0s forwards;
+  }
+}
+
+.login-box section {
+  background-color: var(--color-background);
+  padding: calc(var(--gap) * 2) calc(var(--gap) * 2) !important;
+  border-radius: var(--radius100);
+  position: relative;
+  z-index: 1;
+  transition: border-radius var(--transition);
+}
+
+@media (min-width: 768px) {
+  .login-box section {
+    display: flex;
+    padding: calc(var(--gap) * 3) calc(var(--gap) * 3) !important;
+  }
+}
+
+.login-box section::before,
+.login-box section::after {
+  --_login-title-bg-color: var(--color-primary);
+  content: "";
+  position: absolute;
+  width: 75%;
+  height: calc(var(--gap) * 3);
+  background-color: var(--_login-title-bg-color);
+  outline: var(--border-width-thick) solid var(--color-background);
+  left: 50%;
+  text-align: right;
+  padding: var(--gap25);
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+
+/* --- login - "title" */
+.login-box section::before {
+  --_login-title-color: var(--color-text-dark);
+  content: "Authorized access only";
+  text-transform: uppercase;
+  color: var(--_login-title-color);
+  top: 0;
+  translate: -50% -100%;
+}
+
+/* --- login - "footer" */
+.login-box section::after {
+  --_login-section-border-color: var(--color-primary);
+  --_login-color-grid: var(--color-supplement-01);
+  content: "Background neural net analysis: Awaiting input";
+  letter-spacing: 0.025rem;
+  text-transform: uppercase;
+  color: var(--color-danger);
+  font-size: 1.2rem;
+  justify-content: center;
+  bottom: 0;
+  translate: -50% 100%;
+  outline: var(--border-width) solid var(--color-background);
+  border: var(--border-width) solid var(--_login-section-border-color);
+  background-color: var(--color-background);
+  background-image: linear-gradient(var(--_login-color-grid) 1px, transparent 1px),
+    linear-gradient(90deg, var(--_login-color-grid) 1px, transparent 1px),
+    linear-gradient(var(--_login-color-grid) 0.5px, transparent 0.5px),
+    linear-gradient(90deg, var(--_login-color-grid) 0.5px, var(--color-background) 0.5px);
+  background-size:
+    var(--gap) var(--gap),
+    var(--gap) var(--gap),
+    var(--gap25) var(--gap25),
+    var(--gap25) var(--gap25);
+  background-position:
+    -1px -1px,
+    -1px -1px,
+    -0.5px -0.5px,
+    -0.5px -0.5px;
+  --pulse-font-color-01: var(--color-danger-bright);
+  --pulse-font-color-02: var(--color-red-alert);
+}
+
+@media (min-width: 992px) {
+  .login-box section::before {
+    width: calc(var(--gap) * 30);
+    background: var(--color-background);
+    justify-content: center;
+    align-items: center;
+    color: var(--color-background);
+    font-size: 4.5rem;
+    outline: none;
+    --pulse-font-color-01: var(--color-background);
+    --pulse-font-color-02: var(--color-primary);
+    animation: pulseFont var(--transition) 350ms forwards;
+  }
+
+  .login-box section::after {
+    width: calc(var(--gap) * 30);
+    opacity: 0;
+    animation:
+      pulseFont var(--transition-duration-slow) infinite,
+      topSmallScanner 2s linear reverse infinite,
+      fadeIn var(--transition) forwards;
+  }
+}
+
+/* --- login - logo */
+.login-logo {
+  text-transform: uppercase;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (min-width: 768px) {
+  .login-logo {
+    width: calc(var(--gap) * 10);
+    flex-shrink: 0;
+    padding-right: calc(var(--gap) * 2);
+    margin-bottom: 0;
+  }
+}
+
+@media (min-width: 992px) {
+  .login-logo::before {
+    --_login-logo-bg-color: var(--color-disabled);
+    content: "■ Login-74205A";
+    position: absolute;
+    width: calc(var(--gap) * 10);
+    inset: 0 auto 0 calc(var(--gap) * -13);
+    background-color: var(--_login-logo-bg-color);
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+    padding: var(--gap25) var(--gap25);
+    font-size: 1.2rem;
+    color: var(--color-text-dark);
+    border-top: calc(var(--border-width) * 2) solid var(--color-background);
+    border-bottom: calc(var(--border-width) * 2) solid var(--color-background);
+  }
+
+  .login-logo > div {
+    opacity: 0;
+    animation: fadeIn var(--transition) 1050ms forwards;
+  }
+}
+
+.loginpage-logo {
+  width: calc(var(--gap) * 5);
+}
+
+@media (min-width: 768px) {
+  .loginpage-logo {
+    width: calc(var(--gap) * 8);
+  }
+}
+
+.login-footer {
+  flex-wrap: wrap;
+  gap: var(--gap);
+}
+
+.login-footer a {
+  width: 100%;
+  flex-grow: 1;
+}
+
+@media (min-width: 576px) and (max-width: 991px), (min-width: 1140px) {
+  .login-footer a {
+    width: calc((100% / 2) - var(--gap));
+  }
+}
+
+@media (min-width: 768px) {
+  .login-box .card {
+    flex-grow: 1;
+  }
+}
+
+@media (min-width: 992px) {
+  .login-box .card {
+    opacity: 0;
+    animation: fadeIn var(--transition) 700ms forwards;
+  }
+}
+
+.login-box button.btn-primary {
+  background-color: var(--color-primary-text) !important;
+  color: var(--color-background);
+}
+
+.login-box button.btn-primary:hover {
+  background-color: var(--color-success) !important;
+  color: var(--color-background);
+}
+
+.login-box .card-body .box {
+  padding: 0;
+  border-radius: 0;
+  position: relative;
+}
+
+.login-box .card-body .box-header {
+  background: var(--color-supplement-01);
+  padding: var(--gap50);
+  transition:
+    background-color var(--transition),
+    color var(--transition);
+}
+
+.login-box .card-body .box-header:hover {
+  background: var(--color-danger);
+  color: var(--color-background);
+}
+
+.login-box .card-body .box-tools {
+  margin: 0;
+}
+
+.login-box .card-body .btn-box-tool {
+  width: calc(var(--gap) * 3);
+  min-width: auto;
+  position: absolute;
+  inset: 0 0 0 auto;
+  background-color: rgba(0, 0, 0, 0.35);
+  border-radius: 0;
+  color: var(--color-danger-bright);
+  border-left: calc(var(--border-width) * 2) solid var(--color-background);
+}
+
+.login-box .card-body .box-body {
+  padding: var(--gap) var(--gap);
+  border: calc(var(--border-width) * 2) solid var(--color-supplement-01);
+  border-radius: 0 0 var(--radius100) var(--radius100);
+  border-top: 0;
+  margin-right: calc(var(--gap) * 3);
+  font-weight: 100;
+  line-height: 1.5;
+  letter-spacing: 0.015rem;
+}
+
+/* --- login - error */
+.login-box:has(.has-error)::after {
+  --_login-main-bg-color: var(--color-supplement-01);
+  animation: none;
+}
+
+.login-box:has(.has-error)::before {
+  --_login-lines-bg-color: var(--color-danger);
+  animation: none;
+}
+
+.login-box:has(.has-error) section::before {
+  content: "Encrypted access denied";
+  --pulse-font-color-01: #fff;
+  --pulse-font-color-02: var(--color-red-alert);
+  animation: pulseFont var(--transition-duration-slow) infinite;
+}
+
+.login-box:has(.has-error) section::after {
+  --_login-section-border-color: var(--color-danger);
+  --pulse-font-color-01: #fff;
+  content: "Background neural net analysis: Failed";
+}
+
+@media (max-width: 991px) {
+  .login-box:has(.has-error) section::before {
+    --_login-title-bg-color: var(--color-supplement-01);
+  }
+}
+
+@media (min-width: 992px) {
+  .login-box:has(.has-error) .card,
+  .login-box:has(.has-error) .login-logo {
+    opacity: 1;
+    animation: none;
+  }
+
+  .login-box:has(.has-error) .login-logo::before {
+    --_login-logo-bg-color: var(--color-supplement-01);
+  }
+}
+
+/* --- login - form error message */
+.login-box-msg.has-error {
+  text-align: left;
+  padding: var(--gap50) var(--gap50) var(--gap50) calc(var(--gap) * 4);
+  border-top: var(--border-width) solid var(--color-red-alert);
+  position: relative;
+  border-radius: var(--radius100) 0 0 0;
+  overflow: hidden;
+  text-transform: uppercase;
+}
+
+.login-box-msg.has-error::after {
+  content: "■ ■ ■ ■ ■";
+  color: var(--color-danger);
+  position: absolute;
+  inset: calc(var(--gap25) * -1) 0 0 auto;
+  font-size: 1rem;
+}
+
+.login-box-msg.has-error label {
+  margin-bottom: 0;
+}
+
+.login-box-msg.has-error svg {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: calc(var(--gap) * 3);
+  background-color: var(--color-red-alert);
+  color: var(--color-text-dark);
+  display: block;
+  height: calc(var(--gap) * 2.5);
+  padding: var(--gap75);
+}
+
+/* DONATION BAR (login + other pages)
+  ========================================================== */
+
+.login-donate {
+  text-transform: uppercase;
+  margin-top: calc(var(--gap) * 2);
+  padding: var(--gap) var(--gap) 0 var(--gap);
+  width: 90vw;
+  margin-inline: auto;
+  max-width: calc(var(--gap) * 35);
+}
+
+.login-donate .text-center,
+.main-footer > .row:first-child > div {
+  position: relative;
+  border: var(--border-width) solid var(--color-success-dark);
+  border-bottom: var(--border-width-thick) solid var(--color-success-dark);
+  border-radius: calc(var(--radius100) * 2) calc(var(--radius100) * 2) calc(var(--radius100) * 2) 0;
+  padding: calc(var(--gap) * 2) var(--gap) calc(var(--gap) * 2) var(--gap);
+  color: var(--color-success-dark);
+}
+
+.login-donate .text-center::before,
+.main-footer > .row:first-child > div::before {
+  content: "";
+  position: absolute;
+  inset: auto auto 0 0;
+  translate: calc(var(--gap25) * -1) 75%;
+  color: var(--color-red-alert);
+  font-size: 1rem;
+  text-align: left;
+  width: calc(var(--gap) * 6);
+  animation: runningDots 2.5s steps(10, end) infinite;
+  background: black;
+  height: var(--gap);
+  line-height: 1;
+}
+
+.login-donate .text-center::after,
+.main-footer > .row:first-child > div::after {
+  content: "";
+  position: absolute;
+  border-top: calc(var(--border-width) * 2) solid var(--color-background);
+  border-bottom: var(--border-width-thick) solid var(--color-background);
+  height: calc(var(--gap) * 5);
+  inset: calc(var(--gap) * 2) calc(var(--gap50) * -1) auto calc(var(--gap50) * -1);
+}
+
+.login-donate strong,
+.main-footer > .row:first-child > div strong {
+  display: block;
+  font-size: 3rem;
+  position: relative;
+  z-index: 1;
+}
+
+.login-donate strong::before,
+.main-footer > .row:first-child > div strong::before {
+  content: "donation-bar_31911A ■";
+  font-size: 1.2rem;
+  position: absolute;
+  inset: calc(var(--gap) * -2) var(--gap) auto auto;
+  text-align: right;
+  color: var(--color-success-dark);
+}
+
+.main-footer > .row:first-child > div strong::before {
+  content: "donation-bar_1764A ■";
+}
+
+.login-donate strong::after,
+.main-footer > .row:first-child > div strong::after {
+  content: "┅┅┅┅┅┄┄";
+  position: absolute;
+  font-size: 2.2rem;
+  left: calc(var(--gap25) * -4);
+  bottom: calc(var(--gap25) * -17);
+  color: var(--color-success-dark);
+}
+
+.login-donate a,
+.main-footer > .row:first-child > div a {
+  color: var(--color-success);
+  transition: color var(--transition);
+}
+
+.login-donate a:hover,
+.main-footer > .row:first-child > div a:hover {
+  color: var(--color-tertiary-hover);
+}
+
+.login-donate a svg,
+.main-footer > .row:first-child > div a svg {
+  transition: scale var(--transition);
+  scale: 0.9;
+}
+
+.login-donate a:hover svg,
+.main-footer > .row:first-child > div a:hover svg {
+  scale: 1.1;
+}
+
+.login-donate a::before,
+.main-footer > .row:first-child > div a::before {
+  content: "please ";
+}
+
+.login-donate a::after,
+.main-footer > .row:first-child > div a::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+/* MAIN HEADER
+  ========================================================== */
+
+.main-header {
+  background-color: var(--color-primary);
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  border-bottom: var(--border-width) solid var(--color-primary);
+  max-height: none;
+  border-radius: 0 0 0 var(--radius100);
+  transition: border-radius var(--transition);
+}
+
+@media (min-width: 768px) {
+  .main-header {
+    border-radius: 0 0 0 calc(var(--gap) * 5);
+  }
+}
+
+.main-header .navbar {
+  background-color: var(--color-background);
+  border-radius: 0 0 0 var(--radius100);
+  padding-top: calc(var(--gap) * 2);
+  max-width: 70dvw;
+  flex-shrink: 0;
+  width: 100%;
+  transition: max-width var(--transition);
+}
+
+@media (min-width: 768px) {
+  .main-header .navbar {
+    flex-grow: 1;
+    margin-left: 0;
+    max-width: calc(100% - var(--sidebar-width));
+  }
+}
+
+.main-header .logo {
+  padding-right: calc(var(--gap) * 1.6);
+  position: relative;
+  color: var(--color-primary-text);
+  font-family: var(--font-family);
+  line-height: calc(var(--gap) * 2.5);
+  text-transform: uppercase;
+  text-align: right;
+  flex-grow: 1;
+  width: auto;
+  min-width: var(--sidebar-width);
+  transition: min-width var(--transition);
+}
+
+.main-header .logo:hover {
+  color: #fff;
+}
+
+.main-header .logo:before {
+  content: "";
+  position: absolute;
+  right: var(--gap50);
+  top: calc(var(--gap) / 1.45);
+  width: calc(var(--gap) / 1.5);
+  height: calc(var(--gap) / 1.5);
+  background-color: var(--color-background);
+  border: var(--border-width) solid var(--color-background);
+  transition: background-color var(--transition-fast);
+}
+
+.main-header .logo:hover:before {
+  background-color: var(--color-quaternary);
+}
+
+.main-header .logo .logo-lg {
+  opacity: 1;
+  transition: opacity var(--transition);
+}
+
+/* --- top menu */
+.navbar-nav > .user-menu {
+  width: auto;
+}
+
+@media (max-width: 575px) {
+  .navbar-custom-menu .navbar-nav li:nth-last-child(2) {
+    display: none;
+  }
+}
+
+.navbar-text {
+  margin-block: 0;
+  border: var(--border-width) solid var(--color-secondary-hover);
+  padding: calc((var(--gap) / 2) - var(--border-width)) var(--gap);
+  text-transform: uppercase;
+  letter-spacing: 0.025rem;
+  font-size: 1.4rem;
+}
+
+.navbar-text code {
+  font-family: var(--font-family);
+  background-color: transparent;
+  color: var(--color-text);
+  font-size: 1.4rem;
+  padding: 0;
+}
+
+.navbar-text .hidden-xs {
+  color: var(--color-secondary);
+}
+
+.main-header .nav {
+  display: flex;
+  align-items: center;
+}
+
+@media (max-width: 767px) {
+  .main-header .nav {
+    margin-right: var(--gap25);
+  }
+}
+
+/* --- sidebar toggle */
+.sidebar-toggle-svg {
+  color: var(--color-tertiary-hover);
+}
+
+.sidebar-toggle-svg:hover {
+  background-color: transparent;
+}
+
+/* --- navbar collapsed */
+.sidebar-mini.sidebar-collapse .main-header .logo {
+  position: relative;
+  width: auto;
+}
+
+.sidebar-mini.sidebar-collapse .main-header .logo .logo-lg {
+  display: block;
+  opacity: 0;
+}
+
+.sidebar-mini.sidebar-collapse .main-header {
+  border-radius: 0 0 0 var(--radius100);
+}
+
+/* --- "timer" */
+#enableTimer {
+  display: block;
+  position: absolute;
+  right: var(--gap);
+  top: var(--gap50);
+  z-index: 1031;
+  font-size: 1.4rem;
+  color: var(--color-disabled);
+}
+
+@media (min-width: 1250px) {
+  /* --wrapper-max-width */
+  .layout-boxed #enableTimer {
+    right: calc(((100dvw - var(--wrapper-max-width)) / 2) + var(--gap75));
+  }
+}
+
+/* MAIN DROPDOWN MENU
+  ========================================================== */
+
+.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
+  background-color: var(--color-background);
+  width: 90vw;
+  max-width: calc(var(--gap) * 30);
+  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.75);
+  border: 0;
+  border-radius: 0 0 var(--radius25) 0;
+}
+
+@media (min-width: 576px) {
+  .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
+    position: fixed;
+    inset: 50% auto auto 50%;
+    translate: -50% -50%;
+    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.9);
+  }
+}
+
+/* --- header */
+.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
+  padding: 0 var(--gap) 0 0;
+  border: var(--border-width) solid var(--color-primary);
+  border-bottom: 0;
+  border-left: 0;
+  border-right-width: var(--border-panel-width);
+  border-top-right-radius: calc(var(--radius100) * 2);
+  display: flex;
+  position: relative;
+  min-height: calc(var(--gap) * 5);
+  gap: var(--gap);
+  align-items: center;
+}
+
+.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
+  height: calc(var(--gap) * 5);
+  width: calc(var(--gap) * 4);
+  top: var(--gap);
+  padding: var(--gap50) var(--gap50);
+  flex-shrink: 0;
+}
+
+.navbar-nav > .user-menu > .dropdown-menu > li.user-header > p {
+  color: var(--color-red-alert);
+  font-size: 26px;
+  margin-top: 0;
+  text-transform: uppercase;
+  text-align: left;
+  margin-bottom: 0;
+}
+
+.navbar-nav > .user-menu > .dropdown-menu > li.user-header > p::after {
+  content: "A black hole for Internet advertisements";
+  display: block;
+  font-size: 1.5rem;
+  color: var(--color-quinternary);
+}
+
+/* --- footer */
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
+  display: flex;
+  flex-direction: column;
+  padding: var(--gap) var(--gap) calc(var(--gap) * 2) var(--gap);
+  background: var(--color-background);
+  border: var(--border-width) solid var(--color-secondary);
+  border-top: 0;
+  border-left: 0;
+  border-right-width: var(--border-panel-width);
+  border-bottom-right-radius: 0;
+  margin-top: var(--border-width);
+  position: relative;
+}
+
+@media (min-width: 576px) {
+  .navbar-nav > .user-menu > .dropdown-menu > .user-footer {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+}
+
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer hr {
+  width: 100%;
+}
+
+@media (min-width: 576px) {
+  .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-link {
+    width: calc(50% - var(--gap50));
+    margin-block: var(--gap50);
+  }
+}
+
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-link:first-child {
+  width: 100%;
+  background-color: var(--color-success-dark) !important;
+  color: var(--color-success);
+}
+
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-link:first-child:hover {
+  background-color: var(--color-link) !important;
+  color: #fff;
+}
+
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-link:last-child {
+  width: 100%;
+  background-color: var(--color-supplement-01) !important;
+  color: var(--color-danger-bright);
+}
+
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-link:last-child:hover {
+  background-color: var(--color-danger) !important;
+  color: #fff;
+}
+
+@media (max-width: 768px) {
+  .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-link + .btn-link {
+    margin-top: var(--gap50);
+  }
+}
+
+/* --- fake corners */
+@media (min-width: 768px) {
+  .navbar-nav > .user-menu > .dropdown-menu > li.user-header::after,
+  .navbar-nav > .user-menu > .dropdown-menu > .user-footer::after {
+    display: block;
+    content: "";
+    background-color: var(--color-background);
+    width: var(--gap);
+    border-radius: 0 var(--radius50) 0 0;
+    position: absolute;
+    inset: 0 calc(var(--gap50) * -1) 0 auto;
+    z-index: 5;
+  }
+
+  .navbar-nav > .user-menu > .dropdown-menu > .user-footer::after {
+    border-radius: 0 0 var(--radius50) 0;
+  }
+}
+
+/* --- additional visual tweaks */
+.navbar-custom-menu > .navbar-nav > li > .dropdown-menu::after {
+  content: "LCARS theme by @MichalSvatos";
+  text-transform: uppercase;
+  font-size: 1rem;
+  position: absolute;
+  inset: auto auto var(--gap25) var(--gap);
+  color: var(--color-secondary);
+}
+
+@media (min-width: 768px) {
+  .navbar-nav > .user-menu > .dropdown-menu > li.user-header::before {
+    content: "";
+    position: absolute;
+    width: var(--gap50);
+    height: var(--gap50);
+    right: calc(var(--gap) * -1.5);
+    bottom: var(--gap50);
+    background-color: var(--color-background);
+    z-index: 6;
+  }
+
+  .navbar-nav > .user-menu > .dropdown-menu > .user-footer::before {
+    display: block;
+    position: absolute;
+    right: calc(var(--gap) * -3);
+    top: var(--gap);
+    width: calc(var(--gap) * 2.5);
+    background-color: var(--color-secondary);
+    z-index: 6;
+    border-radius: 0 var(--radius100) var(--radius100) 0;
+    border: var(--border-width) solid var(--color-background);
+    bottom: calc(var(--gap) * 2);
+    border-left: 0;
+    transition: background-color var(--transition-duration-slow);
+  }
+
+  .navbar-nav > .user-menu > .dropdown-menu > .user-footer:hover::before {
+    background-color: var(--color-tertiary);
+  }
+}
+
+.navbar-nav > .user-menu.open > .dropdown-toggle {
+  background-color: var(--color-danger);
+  z-index: 1001;
+  position: relative;
+}
+
+.navbar-nav > .user-menu.open > .dropdown-toggle:hover {
+  background-color: var(--color-danger-bright);
+}
+
+.navbar-nav > .user-menu.open > .dropdown-toggle::after {
+  content: "Close";
+  font-size: 1.2rem;
+  transition: color var(--transition);
+}
+
+.navbar-nav > .user-menu.open > .dropdown-toggle:hover::after {
+  color: #fff;
+}
+
+.navbar-nav > .user-menu.open > .dropdown-toggle > svg {
+  display: none;
+}
+
+/* MAIN SIDEBAR
+  ========================================================== */
+
+.main-sidebar {
+  background: linear-gradient(0deg, var(--color-secondary) 80%, var(--color-background) 80%);
+  padding-top: calc(var(--gap) * 5.615);
+  padding-bottom: calc(var(--gap) * 10);
+  width: var(--sidebar-width);
+  border-radius: 0 0 0 var(--radius-main-lcars);
+  bottom: 0;
+  margin-bottom: calc(var(--gap) * 20.5);
+  min-height: auto;
+  transition:
+    border-radius var(--transition),
+    transform 0.3s ease-in-out,
+    width 0.3s ease-in-out; /* transform and width from AdminLTE.min */
+}
+
+@media (min-width: 768px) {
+  .main-sidebar {
+    left: var(--gap25);
+  }
+}
+
+@media (min-width: 992px) {
+  .main-sidebar {
+    margin-bottom: calc(var(--gap) * 14);
+  }
+}
+
+.sidebar {
+  background-color: var(--color-secondary);
+  border-radius: var(--radius-main-lcars) 0 0 0;
+  position: relative;
+  transition: border-radius var(--transition);
+}
+
+/* --- lcars "lines" */
+.sidebar:before,
+.sidebar:after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  opacity: 1;
+  transition:
+    opacity var(--transition),
+    inset var(--transition);
+}
+
+.sidebar:before {
+  border-radius: var(--radius100) 0 0 0;
+  border: var(--border-width) solid black;
+  border-right: 0;
+  border-bottom: 0;
+  inset: calc(var(--gap) * 16) 0 0 calc(var(--gap) * 4);
+}
+
+.sidebar:after {
+  background-color: var(--color-background);
+  height: var(--border-width);
+  inset: auto 0 0 calc(var(--gap) * 4);
+}
+
+.sidebar-menu {
+  padding-left: var(--gap);
+}
+
+/* --- headers */
+.sidebar-menu > li.header {
+  display: flex;
+  justify-content: flex-end;
+  text-align: right;
+  font-size: 1.2rem;
+  color: var(--color-text-dark);
+  text-transform: uppercase;
+  padding: var(--gap75) var(--gap50) 0 0;
+  border-top: calc(var(--border-width) * 10) solid var(--color-background);
+  border-left: 0;
+}
+
+.sidebar-menu > li.header:first-child {
+  border: 0;
+}
+
+.sidebar-menu > li.header + li {
+  margin-top: calc(var(--gap) - (var(--border-width) * 2));
+}
+
+.sidebar-menu > li,
+.treeview-menu > li {
+  border-left: var(--border-width-thick) solid var(--color-background);
+  border-top: var(--border-width-thick) solid var(--color-background);
+}
+
+.sidebar-menu > li svg {
+  display: none;
+}
+
+.sidebar-menu > li > a,
+.treeview-menu > li > a {
+  padding: var(--gap50) var(--gap);
+  background-color: var(--color-primary);
+  color: var(--color-primary-text);
+  font-size: 1.4rem;
+  text-transform: uppercase;
+  transition: background-color var(--transition-fast);
+}
+
+.sidebar-menu > li > a:hover,
+.treeview-menu > li > a:hover {
+  background-color: var(--color-tertiary);
+  color: var(--color-text-dark);
+}
+
+.sidebar-menu > li.active > a,
+.treeview-menu > li.active a {
+  background-color: var(--color-quaternary);
+  color: var(--color-background);
+}
+
+.sidebar-menu > li.active.treeview {
+  background-color: var(--color-quaternary);
+}
+
+/* --- donate */
+.sidebar-menu > li.menu-donate {
+  border-bottom: calc(var(--border-width) * 10) solid var(--color-background);
+}
+
+.sidebar-menu > li.menu-donate a {
+  --pulse-color: var(--color-danger-bright);
+  --pulse-color-background: var(--color-danger);
+  background-color: var(--color-danger);
+  color: var(--color-text-dark);
+  animation: pulseBg var(--transition-duration-slow) var(--transition-function) infinite;
+}
+
+.sidebar-menu > li.menu-donate a:hover {
+  --pulse-color: #fff;
+}
+
+/* --- submenus */
+.treeview-menu > li {
+  background-color: var(--color-background);
+}
+
+.treeview.menu-open {
+  background-color: var(--color-primary);
+}
+
+.treeview-menu > li a {
+  border-radius: calc(var(--radius100) * 1.5);
+}
+
+.treeview-menu > li svg {
+  display: block;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  translate: -50% -50%;
+  margin-right: 0;
+  z-index: 1;
+}
+
+.treeview-menu > li a:after {
+  content: "";
+  width: calc(var(--gap) * 2.5);
+  border-left: var(--border-width) solid var(--color-background);
+  position: absolute;
+  inset: 0 0 0 auto;
+  z-index: 0;
+}
+
+.sidebar-menu li > a > .pull-right-container {
+  right: 0;
+}
+
+.treeview .pull-right-container > svg {
+  display: block;
+}
+
+/* --- sidebar collapsed */
+.sidebar-mini.sidebar-collapse .sidebar:before {
+  opacity: 0;
+  inset: calc(var(--gap) * 16) 0 0 100%;
+}
+
+.sidebar-mini.sidebar-collapse .sidebar-menu {
+  padding-left: 0;
+}
+
+.sidebar-mini.sidebar-collapse .sidebar-menu > li,
+.sidebar-mini.sidebar-collapse .treeview-menu > li {
+  border-left: 0;
+}
+
+.sidebar-mini.sidebar-collapse .sidebar-menu > li a,
+.sidebar-mini.sidebar-collapse .treeview-menu > li a {
+  min-height: calc(var(--gap) * 2.25);
+}
+
+.sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.sidebar-mini.sidebar-collapse .sidebar-menu > li svg {
+  display: block;
+  margin-right: 0;
+}
+
+.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse
+  .sidebar-menu
+  > li:hover
+  > a
+  > span.pull-right-container {
+  display: none !important;
+}
+
+.sidebar-mini.sidebar-collapse .sidebar-menu > li.header + li {
+  margin-top: 0;
+}
+
+@media (min-width: 768px) {
+  .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse
+    .sidebar-menu
+    > li:hover
+    > a
+    > span:not(.pull-right),
+  .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse
+    .sidebar-menu
+    > li:hover
+    > .treeview-menu {
+    left: var(--sidebar-width);
+  }
+
+  .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse
+    .sidebar-menu
+    > li:hover
+    > .treeview-menu {
+    margin-top: calc(var(--border-width) * -4);
+  }
+
+  .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse
+    .sidebar-menu
+    > li:hover
+    > a
+    > span:not(.pull-right) {
+    border-radius: 0;
+  }
+}
+
+@media (min-width: 768px) {
+  .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse
+    .sidebar-menu
+    > li:hover
+    > a
+    > span {
+    padding: var(--gap50) var(--gap);
+  }
+}
+
+/* USER PANEL (status)
+  ========================================================== */
+
+.user-panel {
+  color: var(--color-text-dark);
+  padding-top: calc(var(--gap) * 4);
+  padding-bottom: var(--gap);
+  margin-bottom: calc(var(--gap) * 2);
+  min-height: calc(var(--gap) * 7);
+}
+
+.user-panel > .info:after {
+  content: "";
+  position: absolute;
+  bottom: calc(var(--gap) * -1);
+  left: var(--border-width-thick);
+  width: calc(var(--gap) * 2);
+  padding: var(--gap50);
+  background-color: var(--color-background);
+  border-radius: 0 0 var(--radius50) var(--radius50);
+}
+
+.user-panel > .info > p {
+  margin: 0;
+  text-transform: uppercase;
+  padding: var(--gap50) var(--gap75);
+  text-align: right;
+}
+
+.user-panel > .info > p:after {
+  content: "_panel-47a";
+}
+
+.user-panel .image {
+  position: absolute;
+  top: calc(var(--gap) * 3.5);
+  left: calc(var(--border-width) * -1);
+  width: calc(var(--gap) * 2);
+  padding: var(--gap50);
+  background-color: var(--color-background);
+  border-radius: var(--radius50) var(--radius50) 0 0;
+}
+
+.user-panel .image img {
+  min-width: auto;
+  filter: grayscale(1);
+  transition: filter var(--transition);
+}
+
+.user-panel:hover .image img {
+  filter: grayscale(0);
+}
+
+.user-panel .info br {
+  display: none;
+}
+
+.user-panel .info > span {
+  display: block;
+  background-color: var(--color-primary);
+  padding: var(--gap50) var(--gap75);
+  margin: 0;
+  border: calc(var(--border-width) * 2) solid var(--color-background);
+  border-inline: 0;
+  text-transform: uppercase;
+  text-align: right;
+  position: relative;
+  color: var(--color-primary-text);
+  font-size: 1.2rem;
+  letter-spacing: 0.055rem;
+}
+
+.user-panel .info > span ~ span {
+  margin-top: calc(var(--border-width) * -2);
+}
+
+.user-panel .info > span:before {
+  content: "";
+  inset: 0 auto 0 0;
+  position: absolute;
+  width: calc(var(--gap) * 2.5);
+  background-color: var(--color-background);
+  border-left: var(--border-width-thick) solid var(--color-secondary);
+}
+
+.user-panel .info > span svg {
+  position: absolute;
+  left: calc(var(--gap) * 1.125);
+  top: 50%;
+  translate: 0 -50%;
+}
+
+/* --- user panel blocks variants */
+.user-panel span[id="status"] {
+  background-color: var(--color-success-dark);
+  color: var(--color-success);
+}
+
+.user-panel span[id="status"]::before {
+  border-color: var(--color-success-dark);
+}
+
+.user-panel span[id="status"] svg path {
+  fill: var(--color-success);
+}
+
+.user-panel .info > span:has(.text-orange) {
+  background-color: var(--color-quinternary);
+}
+
+.user-panel .info > span:has(.text-red) {
+  --pulse-color: #fff;
+  --pulse-color-background: var(--color-danger);
+  background-color: var(--color-danger);
+  color: var(--color-text-dark);
+  animation: pulseBg var(--transition-duration-slow) var(--transition-function) infinite;
+  border-color: var(--color-background);
+}
+
+.user-panel .info > span:has(.text-red):before {
+  background-color: var(--color-text-dark);
+  border-color: var(--color-danger-bright);
+}
+
+.user-panel .info > span:has(.text-red) svg path {
+  fill: var(--color-red-alert);
+}
+
+/* --- collapsed */
+.sidebar-mini.sidebar-collapse .user-panel .image {
+  border-radius: var(--radius50);
+}
+
+/* CONTENT
+  ========================================================== */
+
+.layout-boxed,
+.content-wrapper {
+  background: var(--color-background);
+}
+
+@media (max-width: 767px) {
+  .sidebar-open .content-wrapper,
+  .sidebar-open .main-footer {
+    transform: translate(var(--sidebar-width), 0);
+  }
+}
+
+@media (min-width: 768px) {
+  .content-wrapper,
+  .main-footer {
+    margin-left: var(--sidebar-width);
+  }
+}
+
+.content {
+  border-top: var(--border-width-thick) solid var(--color-secondary);
+  margin-top: calc(var(--border-width) * 1.5);
+  position: relative;
+  padding: calc(var(--gap) * 2) calc(var(--gap) * 1.5);
+}
+
+@media (min-width: 768px) {
+  .content {
+    min-height: calc(var(--gap) * 85);
+  }
+
+  .sidebar-collapse .content {
+    min-height: calc(var(--gap) * 55);
+  }
+}
+
+@media (min-width: 1250px) {
+  /* --wrapper-max-width */
+  .content {
+    padding: calc(var(--gap) * 2) 0 calc(var(--gap) * 2) calc(var(--gap) * 2.5);
+  }
+}
+
+/* --- fake corners */
+.content:before,
+.content:after {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: var(--gap);
+}
+
+.content:before {
+  background-color: var(--color-secondary);
+}
+
+.content:after {
+  border-radius: var(--radius100) 0 0 0;
+  background-color: var(--color-background);
+}
+
+/* STATS (4 small boxes on the homepage)
+  ========================================================== */
+
+.small-box[class*="bg-"] {
+  border-radius: 0;
+  background-color: var(--color-primary) !important;
+  font-weight: var(--font-light);
+  text-transform: uppercase;
+  color: var(--color-primary-text) !important;
+  overflow: visible;
+}
+
+/* --- on long term data / query log */
+.col-xs-12:has(.small-box):first-child .small-box {
+  border-radius: var(--radius100) var(--radius100) 0 0;
+}
+
+.col-xs-12:has(.small-box):last-child .small-box {
+  border-radius: 0 0 var(--radius100) var(--radius100);
+}
+
+.col-xs-12:has(.small-box) .small-box .inner {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.col-xs-12:has(.small-box) .small-box .inner:before {
+  bottom: 0;
+}
+
+@media (min-width: 1200px) {
+  /* --- on long term data / query log */
+  .col-xs-12:has(.small-box):first-child .small-box {
+    border-radius: var(--radius100) 0 0 var(--radius100);
+  }
+
+  .col-xs-12:has(.small-box):last-child .small-box {
+    border-radius: 0 var(--radius100) var(--radius100) 0;
+  }
+
+  /* --- on dashboard */
+  .col-sm-6:has(.small-box):first-child .small-box {
+    border-radius: var(--radius100) 0 0 0;
+  }
+
+  .col-sm-6:has(.small-box):last-child .small-box {
+    border-radius: 0 var(--radius100) 0 0;
+  }
+}
+
+.small-box.bg-red {
+  background-color: var(--color-danger) !important;
+  color: var(--color-text-dark) !important;
+}
+
+.small-box.bg-yellow {
+  background-color: var(--color-tertiary) !important;
+  color: var(--color-text-dark) !important;
+}
+
+.small-box .inner {
+  padding: var(--gap);
+  text-align: left;
+}
+
+.small-box h3 {
+  font-weight: var(--font-regular);
+  letter-spacing: -0.1rem;
+}
+
+/* --- vertical scanner animation */
+.col-lg-3 + .col-lg-3 .small-box:before,
+.col-lg-3 + .col-lg-3 .small-box:after {
+  content: "";
+  width: calc(30px - (var(--lcars-space) * 2));
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  translate: calc(-100% - var(--lcars-space)) 0;
+}
+
+.col-lg-3 + .col-lg-3 .small-box:before {
+  background-image: linear-gradient(
+    0deg,
+    transparent 40%,
+    var(--color-disabled) 40%,
+    var(--color-disabled) 50%,
+    transparent 50%,
+    transparent 90%,
+    var(--color-disabled) 90%,
+    var(--color-disabled) 100%
+  );
+  background-size: var(--gap) var(--gap);
+  z-index: 1;
+  border-top: calc(var(--border-width) * 2) solid var(--color-danger);
+}
+
+.col-lg-3 + .col-lg-3 .small-box:after {
+  background-image: linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(0, 0, 0, 0) 49%,
+    rgba(0, 0, 0, 1) 51%,
+    rgba(0, 0, 0, 1) 100%
+  );
+  background-position: 0 0;
+  z-index: 2;
+  animation: backgroundPositionAnimation 5s linear infinite;
+}
+
+@media (min-width: 768px) and (max-width: 1199px) {
+  .small-box.bg-yellow:after,
+  .small-box.bg-yellow:before {
+    display: none;
+  }
+}
+
+.small-box.bg-yellow:after {
+  animation-delay: 3s !important;
+}
+
+.small-box.bg-green:after {
+  animation-delay: 1.6s !important;
+}
+
+.small-box:has(.glow) .small-box-footer:after {
+  border-color: var(--color-danger-bright);
+}
+
+.small-box span.glow {
+  color: #fff;
+  text-shadow: 0 0 var(--gap25) var(--color-tertiary-hover);
+}
+
+/* --- icons */
+.small-box .icon {
+  display: block !important;
+  font-size: 5rem;
+  width: calc(var(--gap) * 4);
+  color: var(--color-background);
+  position: absolute;
+  right: var(--gap50);
+  top: 0;
+  text-align: center;
+  opacity: 0.25;
+  translate: 0 0;
+  transition:
+    opacity var(--transition-slow),
+    translate var(--transition-slow);
+}
+
+.small-box[class*="bg-"]:hover .icon {
+  opacity: 1;
+  translate: 0 47%;
+  transform: scale(1);
+  font-size: 5rem;
+}
+
+.small-box .inner:before {
+  content: "";
+  width: calc(var(--gap) * 5);
+  border-left: var(--border-width) solid var(--color-background);
+  position: absolute;
+  inset: 0 0 calc(var(--gap) * 1.75) auto;
+  background-color: rgba(0 0 0 / 0.2);
+  transition: background-color var(--transition-slow);
+}
+
+.small-box[class*="bg-"]:hover .inner:before {
+  background-color: rgba(255 255 255 / 0.2);
+}
+
+/* --- small-box footer */
+.small-box > .small-box-footer {
+  background-color: var(--color-background);
+  border-top: calc(var(--border-width) * 2) solid var(--color-background);
+  padding: var(--gap50) 0 0 0;
+  position: static;
+  font-size: 1.4rem;
+  letter-spacing: 0.055rem;
+  text-align: right;
+}
+
+.small-box > .small-box-footer:after,
+.small-box > .small-box-footer:before {
+  content: "";
+  position: absolute;
+}
+
+.small-box > .small-box-footer:after {
+  height: calc(var(--gap) * 1.75);
+  inset: auto 0 0;
+  border: calc(var(--border-width) * 2) solid var(--color-primary);
+  border-right: 0;
+  border-bottom: 0;
+}
+
+.small-box > .small-box-footer:before {
+  position: absolute;
+  inset: 0;
+}
+
+.small-box > .small-box-footer:hover {
+  background-color: var(--color-background);
+}
+
+.small-box > .small-box-footer:hover:after {
+  border-color: var(--color-secondary-hover);
+}
+
+/* CUSTOM HEADERS - VARIOUS LCARS PANELS
+  ========================================================== */
+
+.page-header {
+  display: flex;
+  justify-content: flex-start;
+  background-color: var(--color-disabled);
+  position: relative;
+  border-bottom: 0;
+  padding: 0;
+  margin-bottom: calc(var(--gap) * 2);
+}
+
+.page-header::after {
+  background-color: var(--color-primary);
+  content: "";
+  position: absolute;
+  inset: auto 0 0;
+  height: var(--gap);
+  border-top: calc(var(--border-width) * 3) solid var(--color-background);
+  z-index: 0;
+}
+
+.page-header h1 {
+  font-weight: 400;
+  position: relative;
+  z-index: 1;
+  background-color: var(--color-background);
+  margin: 0 0 0 var(--gap);
+  padding: var(--gap25) var(--gap);
+  color: var(--color-tertiary-hover);
+}
+
+.page-header > small {
+  font-size: 1.5rem;
+  text-transform: uppercase;
+  padding-inline: var(--gap);
+  color: var(--color-link);
+}
+
+/* -- box "resets" - black backgrounds, borders ... */
+.box,
+.box-warning,
+.login-box,
+.nav-tabs-custom,
+.nav-tabs-custom > .tab-content {
+  background-color: var(--color-background);
+  border: 0;
+  margin-bottom: 0;
+  box-shadow: none;
+}
+
+#queries-over-time,
+#clients {
+  border: var(--border-width-thick) solid var(--color-primary);
+  border-radius: 0 var(--radius100) 0 0;
+  border-bottom: 0;
+  border-left: 0;
+  border-right-width: var(--border-panel-width);
+  margin-right: var(--gap25);
+  margin-top: var(--gap);
+  margin-bottom: 0;
+  width: auto;
+}
+
+#clients {
+  border-top: 0;
+  border-bottom: var(--border-width-thick) solid var(--color-primary);
+  border-color: var(--color-tertiary);
+  border-radius: 0 0 var(--radius100) 0;
+  margin-top: 0;
+  padding-top: var(--gap);
+}
+
+/* -- top bars + colored titles */
+#queries-over-time:before,
+#clients:before {
+  content: "";
+  background-color: var(--color-danger);
+  width: calc(var(--border-panel-width) + var(--border-width));
+  padding: var(--gap25) var(--gap25);
+  border-top: var(--border-width) solid var(--color-background);
+  position: absolute;
+  right: calc((var(--border-panel-width) + var(--border-width)) * -1);
+  bottom: 0;
+  font-size: 1rem;
+  color: var(--color-text-dark);
+  text-transform: uppercase;
+  text-align: right;
+  z-index: 1;
+}
+
+#clients:before {
+  bottom: auto;
+  top: 0;
+  background-color: var(--color-secondary);
+  border-bottom: var(--border-width) solid var(--color-background);
+  height: calc(var(--gap) * 5);
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  width: var(--border-panel-width);
+  right: calc(var(--border-panel-width) * -1);
+}
+
+@media (min-width: 768px) {
+  #queries-over-time:before,
+  #clients:before {
+    content: attr(id);
+  }
+}
+
+.box-header.with-border {
+  color: var(--color-danger-bright);
+  padding: var(--gap25) var(--gap25);
+  border-bottom: 0;
+  min-height: calc(var(--gap) * 2.125);
+}
+
+#clients .box-header {
+  color: var(--color-tertiary);
+}
+
+.box-header .box-title {
+  font-size: 2.25rem;
+  font-weight: var(--font-regular);
+}
+
+.box-body {
+  border-radius: 0;
+  padding: var(--gap) var(--gap) var(--gap) 0;
+  position: relative;
+}
+
+/* --- fake corners */
+.box-body:after,
+.box-body:before {
+  content: "";
+  display: block;
+  width: var(--gap);
+  position: absolute;
+}
+
+/* --- box footer */
+.box-footer,
+#add-group .btn-toolbar {
+  border-top: calc(var(--border-width) * 2) double var(--color-background);
+  background-color: var(--color-disabled);
+  padding: var(--gap) var(--gap);
+  border-radius: 0 0 var(--radius100) var(--radius100);
+  margin-bottom: calc(var(--gap) * 2);
+}
+
+.box-footer strong {
+  display: block;
+  margin-bottom: var(--gap);
+  color: var(--color-tertiary-hover);
+  text-transform: uppercase;
+}
+
+.box-footer code {
+  background-color: var(--color-background);
+}
+
+#teleporter .box-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+#teleporter .box-footer .btn {
+  background-color: var(--color-success-dark);
+  color: var(--color-success);
+}
+
+#teleporter .box-footer .btn:hover {
+  background-color: var(--color-link);
+  color: #fff;
+}
+
+@media (min-width: 768px) {
+  #queries-over-time .box-body:before,
+  #clients .box-body:before {
+    background-color: var(--color-primary);
+    inset: calc((var(--gap) * -2) - var(--border-width)) 0 0 auto;
+  }
+
+  #queries-over-time .box-body:after,
+  #clients .box-body:after {
+    background-color: var(--color-background);
+    inset: calc((var(--gap) * -2) - var(--border-width)) 0 0 auto;
+    border-radius: 0 var(--radius100) 0 0;
+  }
+
+  #clients .box-body:before {
+    background-color: var(--color-tertiary);
+  }
+
+  #clients .box-body:after {
+    border-radius: 0 0 var(--radius100) 0;
+  }
+}
+
+/* --- additional line on the side and top + animated box ("total queries" box) */
+#queries-over-time:after {
+  content: "";
+  position: absolute;
+  inset: 0 calc((var(--border-panel-width) + (var(--border-width) * 2)) * -1) 0 auto;
+  width: calc(var(--border-width) * 2);
+  background-color: var(--color-danger);
+  border-left: var(--border-width) solid var(--color-background);
+}
+
+#queries-over-time .box-header:before {
+  content: "";
+  height: calc(var(--gap) + (var(--border-width) * 2));
+  border-top: var(--border-width) solid var(--color-danger);
+  position: absolute;
+  display: block;
+  top: calc(var(--border-width) * -10);
+  right: calc((var(--border-panel-width) + (var(--border-width) * 2)) * -1);
+  left: 0;
+  border-right: var(--border-width) solid var(--color-danger);
+  border-radius: 0 var(--radius100) 0 0;
+}
+
+#queries-over-time .box-header:after {
+  --scanner-animation-width: var(--gap25);
+  content: "";
+  position: absolute;
+  width: calc(var(--gap) * 2);
+  height: calc(var(--gap) * 0.75);
+  background-color: var(--color-danger);
+  border: var(--border-width) solid var(--color-background);
+  top: calc(var(--gap) * -1.6);
+  left: 50%;
+  display: block;
+  animation: scannerSlide 48s cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite;
+  translate: 0 0;
+}
+
+@media (min-width: 768px) {
+  #queries-over-time .box-header:after {
+    --scanner-animation-width: var(--gap50);
+    width: calc(var(--gap) * 3);
+  }
+}
+
+@media (min-width: 1250px) {
+  #queries-over-time .box-header:after {
+    --scanner-animation-width: var(--gap);
+  }
+}
+
+/* --- chart scanner */
+.chart:before {
+  content: "";
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.2) 0%,
+    rgba(255, 255, 255, 1) 50%,
+    rgba(255, 255, 255, 0.2) 100%
+  );
+  width: calc(var(--gap) * 2);
+  margin-inline: var(--gap);
+  position: absolute;
+  left: 0;
+  top: var(--gap50);
+  bottom: calc(var(--gap) * 2 - var(--gap25));
+  animation: chartScanner 16s ease-in-out infinite;
+  transform: translate3d(0, 0, 0);
+  opacity: 0.2;
+  pointer-events: none;
+}
+
+#clients .chart:before {
+  animation-delay: 160ms;
+  animation-duration: 24s;
+}
+
+.box .overlay,
+.overlay-wrapper .overlay {
+  background: rgb(0 0 0 / 70%);
+  border-radius: var(--radius100);
+}
+
+/* --- "TOP" tables */
+#domain-frequency,
+#ad-frequency,
+#client-frequency,
+#client-frequency-blocked {
+  --table-color: var(--color-secondary);
+  position: relative;
+  margin-top: calc(var(--gap) * 2);
+  border: var(--border-width-thick) solid var(--table-color);
+  border-right: 0;
+  border-top-width: calc(var(--gap) * 1.6);
+  border-radius: var(--radius100) 0 0 var(--radius100);
+}
+
+#ad-frequency,
+#client-frequency-blocked {
+  --table-color: var(--color-quinternary);
+}
+
+#domain-frequency:before,
+#ad-frequency:before,
+#client-frequency:before,
+#client-frequency-blocked:before {
+  content: attr(id) "-panel";
+  position: absolute;
+  inset: auto var(--gap) 0 auto;
+  text-transform: uppercase;
+  font-size: 1rem;
+  color: var(--table-color);
+}
+
+#domain-frequency .box-header,
+#ad-frequency .box-header,
+#client-frequency .box-header,
+#client-frequency-blocked .box-header {
+  position: absolute;
+  right: 0;
+  top: calc(var(--gap) * -1.6);
+  background-color: var(--color-background);
+  padding: 0 var(--gap50);
+  z-index: 2;
+  min-height: calc(var(--gap) * 1.6);
+}
+
+#domain-frequency .box-body,
+#ad-frequency .box-body,
+#client-frequency .box-body,
+#client-frequency-blocked .box-body {
+  padding-right: 0;
+  z-index: 5;
+}
+
+/* --- "TOP" tables animated scanners */
+#domain-frequency .box-body:before,
+#domain-frequency .box-body:after,
+#ad-frequency .box-body:before,
+#ad-frequency .box-body:after,
+#client-frequency .box-body:before,
+#client-frequency .box-body:after,
+#client-frequency-blocked .box-body:before,
+#client-frequency-blocked .box-body:after {
+  content: "";
+  position: absolute;
+  inset: 0 auto auto 0;
+}
+
+#ad-frequency .box-body:after,
+#client-frequency .box-body:after,
+#client-frequency-blocked .box-body:after,
+#domain-frequency .box-body:after {
+  background-color: transparent;
+  width: calc(100% - var(--gap));
+  height: calc(var(--gap) * 1.5);
+  border: var(--border-width-thick) solid var(--color-background);
+  border-radius: 0 var(--radius100) var(--radius100) 0;
+  margin: var(--gap75);
+}
+
+#ad-frequency .box-body:before,
+#client-frequency .box-body:before,
+#client-frequency-blocked .box-body:before,
+#domain-frequency .box-body:before {
+  opacity: 0.5;
+  background-image: repeating-linear-gradient(
+    to right,
+    var(--color-secondary),
+    var(--color-secondary) var(--border-width),
+    var(--color-background) var(--border-width),
+    var(--color-background)
+  );
+  background-size: var(--gap) var(--gap);
+  background-position: center center;
+  width: calc(100% - var(--gap50));
+  height: calc(var(--gap) * 2);
+  margin: var(--gap50);
+  border: var(--border-width-thick) solid var(--color-primary);
+  border-radius: 0 var(--radius100) var(--radius100) 0;
+  animation: topBoxesScanner 15s cubic-bezier(0.87, 0, 0.13, 1) infinite;
+}
+
+#ad-frequency .box-body:before {
+  animation-delay: 0.8s;
+}
+
+#client-frequency .box-body:before {
+  animation-delay: 1.2s;
+}
+
+#client-frequency-blocked .box-body:before {
+  animation-delay: 1.6s;
+}
+
+/* --- set same height */
+@media (min-width: 992px) {
+  .row:has(#domain-frequency),
+  .row:has(#client-frequency) {
+    display: flex;
+  }
+
+  .row:has(#domain-frequency) > div,
+  .row:has(#client-frequency) > div {
+    display: flex;
+  }
+}
+
+/* PIE CHARTS BOXES
+  ========================================================== */
+
+#query-types-pie,
+#forward-destinations-pie {
+  padding: var(--gap25) var(--gap25);
+  margin-top: calc(var(--gap) * 2);
+  border: var(--border-width-thick) solid var(--color-primary);
+  border-radius: var(--radius100);
+}
+
+@media (min-width: 768px) {
+  #query-types-pie {
+    border-right-width: var(--pie-chart-border-width);
+  }
+
+  #forward-destinations-pie {
+    border-left-width: var(--pie-chart-border-width);
+    text-align: right;
+  }
+
+  #query-types-pie:before,
+  #forward-destinations-pie:before {
+    content: attr(id);
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    width: calc(var(--gap) * 9);
+    min-height: calc(var(--gap) * 4);
+    background-color: var(--color-secondary-hover);
+    padding: var(--gap25) var(--gap75);
+    text-align: right;
+    position: absolute;
+    inset: var(--gap) calc(var(--gap) * -9) auto auto;
+    font-size: 1.2rem;
+    text-transform: uppercase;
+    color: var(--color-text-dark);
+    border-top: calc(var(--border-width) * 2) solid var(--color-background);
+    z-index: 1;
+  }
+
+  #forward-destinations-pie:before {
+    justify-content: flex-start;
+    inset: var(--gap) auto auto calc(var(--gap) * -9);
+  }
+}
+
+#query-types-pie:after,
+#forward-destinations-pie:after {
+  content: "";
+  border: var(--border-width) solid var(--color-background);
+  border-radius: 0 var(--radius75) var(--radius75) 0;
+  background-color: transparent;
+  position: absolute;
+  inset: calc(var(--gap25) * -1) calc(var(--gap25) * -1) calc(var(--gap25) * -1)
+    calc(var(--gap25) * 32);
+  z-index: 0;
+}
+
+#forward-destinations-pie:after {
+  inset: calc(var(--gap25) * -1) calc(var(--gap25) * 32) calc(var(--gap25) * -1)
+    calc(var(--gap25) * -1);
+  border-radius: var(--radius75) 0 0 var(--radius75);
+}
+
+@media (min-width: 768px) {
+  #query-types-pie:after {
+    inset: calc(var(--gap25) * -1) calc(var(--gap25) * -10) calc(var(--gap25) * -1)
+      calc(var(--gap25) * 32);
+  }
+
+  #forward-destinations-pie:after {
+    inset: calc(var(--gap25) * -1) calc(var(--gap25) * 32) calc(var(--gap25) * -1)
+      calc(var(--gap25) * -10);
+  }
+}
+
+#query-types-pie > div,
+#forward-destinations-pie > div {
+  z-index: 5;
+}
+
+#query-types-pie .box-body,
+#forward-destinations-pie .box-body {
+  background: var(--background-grid) repeat 0 0;
+  background-size: calc(var(--gap) * 2) calc(var(--gap) * 2);
+  padding: var(--gap25) var(--gap25);
+  margin: var(--gap) 0 0 0;
+}
+
+@media (min-width: 768px) {
+  #query-types-pie .box-body,
+  #forward-destinations-pie .box-body {
+    justify-content: flex-end;
+    aspect-ratio: 1 / 1;
+  }
+
+  #query-types-pie .box-body {
+    margin-right: var(--gap);
+  }
+
+  #forward-destinations-pie .box-body {
+    margin-left: var(--gap);
+  }
+}
+
+/* --- fake corners */
+@media (min-width: 768px) {
+  #forward-destinations-pie .box-body {
+    justify-content: flex-start;
+  }
+
+  #query-types-pie .box-body:before,
+  #query-types-pie .box-body:after {
+    inset: calc((var(--gap) * -2.125) - var(--gap) - var(--gap25))
+      calc((var(--gap) * -1) - var(--gap25)) calc(var(--gap25) * -1) auto;
+  }
+
+  #forward-destinations-pie .box-body:before,
+  #forward-destinations-pie .box-body:after {
+    inset: calc((var(--gap) * -2.125) - var(--gap) - var(--gap25)) auto calc(var(--gap25) * -1)
+      calc((var(--gap) * -1) - var(--gap25));
+  }
+
+  #query-types-pie .box-body:before,
+  #forward-destinations-pie .box-body:before {
+    background-color: var(--color-primary);
+  }
+
+  #query-types-pie .box-body:after,
+  #forward-destinations-pie .box-body:after {
+    background-color: var(--color-background);
+    border-radius: 0 var(--radius50) var(--radius50) 0;
+  }
+
+  #forward-destinations-pie .box-body:after {
+    border-radius: var(--radius50) 0 0 var(--radius50);
+  }
+}
+
+#query-types-pie .box-body div:first-child,
+#forward-destinations-pie .box-body div:first-child {
+  padding: var(--gap) var(--gap);
+}
+
+@media (min-width: 768px) {
+  #query-types-pie .box-body div:first-child,
+  #forward-destinations-pie .box-body div:first-child {
+    flex-grow: 1;
+    width: 100% !important;
+    aspect-ratio: 1 / 1;
+    position: absolute;
+  }
+}
+
+/* --- pie chart legend + "buttons" */
+.chart-legend {
+  justify-content: flex-end;
+  translate: var(--gap) 0;
+}
+
+@media (min-width: 768px) {
+  .chart-legend {
+    width: calc(var(--gap) * 12) !important;
+    margin-top: calc(var(--gap) * 1.4);
+    margin-bottom: var(--gap);
+    translate: calc(var(--gap) * 10.5) 0;
+    flex-shrink: 0;
+    align-self: flex-start;
+  }
+
+  #forward-destinations-pie .chart-legend {
+    justify-content: flex-start;
+    translate: calc(var(--gap) * -10.5) 0;
+  }
+}
+
+.chart-legend ul {
+  width: calc(var(--gap) * 9);
+}
+
+.chart-legend li {
+  margin: 0;
+  background-color: var(--color-disabled);
+  border-block: calc(var(--border-width) * 2) solid var(--color-background);
+  padding: var(--gap50) calc(var(--gap) * 3) var(--gap50) var(--gap75);
+  justify-content: flex-start !important;
+  flex-direction: row-reverse !important;
+  transition: background-color var(--transition-fast);
+  text-transform: uppercase;
+  font-weight: var(--font-regular);
+  font-size: 1.4rem;
+}
+
+@media (min-width: 768px) {
+  #forward-destinations-pie .chart-legend li {
+    padding: var(--gap50) var(--gap75) var(--gap50) calc(var(--gap) * 3);
+    justify-content: flex-end !important;
+  }
+}
+
+.chart-legend li:hover {
+  background-color: var(--color-secondary);
+}
+
+.chart-legend li:hover p {
+  text-decoration: none !important;
+}
+
+.chart-legend li span {
+  background-color: var(--color-background);
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  inset: 0 var(--gap50) 0 auto;
+  width: calc(var(--gap) * 2);
+  margin: 0 !important;
+}
+
+@media (max-width: 767px) {
+  .chart-legend li span {
+    inset: 0 0 0 auto;
+    width: calc(var(--gap) * 2 + var(--border-width-thick));
+    margin: 0 !important;
+    border-right: var(--border-width-thick) solid var(--color-primary);
+  }
+}
+
+@media (min-width: 768px) {
+  #forward-destinations-pie .chart-legend li span {
+    inset: 0 auto 0 var(--gap50);
+  }
+}
+
+.chart-legend li span svg {
+  transition: transform var(--transition-fast);
+}
+
+.chart-legend li span:hover svg {
+  transform: scale(1.5);
+}
+
+.chart-legend li + li {
+  margin-top: calc(var(--border-width) * -2);
+}
+
+@media (max-width: 767px) {
+  .chart-legend li:first-child {
+    border-radius: var(--radius100) 0 0 0;
+  }
+
+  .chart-legend li:last-child {
+    border-radius: 0 0 0 var(--radius100);
+  }
+}
+
+/* FOOTER
+  ========================================================== */
+
+.main-footer {
+  --footer-color: var(--color-tertiary-hover);
+  --footer-color-text: var(--color-red-alert);
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+}
+
+/* --- fake corner */
+.main-footer > .row:first-child:before,
+.main-footer > .row:first-child:after {
+  content: "";
+  display: block;
+  position: absolute;
+  inset: auto calc(var(--gap) * -2) calc(var(--gap) * -3.5) calc(var(--gap) * -2);
+  height: var(--gap);
+}
+
+@media (min-width: 1250px) {
+  .main-footer > .row:first-child:before,
+  .main-footer > .row:first-child:after {
+    inset: auto calc(var(--gap) * -6) calc(var(--gap) * -5.5) calc(var(--gap) * -6);
+  }
+}
+
+.main-footer > .row:first-child:before {
+  background-color: var(--color-secondary);
+  height: var(--gap);
+}
+
+.main-footer > .row:first-child:after {
+  background-color: var(--color-background);
+  border-radius: 0 0 0 var(--radius100);
+  bottom: calc(var(--gap) * -3.25);
+}
+
+@media (min-width: 1250px) {
+  .main-footer > .row:first-child:after {
+    bottom: calc(var(--gap) * -5.25);
+  }
+}
+
+/* --- donation bar tweaks */
+.main-footer > .row:first-child {
+  padding: 0;
+  margin-inline: calc(var(--gap) * 2);
+  margin-bottom: calc(var(--gap) * 4);
+  margin-top: calc(var(--gap) * 4);
+  outline: calc(var(--gap) * 4) solid var(--color-background);
+  position: relative;
+}
+
+@media (min-width: 1250px) {
+  .main-footer > .row:first-child {
+    margin-inline: calc(var(--gap) * 6);
+    margin-bottom: calc(var(--gap) * 6);
+    margin-top: calc(var(--gap) * 4);
+    outline: calc(var(--gap) * 6) solid var(--color-background);
+  }
+}
+
+.main-footer > .row:first-child > div {
+  text-transform: uppercase;
+  font-size: 2rem;
+  width: 100%;
+  max-width: calc(var(--gap) * 35);
+}
+
+/* --- version info */
+.version-info {
+  padding-left: var(--gap);
+  margin: 0;
+  position: relative;
+}
+
+.version-info:before {
+  background-color: var(--color-supplement-01);
+  content: "version-info-panel \00000a snglrt-23 \00000a vlct-88 \00000a lcars-47 \00000a □ □ □ □ ■";
+  white-space: pre;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  width: calc(var(--gap) * 10);
+  padding: var(--gap50) var(--gap50);
+  border-left: var(--border-width) solid var(--color-background);
+  border-top: var(--border-width) solid var(--color-background);
+  border-radius: var(--radius-main-lcars-inner) 0 0 0;
+  color: var(--color-text-dark);
+  text-transform: uppercase;
+  text-align: right;
+  font-size: 1rem;
+  position: absolute;
+  inset: var(--gap50) auto 0 calc(var(--gap) * -10);
+  transition: border-radius var(--transition);
+  z-index: 1;
+}
+
+.sidebar-mini.sidebar-collapse .version-info:before {
+  --radius-main-lcars-inner: var(--radius75);
+  content: "VIP \00000a 23 \00000a 88 \00000a 47 \00000a □ ■";
+  white-space: pre;
+  width: calc(var(--gap) * 2);
+  left: calc(var(--gap) * -2);
+}
+
+.version-info::after {
+  content: "";
+  position: absolute;
+  left: calc(var(--sidebar-width) * -1);
+  height: calc(var(--gap) * 20);
+  width: var(--sidebar-width);
+  top: 0;
+  background: var(--color-primary);
+  border-radius: var(--radius-main-lcars) 0 0 0;
+  z-index: 0;
+}
+
+@media (min-width: 992px) {
+  .version-info::after {
+    height: calc(var(--gap) * 13.5);
+  }
+}
+
+.version-info > div {
+  width: 100%;
+  padding: 0;
+  height: calc(var(--gap) * 20);
+}
+
+@media (min-width: 992px) {
+  .version-info > div {
+    height: calc(var(--gap) * 13.5);
+  }
+}
+
+/* --- footer scanner */
+.version-info > div:before,
+.version-info > div:after {
+  content: "";
+  background-color: var(--color-supplement-01);
+  height: var(--gap25);
+  position: absolute;
+  inset: 0 0 auto calc(var(--gap) * -1);
+}
+
+.version-info > div:before {
+  background-color: var(--color-supplement-01);
+  height: var(--gap);
+  top: calc(var(--gap) * 0.5 + var(--border-width));
+}
+
+.version-info > div:after {
+  background-color: var(--color-primary);
+  height: var(--gap50);
+}
+
+.version-info .list-inline {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  text-align: left;
+  position: relative;
+  padding-top: calc(var(--gap) * 2);
+  padding-right: var(--gap);
+}
+
+@media (min-width: 992px) {
+  .version-info .list-inline {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding-right: 0;
+  }
+}
+
+.version-info .list-inline > li,
+.version-info .list-inline::after {
+  padding: var(--gap25) calc(var(--gap) * 8) var(--gap25) var(--gap);
+  text-transform: uppercase;
+  color: var(--color-primary-text);
+  font-weight: var(--font-regular);
+  position: relative;
+  margin-bottom: var(--gap);
+  padding-block: var(--gap50);
+}
+
+@media (min-width: 992px) {
+  .version-info .list-inline > li,
+  .version-info .list-inline::after {
+    width: calc(50% - var(--gap25));
+  }
+}
+
+.version-info .list-inline > li::after,
+.version-info .list-inline > li::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.version-info .list-inline > li::before {
+  border: var(--border-width) solid var(--color-disabled);
+  border-right-width: calc(var(--border-width) * 25);
+  border-bottom: 0;
+  border-radius: var(--radius100) 0 0 0;
+  z-index: 1;
+}
+
+.version-info .list-inline > li::after {
+  --color-footer-scanner: var(--color-primary);
+  display: block;
+  height: calc(var(--gap25));
+  width: calc(var(--gap) * 16);
+  background-image: linear-gradient(
+    90deg,
+    var(--color-footer-scanner) 16.67%,
+    var(--color-background) 16.67%,
+    var(--color-background) 50%,
+    var(--color-footer-scanner) 50%,
+    var(--color-footer-scanner) 66.67%,
+    var(--color-background) 66.67%,
+    var(--color-background) 100%
+  );
+  background-size: var(--gap50) var(--gap50);
+  inset: auto auto 0 var(--gap);
+  z-index: 1;
+  animation: footerScanner 20s var(--transition-function) infinite;
+}
+
+.version-info .list-inline > li:nth-child(2)::after {
+  animation-delay: 2s;
+  animation-duration: 16s;
+}
+
+.version-info .list-inline > li:nth-child(3)::after {
+  animation-delay: 1s;
+  animation-duration: 12s;
+}
+
+.version-info .list-inline > li:nth-child(4)::after {
+  animation-delay: 0.75s;
+  animation-duration: 18s;
+}
+
+@keyframes footerScanner {
+  0%,
+  100% {
+    width: calc(var(--gap) * 16);
+  }
+
+  5%,
+  75% {
+    width: calc(var(--gap) * 8);
+  }
+
+  25%,
+  95% {
+    width: calc(var(--gap) * 12);
+  }
+
+  50%,
+  65% {
+    width: calc(var(--gap) * 4);
+  }
+}
+
+/* --- fake corner */
+.version-info .list-inline::before {
+  content: "";
+  height: var(--gap);
+  background-color: var(--color-background);
+  position: absolute;
+  inset: var(--gap) 0 auto calc(var(--gap) * -1);
+  border-radius: var(--radius100) 0 0 0;
+}
+
+.version-info .list-inline strong {
+  font-weight: var(--font-regular);
+}
+
+.version-info a:not(.lookatme) {
+  color: var(--color-quaternary);
+  transition: color var(--transition);
+}
+
+.version-info a:not(.lookatme):hover {
+  color: var(--color-danger-bright);
+}
+
+/* --- update button */
+.version-info .lookatme {
+  --pulse-color: var(--color-red-alert);
+  --pulse-color-background: var(--color-disabled);
+  padding: var(--gap25) var(--gap50);
+  border: var(--border-width) solid var(--color-background);
+  border-bottom: 0;
+  color: #fff;
+  position: absolute;
+  inset: var(--border-width) var(--border-width) 0 auto;
+  animation: pulseBg var(--transition-duration-slow) var(--transition-function) infinite;
+  z-index: 1;
+}
+
+.version-info .lookatme::after {
+  content: "";
+  display: block;
+  inset: 0 auto 0 calc(var(--gap25) * -1);
+  width: var(--border-width);
+  padding: 0;
+  background-color: var(--color-supplement-01);
+  animation: none;
+  opacity: 1;
+  text-shadow: none;
+}
+
+/* --- installation panel */
+.version-info p {
+  --color-installation-panel: var(--color-danger);
+  display: flex;
+  align-items: center;
+  background-color: var(--color-background);
+  padding: var(--gap) var(--gap);
+  margin-top: var(--border-width) !important;
+  border: var(--border-width) solid var(--color-installation-panel);
+  border-bottom: 0;
+  border-right: 0;
+  color: var(--color-danger-bright);
+  text-align: left;
+  text-transform: uppercase;
+  font-size: 2rem;
+  position: relative;
+  height: calc(var(--gap) * 3.5);
+}
+
+.version-info p::before {
+  content: "";
+  background: var(--color-installation-panel);
+  width: var(--gap);
+  padding: var(--gap50) var(--gap50);
+  border: var(--border-width) solid var(--color-background);
+  border-right: 0;
+  position: absolute;
+  inset: auto auto calc(var(--border-width) * -1) calc(var(--border-width) * -1);
+  translate: -100% 0;
+  z-index: 2;
+}
+
+@media (min-width: 768px) {
+  .sidebar-mini.sidebar-collapse .version-info p::before {
+    content: "■";
+  }
+}
+
+@media (min-width: 992px) {
+  .version-info p::before {
+    content: "installation instructions";
+    width: auto;
+    padding-left: var(--gap);
+    padding-right: var(--gap50);
+    color: var(--color-text-dark);
+    text-transform: uppercase;
+    text-align: right;
+    font-size: 1rem;
+  }
+}
+
+.version-info p::after {
+  content: "";
+  background-color: rgba(222, 222, 222, 20%);
+  border-top: var(--border-width) solid var(--color-background);
+  position: absolute;
+  inset: calc(var(--border-width) * -2) 0 auto calc(var(--border-width) * -4);
+}
+
+.version-info p code {
+  text-transform: none;
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+  margin-left: var(--gap50);
+  border: var(--border-width) solid var(--color-disabled);
+  font-family: var(--font-family-mono);
+  font-size: 1.5rem;
+}
+
+.version-info p code:hover {
+  border-color: var(--color-red-alert);
+}
+
+.version-info p code a {
+  display: block;
+  padding: var(--gap50) var(--gap);
+  color: var(--color-danger-bright) !important;
+}
+
+.version-info p code:hover a {
+  background-color: var(--color-disabled);
+  color: #fff !important;
+}
+
+/* NAV CUSTOM TABS (settings page)
+  ========================================================== */
+
+.nav-tabs-custom {
+  border-radius: 0;
+}
+
+.nav-tabs-custom > .nav-tabs {
+  border: 0;
+  border-radius: 0;
+}
+
+@media (min-width: 1250px) {
+  .nav-tabs-custom > .nav-tabs {
+    display: flex;
+  }
+}
+
+.nav-tabs-custom > .nav-tabs > li {
+  border: 0;
+  margin: 0;
+}
+
+@media (min-width: 1250px) {
+  .nav-tabs-custom > .nav-tabs > li {
+    flex-grow: 1;
+  }
+}
+
+.nav-tabs-custom > .nav-tabs > li > a {
+  background-color: var(--color-primary);
+  border-radius: 0;
+  border: 0 !important;
+  min-width: calc(var(--gap) * 8);
+  margin: var(--gap25) var(--gap25) 0 0;
+  font-size: 1.4rem;
+  cursor: pointer;
+}
+
+.nav-tabs-custom > .nav-tabs > li.active > a,
+.nav-tabs-custom > .nav-tabs > li.active:hover > a,
+.nav-tabs-custom > .nav-tabs > li > a:hover {
+  background-color: var(--color-tertiary-hover);
+  color: var(--color-text-dark);
+  margin: var(--gap25) var(--gap25) 0 0;
+}
+
+.nav-tabs-custom > .nav-tabs > li > a:hover {
+  background-color: var(--color-danger-bright);
+}
+
+.nav-tabs-custom > .tab-content {
+  padding: 0;
+  margin-top: var(--gap);
+}
+
+/* SYSTEM (settings page)
+  ========================================================== */
+
+#sysadmin .table-striped {
+  margin-top: 0;
+}
+
+#sysadmin .table-striped > tbody > tr:nth-of-type(odd) {
+  background-color: transparent;
+}
+
+#sysadmin .table-striped > tbody > tr:nth-child(2n + 1) th {
+  background-color: var(--color-secondary);
+}
+
+#sysadmin .table-striped > tbody > tr:nth-child(3n + 1) th {
+  background-color: var(--color-tertiary);
+}
+
+#sysadmin .table-striped > tbody > tr:hover th {
+  background-color: var(--color-danger-bright);
+  transition: background-color var(--transition-fast);
+}
+
+#sysadmin .table-striped > tbody > tr:hover td:after,
+#sysadmin .table-striped > tbody > tr:hover td:before {
+  --sysadmin-border-color: var(--color-danger-bright);
+  transition: background-color var(--transition-fast);
+}
+
+@media (max-width: 767px) {
+  #sysadmin .table-bordered > tbody > tr {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+#sysadmin .table > tbody > tr > th,
+#sysadmin .table > tbody > tr > td {
+  padding: var(--gap) var(--gap75) var(--gap50) var(--gap75);
+  text-transform: uppercase;
+  border: var(--border-width-thick) solid var(--color-background);
+  position: relative;
+  font-size: inherit;
+}
+
+#sysadmin .table-bordered > tbody > tr > th {
+  border-left: 0;
+  background-color: var(--color-tertiary-hover);
+  color: var(--color-text-dark);
+  vertical-align: bottom;
+  text-align: right;
+  font-weight: var(--font-regular);
+}
+
+#sysadmin .table-bordered > tbody > tr > th:before {
+  content: "";
+  background-color: var(--color-background);
+  width: calc(var(--gap50));
+  height: calc(var(--gap50));
+  position: absolute;
+  inset: var(--gap25) auto auto var(--gap25);
+}
+
+#sysadmin .table-bordered > tbody > tr > td {
+  padding-left: var(--gap);
+}
+
+@media (max-width: 767px) {
+  #sysadmin .table-bordered > tbody > tr > td {
+    border-top: 0;
+    border-left: 0;
+  }
+}
+
+#sysadmin .table-bordered > tbody > tr > td:before,
+#sysadmin .table-bordered > tbody > tr > td:after {
+  --sysadmin-border-color: var(--color-secondary);
+  content: "";
+  position: absolute;
+  background-color: var(--sysadmin-border-color);
+}
+
+#sysadmin .table-bordered > tbody > tr > td:before {
+  height: var(--border-width-thick);
+  inset: 0 0 auto;
+}
+
+#sysadmin .table-bordered > tbody > tr > td:after {
+  width: var(--border-width-thick);
+  inset: 0 auto 0 0;
+}
+
+#sysadmin .row:first-child .box {
+  position: relative;
+  margin-top: calc(var(--gap) * 2);
+  border-top: calc(var(--gap) * 1.6) solid var(--color-secondary);
+  border-radius: var(--radius100) 0 0 var(--radius100);
+}
+
+#sysadmin .box-header {
+  border-left: calc(var(--border-panel-width)) solid var(--color-secondary);
+  min-height: calc(var(--gap) * 3);
+}
+
+#sysadmin .box-title {
+  position: absolute;
+  inset: calc(var(--gap) * -1.6) 0 auto auto;
+  background-color: var(--color-background);
+  padding: 0 var(--gap50);
+  min-height: calc(var(--gap) * 1.6);
+}
+
+#sysadmin .box-body {
+  padding-right: 0;
+  padding-top: 0;
+}
+
+/* --- fake corner */
+#sysadmin .box-header:before,
+#sysadmin .box-header:after {
+  content: "";
+  position: absolute;
+  width: var(--gap);
+  height: var(--gap);
+  inset: 0 auto auto 0;
+}
+
+#sysadmin .box-header:before {
+  background-color: var(--color-secondary);
+}
+
+#sysadmin .box-header:after {
+  background-color: var(--color-background);
+  border-radius: var(--radius50) 0 0 0;
+}
+
+/* --- danger area buttons */
+#sysadmin .box-warning {
+  padding: var(--gap25) var(--gap25);
+  margin-top: calc(var(--gap) * 2);
+  border: var(--border-width-thick) solid var(--color-supplement-01);
+  border-radius: var(--radius100);
+  transition:
+    border-color var(--transition-slow),
+    padding var(--transition-slow);
+}
+
+#sysadmin .box-warning:hover {
+  border-color: var(--color-quinternary);
+  padding: calc(var(--gap) * 1.5) var(--gap25);
+}
+
+@media (min-width: 768px) {
+  #sysadmin .box-warning {
+    border-left-width: var(--pie-chart-border-width);
+    text-align: right;
+  }
+
+  #sysadmin .box-warning::before {
+    content: "danger.area.74656";
+    display: flex;
+    align-items: flex-end;
+    width: calc(var(--gap) * 9);
+    min-height: calc(var(--gap) * 4);
+    background-color: var(--color-danger);
+    padding: var(--gap25) var(--gap75);
+    text-align: right;
+    position: absolute;
+    font-size: 1.2rem;
+    text-transform: uppercase;
+    color: var(--color-text-dark);
+    border-top: calc(var(--border-width) * 2) solid var(--color-background);
+    border-bottom: calc(var(--border-width) * 2) solid var(--color-background);
+    z-index: 1;
+    justify-content: flex-end;
+    inset: var(--gap) auto auto calc(var(--gap) * -9);
+    transition: background-color var(--transition-slow);
+  }
+
+  #sysadmin .box-warning:hover::before {
+    --pulse-color: #fff;
+    --pulse-color-background: var(--color-danger-bright);
+    animation: pulseBg 2s var(--transition-fast) infinite;
+  }
+}
+
+#sysadmin .box-warning::after {
+  content: "";
+  border: var(--border-width) solid var(--color-background);
+  border-radius: var(--radius75) 0 0 var(--radius75);
+  background-color: transparent;
+  position: absolute;
+  inset: calc(var(--gap25) * -1) calc(var(--gap25) * 32) calc(var(--gap25) * -1)
+    calc(var(--gap25) * -1);
+  z-index: 0;
+}
+
+@media (min-width: 768px) {
+  #sysadmin .box-warning::after {
+    inset: calc(var(--gap25) * -1) calc(var(--gap25) * 32) calc(var(--gap25) * -1)
+      calc(var(--gap25) * -10);
+  }
+}
+
+#sysadmin .box-warning .box-body {
+  padding: var(--gap) var(--gap);
+  z-index: 1;
+}
+
+#sysadmin .box-warning .box-body::after {
+  content: "";
+  width: calc(var(--gap) * 7);
+  font-size: 1rem;
+  color: var(--color-quinternary);
+  position: absolute;
+  inset: calc(var(--gap) * -1) var(--gap) auto auto;
+  transition: opacity var(--transition-slow);
+  opacity: 0;
+}
+
+#sysadmin .box-warning:hover .box-body::after {
+  opacity: 1;
+  animation: runningDots 1s steps(10, end) infinite alternate;
+}
+
+/* DNS (settings page)
+  ========================================================== */
+
+#dns {
+  margin-top: calc(var(--gap) * 2);
+}
+
+#dns .table {
+  margin-top: 0;
+}
+
+#dns .table th {
+  color: var(--color-primary-text);
+  padding-bottom: var(--gap);
+}
+
+#dns .table-bordered td[title] {
+  position: relative;
+}
+
+#dns .table-bordered td[title]:hover:before,
+#dns .table-bordered td[title]:hover:after {
+  opacity: 1;
+  translate: 0;
+}
+
+#dns .table-bordered td[title]:before,
+#dns .table-bordered td[title]:after {
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity var(--transition),
+    translate var(--transition);
+}
+
+/* --- lines */
+#dns .table-bordered td[title]:before {
+  content: "";
+  position: absolute;
+  inset: calc(var(--gap50) * -1) auto auto 0;
+  width: 100%;
+  height: 100%;
+  border-top: var(--border-width) solid var(--color-disabled);
+  border-left: calc(var(--border-width) * 2) solid var(--color-disabled);
+  border-radius: var(--radius50) 0 0 0;
+  translate: calc(var(--gap25) * -1) 0;
+}
+
+/* --- ip address */
+#dns .table-bordered td[title]:after {
+  content: attr(title);
+  position: absolute;
+  inset: calc(var(--gap25) * -1) auto auto var(--gap50);
+  font-size: 1rem;
+  color: var(--color-success);
+  translate: var(--gap25) 0;
+}
+
+/* --- UPSTREAM DNS SERVERS */
+#dns .row:first-child div:first-child .box {
+  border: var(--border-width) solid var(--color-disabled);
+  border-radius: 0 var(--radius100) var(--radius100) 0;
+  border-left: 0;
+}
+
+#dns .row:first-child div:nth-child(2) .box {
+  border: var(--border-width) solid var(--color-primary);
+  border-radius: var(--radius100) 0 0 var(--radius100);
+  border-right: 0;
+  padding-left: var(--gap);
+}
+
+@media (max-width: 1199px) {
+  #dns .row:first-child div:nth-child(2) .box {
+    margin-top: var(--gap50);
+  }
+}
+
+@media (min-width: 768px) {
+  #dns .row:first-child div:first-child .box {
+    border-right-width: calc(var(--border-panel-width) / 2);
+  }
+
+  #dns .row:first-child div:nth-child(2) .box {
+    border-left-width: calc(var(--border-panel-width) / 2);
+  }
+}
+
+/* --- fake corners */
+@media (min-width: 768px) {
+  #dns .row:first-child div:first-child .box:before,
+  #dns .row:first-child div:nth-child(2) .box:before {
+    content: "";
+    position: absolute;
+    background-color: var(--color-background);
+    border-radius: var(--radius50);
+    inset: 0 calc(var(--gap50) * -1) 0 auto;
+    width: var(--gap);
+    z-index: 1;
+  }
+
+  #dns .row:first-child div:nth-child(2) .box:before {
+    inset: 0 auto 0 calc(var(--gap50) * -1);
+  }
+}
+
+/* --- fake panel */
+@media (min-width: 768px) {
+  #dns .row:first-child div:first-child .box:after {
+    content: "UDS 498 691";
+    position: absolute;
+    inset: calc(var(--gap) * 2) calc(var(--gap) * -2) calc(var(--gap) * 10.5) auto;
+    background-color: var(--color-primary);
+    width: calc(var(--gap) * 2);
+    border-radius: 0 var(--radius50) var(--radius50) 0;
+    border: var(--border-width) solid black;
+    text-align: right;
+    font-size: 1rem;
+    padding: var(--gap) var(--gap25);
+    color: var(--color-text-dark);
+  }
+}
+
+/* --- SAFE/DANGER AREA */
+#dns .row:first-child div:nth-child(3) .box {
+  margin-top: var(--gap);
+}
+
+#dns .row:first-child div:nth-child(3) .box-body {
+  padding-right: 0;
+}
+
+.no-danger-area,
+.danger-area {
+  border-width: calc(var(--border-width) * 2);
+  border-style: double;
+  box-shadow: none;
+  margin-block: 0;
+  position: relative;
+}
+
+.no-danger-area h4,
+.danger-area h4 {
+  margin-top: var(--gap);
+  margin-bottom: calc(var(--gap) * 1.5);
+}
+
+/* --- top / bottom panel + text */
+.no-danger-area:before,
+.danger-area:before {
+  content: "panel-" attr(class);
+  height: calc(var(--border-width) * 8);
+  padding-left: var(--gap50);
+  position: absolute;
+  inset: auto 0 calc(var(--border-width) * -8) calc(var(--border-width) * -2);
+  background-color: var(--color-success-dark);
+  text-transform: uppercase;
+  color: var(--color-background);
+  font-size: 1rem;
+}
+
+.danger-area:before {
+  inset: calc(var(--border-width) * -8) 0 auto calc(var(--border-width) * -2);
+  background-color: var(--color-danger);
+}
+
+.no-danger-area:after,
+.danger-area:after {
+  content: "";
+  position: absolute;
+  width: var(--gap);
+  height: calc(var(--gap) + (var(--border-width) * 2));
+  background-color: var(--color-background);
+  bottom: calc(var(--gap) * -1);
+  right: calc(var(--gap) / -4);
+}
+
+.danger-area:after {
+  top: calc(var(--gap) * -1);
+  bottom: auto;
+}
+
+.no-danger-area h4:before,
+.danger-area h4:before {
+  content: "";
+  position: absolute;
+  inset: auto calc(var(--gap) * -0.25) calc(var(--border-width) * -8) auto;
+  width: var(--gap);
+  height: calc(var(--border-width) * 8);
+  background-color: var(--color-success-dark);
+  border-radius: 0 var(--radius100) var(--radius100) 0;
+  z-index: 1;
+}
+
+.danger-area h4:before {
+  inset: calc(var(--border-width) * -17 + 1px) calc(var(--gap) * -1.25) auto auto; /* 1px default padding compensation */
+  background-color: var(--color-danger);
+}
+
+/* --- "scanner" */
+.no-danger-area h4:after,
+.danger-area h4:after {
+  content: "";
+  background-image: repeating-linear-gradient(
+    to right,
+    var(--color-primary),
+    var(--color-primary) var(--border-width),
+    var(--color-background) var(--border-width),
+    var(--color-background)
+  );
+  background-size: var(--gap) var(--gap);
+  background-position: 0 0;
+  width: calc(var(--gap) * 10);
+  height: var(--gap50);
+  border-block: var(--border-width) solid var(--color-background);
+  position: absolute;
+  inset: auto var(--gap) calc(var(--gap) * -0.75) auto;
+  animation: topSmallScanner 1s linear infinite;
+}
+
+.danger-area h4:after {
+  inset: calc(var(--gap) * -1.8) 0 auto auto;
+}
+
+.no-danger-area + .danger-area {
+  margin-top: calc(var(--gap) * 2.5);
+}
+
+/* --- variants */
+.no-danger-area {
+  border-color: var(--color-success-dark);
+  border-bottom: 0;
+  border-radius: var(--radius100) var(--radius100) 0 0;
+}
+
+.no-danger-area h4 {
+  color: var(--color-success);
+}
+
+.danger-area {
+  border-color: var(--color-danger);
+  border-top: 0;
+  border-radius: 0 0 var(--radius100) var(--radius100);
+}
+
+.danger-area h4 {
+  color: var(--color-danger-bright);
+  position: relative;
+}
+
+/* --- headers + lcars panels (advanced settings, privacy)  */
+#dns form > .row:nth-child(2) h4,
+#privacy .box-header h3,
+#web > .row > div:first-child .box-header h3 {
+  color: var(--color-danger-bright);
+  padding-left: var(--gap);
+  padding-top: var(--gap25);
+  margin-top: calc(var(--gap) * 2);
+  margin-bottom: 0;
+  border: var(--border-width) solid var(--color-primary);
+  border-radius: var(--radius100) 0 0 0;
+  border-bottom: 0;
+  border-right: 0;
+  position: relative;
+}
+
+@media (min-width: 768px) {
+  #dns form > .row:nth-child(2) h4::before,
+  #dns form > .row:nth-child(2) h4::after,
+  #privacy .box-header h3::before,
+  #privacy .box-header h3::after,
+  #web > .row > div:first-child .box-header h3::before,
+  #web > .row > div:first-child .box-header h3::after {
+    content: "";
+    position: absolute;
+    inset: 0 auto auto 0;
+    width: var(--gap);
+    height: var(--gap);
+    background-color: hotpink;
+  }
+
+  #dns form > .row:nth-child(2) h4::before,
+  #privacy .box-header h3::before,
+  #web > .row > div:first-child .box-header h3::before {
+    background-color: var(--color-primary);
+  }
+
+  #dns form > .row:nth-child(2) h4::after,
+  #privacy .box-header h3::after,
+  #web > .row > div:first-child .box-header h3::after {
+    background-color: var(--color-background);
+    border-radius: var(--radius50) 0 0 0;
+  }
+}
+
+#dns form > .row:nth-child(2) h4 ~ p,
+#privacy .box-body,
+#web > .row > div:first-child .box-body {
+  margin-top: 0;
+  padding-top: var(--gap);
+  padding-left: var(--gap);
+}
+
+#dns form > .row:nth-child(2) h4:nth-of-type(1) ~ p:nth-of-type(1),
+#dns form > .row:nth-child(2) h4:nth-of-type(1) ~ p:nth-of-type(2),
+#dns form > .row:nth-child(2) h4:nth-of-type(1) ~ p:nth-of-type(3),
+#dns form > .row:nth-child(2) h4:nth-of-type(2) ~ p:nth-of-type(4),
+#dns form > .row:nth-child(2) h4:nth-of-type(2) ~ p:nth-of-type(5),
+#dns form > .row:nth-child(2) h4:nth-of-type(2) ~ p:nth-of-type(6),
+#dns form > .row:nth-child(2) h4:nth-of-type(2) ~ p:nth-of-type(7),
+#dns form > .row:nth-child(2) h4:nth-of-type(2) ~ p:nth-of-type(8),
+#dns form > .row:nth-child(2) .form-group,
+#privacy .box-header h3,
+#privacy .box-body,
+#web > .row > div:first-child .box-header h3,
+#web > .row > div:first-child .box-body {
+  border-left: var(--border-width) solid var(--color-primary);
+}
+
+#dns form > .row:nth-child(2) h4:nth-of-type(1) ~ p:nth-of-type(3) {
+  border-bottom: var(--border-width) solid var(--color-primary);
+  padding-bottom: var(--gap50);
+}
+
+@media (min-width: 768px) {
+  #dns form > .row:nth-child(2) h4,
+  #dns form > .row:nth-child(2) h4:nth-of-type(1) ~ p:nth-of-type(1),
+  #dns form > .row:nth-child(2) h4:nth-of-type(1) ~ p:nth-of-type(2),
+  #dns form > .row:nth-child(2) h4:nth-of-type(1) ~ p:nth-of-type(3),
+  #dns form > .row:nth-child(2) h4:nth-of-type(2) ~ p:nth-of-type(4),
+  #dns form > .row:nth-child(2) h4:nth-of-type(2) ~ p:nth-of-type(5),
+  #dns form > .row:nth-child(2) h4:nth-of-type(2) ~ p:nth-of-type(6),
+  #dns form > .row:nth-child(2) h4:nth-of-type(2) ~ p:nth-of-type(7),
+  #dns form > .row:nth-child(2) h4:nth-of-type(2) ~ p:nth-of-type(8),
+  #dns form > .row:nth-child(2) .form-group,
+  #privacy .box-header h3,
+  #privacy .box-body,
+  #web > .row > div:first-child .box-header h3,
+  #web > .row > div:first-child .box-body {
+    border-left-width: calc(var(--border-panel-width) / 2);
+  }
+}
+
+#dns form > .row:nth-child(2) .form-group {
+  margin-top: calc(var(--border-width) * 2);
+  margin-bottom: 0;
+  padding: var(--gap50) 0 var(--gap50) var(--gap);
+  border-color: var(--color-disabled);
+  border-bottom: var(--border-width) solid var(--color-disabled);
+}
+
+#dns form > .row:nth-child(2) .form-group .input-group {
+  display: block;
+}
+
+#dns .col-lg-12 > .icheck-primary + br,
+#dns .col-lg-12 > p + br {
+  display: none;
+}
+
+#privacy .box-header,
+#web > .row > div:first-child .box-header {
+  padding: 0;
+}
+
+#privacy .box-header h3,
+#web > .row > div:first-child .box-header h3 {
+  display: block;
+}
+
+/* Double border text areas
+  ========================================================== */
+
+#dns p,
+#dns .icheck-primary,
+#all-queries_wrapper ~ p,
+#web > .row > div:nth-child(2) .box {
+  font-weight: 100;
+  line-height: 1.5;
+  letter-spacing: 0.015rem;
+  margin-top: var(--gap);
+  margin-bottom: 0;
+}
+
+#dns .table + p,
+#dns .col-lg-12 > .icheck-primary,
+#all-queries_wrapper ~ p,
+#all-queries_wrapper ~ p + ul,
+#web > .row > div:nth-child(2) .box {
+  padding: var(--gap);
+  border: calc(var(--border-width) * 2) double var(--color-disabled);
+  border-radius: var(--radius100);
+}
+
+#all-queries_wrapper ~ p + p {
+  border-bottom: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+#all-queries_wrapper ~ p + ul {
+  border-top: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  padding-left: calc(var(--gap) * 2);
+}
+
+#web > .row > div:nth-child(2) .box {
+  margin-top: calc(var(--gap) * 2);
+}
+
+@media (min-width: 992px) {
+  #web > .row > div:nth-child(2) .box {
+    border-left: 0;
+    border-radius: 0 var(--radius100) var(--radius100) 0;
+  }
+}
+
+#web > .row > div:nth-child(2) .box-body {
+  padding: 0;
+}
+
+/* --- notification "dot" */
+.warning-count {
+  background-color: var(--color-danger);
+  border-radius: 0;
+  font-size: 1rem;
+  border: var(--border-width) solid var(--color-background);
+}
+
+#top-warning-count {
+  top: calc(var(--gap) * 1.05);
+  right: calc(var(--gap) * 3);
+  left: auto;
+}
+
+.sidebar-menu .warning-count {
+  height: auto;
+  margin: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-block: 0;
+}
+
+.sidebar-menu .treeview-menu li > a > .warning-count {
+  right: calc(var(--gap) * 2.5 - var(--border-width));
+  top: 0;
+  margin: 0;
+}
+
+/* DATEPICKER
+  ========================================================== */
+
+.daterangepicker {
+  background-color: var(--color-background);
+  padding: calc(var(--gap) * 1.5) var(--gap);
+  border: var(--border-width) solid var(--color-primary);
+  border-right: 0;
+  border-left-width: var(--border-panel-width);
+  border-radius: var(--radius100) 0 0 var(--radius100);
+  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 80%);
+}
+
+.daterangepicker[style*="display: block"] {
+  display: flex !important;
+  flex-direction: column;
+  align-items: center;
+  max-width: calc(var(--gap) * 60);
+  translate: 0 calc(var(--gap) * -3.5);
+}
+
+@media (min-width: 992px) {
+  .daterangepicker[style*="display: block"] {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    padding-block: calc(var(--gap) * 2.5);
+    padding-right: 0;
+  }
+}
+
+.daterangepicker.openscenter::before,
+.daterangepicker.openscenter::after {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .daterangepicker.openscenter::after {
+    display: block;
+    position: absolute;
+    inset: 0 auto 0 calc(var(--gap) * -1);
+    width: var(--gap);
+    border: 0;
+    background: var(--color-background);
+    border-radius: var(--radius50) 0 0 var(--radius50);
+  }
+
+  .daterangepicker.openscenter::before {
+    content: "DTPCKR_36525";
+    border: calc(var(--border-width) * 2) solid var(--color-background);
+    inset: 10% auto 10% calc(var(--border-panel-width) * -1);
+    width: calc(var(--border-panel-width) - var(--gap));
+    background-color: var(--color-quinternary);
+    border-inline: 0;
+    text-transform: uppercase;
+    font-size: 1rem;
+    color: var(--color-text-dark);
+    padding: var(--gap25) var(--gap25);
+    text-align: right;
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+  }
+}
+
+.daterangepicker .ranges {
+  min-width: calc(var(--gap) * 13);
+}
+
+@media (min-width: 992px) {
+  .daterangepicker .ranges {
+    flex: 0 0 20%;
+    padding-right: var(--gap);
+    min-width: calc(var(--gap) * 10);
+  }
+}
+
+.daterangepicker .ranges ul {
+  width: auto;
+}
+
+.daterangepicker .ranges li {
+  font-size: 1.5rem;
+  padding: calc(var(--gap) / 2) var(--gap);
+  text-transform: uppercase;
+  position: relative;
+}
+
+.daterangepicker .ranges li:hover {
+  background-color: transparent;
+  color: var(--color-link);
+}
+
+.daterangepicker .ranges li.active {
+  border-radius: var(--radius100);
+  background-color: var(--color-link);
+  color: var(--color-text-dark);
+}
+
+.daterangepicker .ranges li:before {
+  background-color: rgb(0 0 0 / 40%);
+  width: calc(var(--gap) * 2);
+  content: "";
+  position: absolute;
+  inset: 0 0 0 auto;
+  opacity: 0;
+  transition: opacity var(--transition);
+  border-left: calc(var(--border-width) * 2) solid var(--color-background);
+}
+
+.daterangepicker .ranges li.active:before {
+  opacity: 1;
+}
+
+.daterangepicker.show-ranges.ltr .drp-calendar {
+  --_dtpckr-border: var(--border-width) solid var(--color-primary);
+  border: var(--_dtpckr-border);
+  margin-left: calc(var(--gap) * -1);
+  padding: var(--gap) var(--gap50) var(--gap50) var(--gap50);
+}
+
+.daterangepicker.show-ranges.ltr .drp-calendar.left::after,
+.daterangepicker.show-ranges.ltr .drp-calendar.right::after {
+  display: none;
+  content: "MTH-PNL_31";
+  text-transform: uppercase;
+  color: var(--color-secondary);
+  position: absolute;
+  inset: 0 var(--gap25) auto auto;
+  font-size: 1rem;
+}
+
+@media (max-width: 991px) {
+  .daterangepicker.show-ranges.ltr .drp-calendar.left {
+    border-bottom: 0;
+    border-left: var(--_dtpckr-border); /* rewrite for datepicker.min.css */
+    border-radius: var(--radius50) var(--radius50) 0 0;
+    position: relative;
+    margin-top: var(--gap);
+  }
+
+  .daterangepicker.show-ranges.ltr .drp-calendar.left::after {
+    display: block;
+  }
+
+  .daterangepicker.show-ranges.ltr .drp-calendar.right {
+    border-top: 0;
+    border-radius: 0 0 var(--radius50) var(--radius50);
+  }
+}
+
+@media (min-width: 992px) {
+  .daterangepicker.show-ranges.ltr .drp-calendar.left,
+  .daterangepicker.show-ranges.ltr .drp-calendar.right {
+    flex: 1 0 40%;
+    margin-left: 0;
+    position: relative;
+    max-width: none;
+    margin-top: var(--gap);
+    padding-top: calc(var(--gap) * 1.5);
+    padding-bottom: var(--gap);
+  }
+
+  .daterangepicker.show-ranges.ltr .drp-calendar.left {
+    border-block: var(--_dtpckr-border);
+    border-inline: 0;
+  }
+
+  .daterangepicker.show-ranges.ltr .drp-calendar.right {
+    border: var(--_dtpckr-border);
+    border-left: 0;
+    border-radius: 0 vaR(--radius100) var(--radius100) 0;
+  }
+
+  .daterangepicker.show-ranges.ltr .drp-calendar.right::after {
+    display: block;
+    right: var(--gap75);
+  }
+}
+
+.daterangepicker .prev.available,
+.daterangepicker .next.available {
+  background-color: var(--color-secondary);
+  padding: 0;
+}
+
+.daterangepicker .prev.available {
+  border-radius: var(--radius100) 0 0 0;
+}
+
+.daterangepicker .next.available {
+  border-radius: 0 var(--radius100) 0 0;
+}
+
+/* --- "arrows" */
+.daterangepicker .prev.available span,
+.daterangepicker .next.available span {
+  padding: 0;
+  border: 6px solid transparent;
+  transform: rotate(0);
+}
+
+.daterangepicker .prev.available span {
+  border-right-color: var(--color-background);
+  translate: -3px 0;
+}
+
+.daterangepicker .next.available span {
+  border-left-color: var(--color-background);
+  translate: 3px 0;
+}
+
+.daterangepicker .calendar-table td,
+.daterangepicker .calendar-table th {
+  border-radius: 0;
+}
+
+@media (min-width: 992px) {
+  .daterangepicker .calendar-table td,
+  .daterangepicker .calendar-table th {
+    min-width: var(--gap);
+    width: var(--gap);
+    font-size: 1.5rem;
+    border: 0;
+  }
+}
+
+.daterangepicker th.month {
+  padding: 0;
+}
+
+.daterangepicker.show-ranges .left tr:first-child th.month + th,
+.daterangepicker.show-ranges .right tr:first-child th:first-child {
+  padding-block: 0;
+  background: var(--color-supplement-02);
+  border-radius: 0 var(--radius100) 0 0;
+}
+
+.daterangepicker.show-ranges .right tr:first-child th:first-child {
+  border-radius: var(--radius100) 0 0 0;
+}
+
+.daterangepicker .drp-calendar tr:nth-child(2) th {
+  background-color: var(--color-disabled);
+  text-transform: uppercase;
+}
+
+.daterangepicker .calendar-table {
+  background-color: transparent;
+  border: 0;
+}
+
+.daterangepicker .calendar-table table {
+  border-spacing: calc(var(--gap) / 8);
+  border-collapse: separate;
+}
+
+.daterangepicker .left .calendar-time {
+  position: relative;
+}
+
+@media (min-width: 576px) {
+  .daterangepicker .calendar-table table {
+    border-spacing: calc(var(--gap) / 4);
+  }
+}
+
+.daterangepicker .drp-buttons {
+  border-top: 0;
+}
+
+.daterangepicker.show-calendar .drp-buttons {
+  display: inline-flex;
+  align-items: center;
+  flex-direction: column;
+  gap: var(--gap);
+}
+
+@media (min-width: 992px) {
+  .daterangepicker .drp-buttons {
+    margin-left: 20%;
+    padding-bottom: var(--gap);
+    flex-grow: 1;
+    position: relative;
+  }
+
+  .daterangepicker.show-calendar .drp-buttons {
+    flex-direction: row;
+    align-items: stretch;
+  }
+}
+
+.daterangepicker .drp-buttons .btn {
+  padding: var(--gap) var(--gap) var(--gap50) var(--gap);
+  margin-left: 0;
+}
+
+.daterangepicker .drp-selected {
+  font-size: 1.6rem;
+  line-height: 1.5;
+  color: var(--color-danger-bright);
+}
+
+@media (max-width: 991px) {
+  .daterangepicker .drp-selected {
+    padding-right: 0;
+    text-align: center;
+  }
+}
+
+@media (min-width: 992px) {
+  .daterangepicker .drp-selected {
+    flex-grow: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}
+
+.daterangepicker select.yearselect,
+.daterangepicker select.monthselect,
+.daterangepicker select.hourselect,
+.daterangepicker select.minuteselect {
+  font-size: 1.5rem;
+  padding: var(--gap25) var(--gap50);
+  min-width: calc(var(--gap) * 4.5);
+}
+
+.daterangepicker td {
+  transition: background-color var(--transition);
+}
+
+.daterangepicker td.off,
+.daterangepicker td.off.end-date,
+.daterangepicker td.off.in-range,
+.daterangepicker td.off.start-date {
+  background-color: var(--color-supplement-02);
+}
+
+.daterangepicker td.active,
+.daterangepicker td.active:hover,
+.daterangepicker td.active.end-date {
+  background-color: var(--color-danger-bright);
+  color: var(--color-text-dark);
+}
+
+.daterangepicker td.active {
+  border-radius: var(--radius100) 0 0 var(--radius100);
+}
+
+.daterangepicker td.active.end-date {
+  border-radius: 0 var(--radius100) var(--radius100) 0;
+}
+
+.daterangepicker td.in-range {
+  background-color: var(--color-danger);
+}
+
+.daterangepicker td.available:hover,
+.daterangepicker th.available:hover {
+  background-color: var(--color-primary);
+  color: var(--color-text-dark);
+}
+
+/* DOMAIN MANAGEMENT
+  ========================================================== */
+
+#add-group .nav-tabs-custom + div {
+  border-top: calc(var(--border-width) * 2) double var(--color-background);
+  background-color: var(--color-disabled);
+  padding: var(--gap) var(--gap) var(--gap) var(--gap);
+  margin-top: var(--gap);
+}
+
+#add-group .nav-tabs-custom + div strong {
+  margin-bottom: var(--gap);
+  color: var(--color-tertiary-hover);
+  text-transform: uppercase;
+}
+
+#add-group .btn-toolbar {
+  float: none !important;
+  display: flex;
+  justify-content: flex-end;
+  margin: 0;
+  border: 0;
+}
+
+#add-group .btn-toolbar #add2black {
+  background-color: var(--color-quinternary); /* adjusted color for better readability */
+}
+
+#domains-list {
+  margin-top: calc(var(--gap) * 2);
+}
+
+.filter_types span {
+  width: auto;
+  min-width: calc(var(--gap) * 7.5);
+}
+
+/* MODAL (currently only "custom disable timeout"?)
+  ========================================================== */
+
+div.modal {
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+@media (min-width: 768px) {
+  div.modal-sm {
+    width: 100%;
+    max-width: calc(var(--gap) * 30);
+  }
+}
+
+div.modal-content {
+  --_modal-border-color: var(--color-primary); /* ready for variants */
+  display: flex;
+  flex-direction: column;
+  padding: calc(var(--gap) * 1.5) calc(var(--gap) * 1.5) var(--gap) var(--gap50);
+  border-radius: var(--radius100) var(--radius100) var(--radius100) 0;
+  background-color: var(--color-background);
+  border: var(--border-width) solid var(--_modal-border-color);
+  border-width: calc(var(--border-width) * 2) calc(var(--border-width) * 2)
+    calc(var(--border-width) * 28) calc(var(--border-width) * 14);
+}
+
+div.modal-content > div {
+  z-index: 1;
+}
+
+/* --- fake corners + horizontal lines */
+div.modal-content::before,
+div.modal-content::after {
+  content: "";
+  position: absolute;
+  z-index: 0;
+}
+
+div.modal-content::before {
+  background-color: var(--color-background);
+  inset: 0 0 calc(var(--gap) * -1) calc(var(--gap) * -1);
+  border-radius: var(--radius75) var(--radius75) var(--radius75) 0;
+}
+
+div.modal-content::after {
+  inset: calc(var(--gap) * 3) calc(var(--gap) * -0.25) 0 calc(var(--gap) * -1.75);
+  border-block: calc(var(--border-width) * 2) solid var(--color-background);
+}
+
+div.modal-header {
+  padding: 0;
+  border: 0;
+  color: var(--color-danger-bright);
+  font-size: 2.25rem;
+  font-weight: var(--font-regular);
+  position: relative;
+}
+
+/* --- top lcars line */
+div.modal-header::before {
+  content: "";
+  position: absolute;
+  background-color: var(--color-quinternary);
+  inset: calc(var(--gap) * -2) calc(var(--gap) * 5) auto 0;
+  border: calc(var(--border-width) * 2) solid var(--color-background);
+  display: block;
+  height: var(--gap75);
+}
+
+div.modal-title {
+  border-top: calc(var(--border-width) * 2) solid var(--color-primary);
+}
+
+/* --- close button */
+div.modal-header .close {
+  margin-top: 0;
+  width: calc(var(--gap) * 4);
+  height: calc(var(--gap) * 2);
+  opacity: 1;
+  border: var(--border-width) solid var(--_modal-border-color);
+  border-top: 0;
+  border-right: 0;
+  border-radius: 0 0 0 var(--radius75);
+  color: var(--color-danger);
+  font-size: 1.25rem;
+  text-shadow: none;
+  transition: color var(--transition-fast);
+  position: absolute;
+  inset: calc(var(--gap) * -1.5) calc(var(--gap) * -1.5) auto auto;
+}
+
+div.modal-header .close:hover {
+  color: #fff;
+}
+
+div.modal-header .close::before {
+  content: attr(aria-label);
+  text-transform: uppercase;
+}
+
+div.modal-header .close span {
+  display: none;
+}
+
+div.modal-body {
+  padding: 0;
+  margin-top: calc(var(--gap) * 2);
+}
+
+div.modal-footer {
+  border: 0;
+  padding: 0;
+  margin-top: calc(var(--gap) * 2);
+  position: relative;
+}
+
+/* --- bottom numbers and pattern */
+div.modal-footer::before,
+div.modal-footer::after {
+  display: block;
+  position: absolute;
+}
+
+div.modal-footer::before {
+  background-color: var(--color-background);
+  content: "365•24•60";
+  inset: auto auto calc(var(--gap) * -4.5) calc(var(--gap) * -2.25);
+  font-size: 2.25rem;
+  height: calc(var(--gap) * 2.5);
+  overflow: hidden;
+  color: var(--color-supplement-01);
+  padding-left: var(--gap25);
+  padding-right: var(--gap50);
+  border: calc(var(--border-width) * 2) solid var(--_modal-border-color);
+  border-left: 0;
+}
+
+div.modal-footer::after {
+  content: "╿╿╽╿╿╿╿╿╿╿╿╽╽╿╿╿";
+  inset: auto auto calc(var(--gap) * -4) calc(var(--gap) * 4);
+  color: var(--color-text-dark);
+  font-size: 2rem;
+  letter-spacing: calc(var(--gap25) * -1);
+}
+
+input[id="customTimeout"] {
+  border-radius: var(--radius100) 0 0 var(--radius100);
+}
+
+input[id="customTimeout"] + .input-group-btn label.btn-default {
+  background-color: var(--color-primary);
+}
+
+input[id="customTimeout"] + .input-group-btn label.active {
+  outline: 0;
+  background-color: var(--color-danger-bright);
+}
+
+input[id="customTimeout"] + .input-group-btn label.active:hover {
+  background-color: var(--color-danger);
+}
+
+/* COLORS FOR GRAPHS, TABLES, ETC.
+  ========================================================== */
+
+.not-used {
+  background-color: var(--color-supplement-02);
+}
+
+.not-used:hover {
+  background-color: var(--color-disabled);
+}
+
+.used {
+  background-color: #fff;
+}
+
+.used:hover {
+  background-color: var(--color-tertiary-hover);
+}
+
+.graphs-grid {
+  background-color: var(--color-supplement-01);
+}
+
+.graphs-ticks {
+  color: var(--color-tertiary-hover);
+}
+
+.progress-bar {
+  background-color: var(--color-danger-bright);
+}
+
+.queries-permitted {
+  background-color: var(--color-success);
+}
+
+.queries-blocked {
+  background-color: var(--color-danger);
+}
+
+/*--- Query Log table */
+.text-black {
+  color: var(--color-background) !important;
+}
+
+.text-green-light {
+  color: var(--color-tertiary-hover) !important;
+}
+
+.text-green {
+  color: var(--color-success) !important;
+}
+
+.text-orange {
+  color: var(--color-danger) !important;
+}
+
+.text-red {
+  color: var(--color-red-alert) !important;
+}
+
+.text-vivid-blue {
+  color: var(--color-quinternary) !important;
+}
+
+/*** Network table colors ***/
+.network-never {
+  background-color: var(--color-background);
+}
+
+.network-recent {
+  background-color: var(--color-quaternary);
+}
+
+.network-old {
+  background-color: var(--color-supplement-01);
+}
+
+.network-older {
+  background-color: var(--color-disabled);
+}
+
+.network-gradient {
+  background-image: linear-gradient(
+    to right,
+    var(--color-quaternary) 0%,
+    var(--color-supplement-01) 100%
+  );
+}
+
+/* TABLES
+  ========================================================== */
+
+.table tr th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > th {
+  width: auto !important;
+  color: #fff;
+  padding: var(--gap50) var(--gap25);
+}
+
+.table tr td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td,
+.table > thead > tr > td {
+  padding: var(--gap50) var(--gap25);
+  font-size: 1.6rem;
+  font-weight: var(--font-regular);
+  text-transform: none;
+}
+
+table.dataTable {
+  margin: var(--gap) 0 !important;
+}
+
+.table.table-bordered.dataTable > tbody > tr + tr > td {
+  border-top: var(--gap25) solid var(--color-text-dark) !important;
+}
+
+.table.table-bordered.dataTable > tbody > tr > td {
+  vertical-align: middle;
+}
+
+table.dataTable thead .sorting::before {
+  content: "\25B3";
+  position: absolute;
+  bottom: var(--gap);
+  right: var(--gap50);
+  display: block;
+  font-family: "Glyphicons Halflings", sans-serif;
+  opacity: 0.3;
+  font-size: 0.6em;
+}
+
+table.dataTable thead .sorting:after,
+table.dataTable thead .sorting_asc:after,
+table.dataTable thead .sorting_desc:after,
+table.dataTable thead .sorting_asc_disabled:after,
+table.dataTable thead .sorting_desc_disabled:after {
+  opacity: 0.6;
+}
+
+table.dataTable thead .sorting:after {
+  opacity: 0.3;
+  content: "\25BD";
+  font-size: 0.6em;
+}
+
+table.dataTable thead .sorting_asc::after {
+  content: "\25B2";
+}
+
+table.dataTable thead .sorting_desc::after {
+  content: "\25BC";
+}
+
+table.dataTable thead .sorting_asc_disabled:after,
+table.dataTable thead .sorting_desc_disabled:after {
+  color: #eee;
+}
+
+.table-responsive {
+  border: 0;
+}
+
+.table-bordered {
+  border: 0;
+  margin-bottom: 0;
+  margin-top: calc(var(--gap) * 2);
+  border-top: var(--border-width) solid var(--color-disabled);
+  border-bottom: var(--border-width) solid var(--color-disabled);
+}
+
+.table-bordered > thead > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > tbody > tr > td {
+  border: 0;
+}
+
+.table-bordered > thead > tr > th,
+.table-bordered > tfoot > tr > th {
+  text-transform: uppercase;
+  font-weight: var(--font-regular);
+  background-color: var(--table-color);
+  color: var(--color-text-dark);
+}
+
+.table-bordered > thead > tr > th:last-child {
+  border-radius: 0 calc(var(--radius100) * 1.25) calc(var(--radius100) * 1.25) 0;
+}
+
+.table-bordered > tbody > tr > td {
+  text-transform: uppercase;
+  font-size: 1.4rem;
+  vertical-align: middle;
+}
+
+.table-bordered:not(#network-entries) > tbody > tr > td:first-child a {
+  display: block;
+  background-color: var(--color-disabled);
+  padding: var(--gap25) var(--gap50) var(--gap25) var(--gap);
+  position: relative;
+  transition: background-color var(--transition-fast);
+  white-space: normal;
+  word-break: break-all;
+  text-overflow: ellipsis;
+}
+
+.table-bordered > tbody > tr > td:first-child a:hover {
+  background-color: var(--table-color);
+  color: var(--color-tertiary-hover);
+}
+
+.table-bordered:not(#network-entries) > tbody > tr > td:first-child a:before,
+.table-bordered:not(#network-entries) > tbody > tr > td:first-child a:after {
+  content: "";
+  position: absolute;
+  inset: calc(var(--border-width) * -4) auto calc(var(--border-width) * -4) calc(var(--gap) * -0.75);
+  width: var(--gap50);
+  background-color: var(--color-background);
+  z-index: 5;
+}
+
+.table-bordered:not(#network-entries) > tbody > tr > td:first-child a:after {
+  inset: 0 auto 0 calc(var(--gap) * -0.75);
+  background-color: var(--table-color);
+}
+
+.table-bordered:not(#network-entries) > tbody > tr > td:first-child a:hover:after {
+  background-color: var(--color-secondary-hover);
+}
+
+.table-bordered > thead > tr > th:last-child,
+.table-bordered > thead > tr > td:last-child,
+.table-bordered > tbody > tr > td:last-child,
+.table-bordered > tfoot > tr > td {
+  border: 0;
+}
+
+.table-bordered > tfoot > tr > td {
+  background-color: var(--color-supplement-02);
+  vertical-align: middle;
+}
+
+.table-striped > tbody > tr:nth-of-type(odd),
+.table-striped > tbody > tr:nth-of-type(2n + 1) {
+  background-color: var(--color-background);
+}
+
+.allowed-row td:last-child,
+.blocked-row td:last-child {
+  background-color: transparent;
+}
+
+.blocked-row td {
+  background-color: var(--color-danger);
+  color: #fff;
+}
+
+.blocked-row td:last-child {
+  background-color: transparent;
+}
+
+.blocked-row td:nth-child(5) span {
+  color: #fff !important;
+  position: relative;
+  padding-left: calc(var(--gap) * 2.5);
+}
+
+.blocked-row td:nth-child(5) span::before {
+  content: "⚠";
+  position: absolute;
+  inset: calc(var(--gap) * -1) auto calc(var(--gap) * -1) 0;
+  width: calc(var(--gap) * 2);
+  background-color: var(--color-background);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  font-size: 1.8rem;
+  color: var(--color-danger);
+  border-left: calc(var(--border-width) * 2) solid var(--color-danger-bright);
+  border-right: calc(var(--border-width) * 2) solid var(--color-danger-bright);
+  --pulse-font-color-02: var(--color-red-alert);
+  --pulse-font-color-01: #fff;
+  animation: pulseFont var(--transition-slow) infinite;
+}
+
+#all-queries {
+  margin-bottom: calc(var(--gap) * 2) !important;
+}
+
+#all-queries td:nth-of-type(3) {
+  font-family: var(--font-family-mono);
+  font-weight: var(--font-light);
+  color: var(--color-success);
+  text-transform: none;
+}
+
+@media (max-width: 660px), (min-width: 767px) and (max-width: 960px) {
+  /* --- Group tables */
+  #groupsTable thead,
+  #clientsTable thead,
+  #adlistsTable thead {
+    display: none;
+  }
+
+  #groupsTable tr,
+  #clientsTable tr,
+  #adlistsTable tr {
+    display: flex;
+    flex-wrap: wrap;
+    padding-block: var(--gap25);
+    margin-block: var(--gap50);
+    border: var(--border-width) solid var(--color-disabled);
+    border-radius: var(--gap50);
+  }
+
+  #groupsTable tr td:nth-child(1),
+  #groupsTable tr td:nth-child(3) {
+    order: 0;
+    flex-grow: 1;
+    text-align: right;
+  }
+
+  #groupsTable tr td:nth-child(2) {
+    padding-left: var(--gap25);
+    width: 100%;
+    order: 1;
+  }
+
+  #groupsTable tr td:nth-child(4) {
+    width: 100%;
+    order: 2;
+  }
+
+  #groupsTable .btn-danger {
+    height: calc(var(--gap) * 2.15);
+  }
+
+  #clientsTable .btn-danger {
+    height: calc(var(--gap) * 2.3);
+  }
+
+  #clientsTable td:last-child,
+  #adlistsTable td:last-child,
+  #adlistsTable td:nth-child(5) {
+    flex-grow: 1;
+  }
+
+  #adlistsTable td:nth-child(3) {
+    width: 100%;
+  }
+
+  #domainsTable td:nth-child(1),
+  #domainsTable td:nth-child(2) {
+    border-bottom: 0;
+  }
+
+  #domainsTable td:nth-child(2) {
+    padding-bottom: var(--gap25);
+  }
+
+  #domainsTable td:nth-last-child(3) {
+    text-align: left;
+    width: 100%;
+  }
+
+  #domainsTable td:nth-last-child(2) {
+    text-align: left;
+  }
+
+  #domainsTable td:last-child {
+    width: calc(var(--gap) * 6);
+    order: 6;
+    padding-bottom: var(--gap25);
+    border-bottom: 0;
+    margin-bottom: 0;
+    flex-grow: 0;
+  }
+
+  #domainsTable tr.selected td.select-checkbox::after,
+  #domainsTable tr.selected th.select-checkbox::after {
+    transform: translate(0);
+  }
+}
+
+table.dataTable thead .sorting:after,
+table.dataTable thead .sorting_asc:after,
+table.dataTable thead .sorting_desc:after,
+table.dataTable thead .sorting_asc_disabled:after,
+table.dataTable thead .sorting_desc_disabled:after,
+table.dataTable thead .sorting::before {
+  color: var(--color-link);
+}
+
+.dataTables_wrapper table.dataTable th {
+  color: var(--color-tertiary-hover);
+}
+
+table[id="network-entries"] td:first-child a {
+  background-color: var(--color-background);
+  color: var(--color-success);
+  font-family: var(--font-family-mono);
+  display: inline-block;
+  font-size: 1.2rem;
+  padding: var(--gap25) var(--gap50);
+  border-radius: var(--radius100);
+  line-height: 1.2;
+}
+
+table[id="network-entries"] tbody td:first-child a:hover {
+  background-color: var(--color-background);
+  color: #fff;
+}
+
+table[id="network-entries"] td:nth-child(4) a:not(:hover) {
+  color: #fff;
+}
+
+/* --- progress bar in the dashboard tables (frequency) */
+.progress {
+  border: calc(var(--border-width) * 2) solid var(--color-secondary);
+  border-bottom: 0;
+  padding: var(--gap25);
+  background: var(--color-background);
+  border-radius: 0;
+  margin: var(--gap25) !important;
+  flex-grow: 1;
+}
+
+.progress-sm {
+  height: var(--gap);
+}
+
+.progress-sm .progress-bar {
+  border-radius: 0;
+  background-color: var(--color-secondary-hover);
+}
+
+#ad-frequency .progress-bar,
+#client-frequency-blocked .progress-bar {
+  background-color: var(--color-danger);
+}
+
+#domain-frequency .table-responsive,
+#ad-frequency .table-responsive,
+#client-frequency .table-responsive,
+#client-frequency-blocked .table-responsive {
+  overflow: visible;
+}
+
+#domain-frequency .table-responsive .table-bordered,
+#ad-frequency .table-responsive .table-bordered,
+#client-frequency .table-responsive .table-bordered,
+#client-frequency-blocked .table-responsive .table-bordered {
+  border: 0;
+}
+
+/* --- table "processing..." loader */
+.content div.dataTables_wrapper div.dataTables_processing {
+  background-color: var(--color-disabled);
+  border-color: var(--color-disabled);
+  padding: var(--gap) 0;
+  border-radius: var(--radius100);
+}
+
+/* --- Table selected rows + checkboxes */
+table.dataTable tbody > tr.selected,
+table.dataTable tbody > tr > .selected,
+table.dataTable tbody > tr:hover {
+  background-image: none;
+  background-color: var(--color-supplement-02);
+}
+
+table.dataTable tbody td.select-checkbox,
+table.dataTable tbody th.select-checkbox {
+  min-width: var(--gap);
+}
+
+table.dataTable tbody td.select-checkbox + td,
+table.dataTable tbody th.select-checkbox + th {
+  padding-left: var(--gap);
+}
+
+table.dataTable tbody .dropdown {
+  min-width: calc(var(--gap) * 9);
+}
+
+table.dataTable tbody .dropdown .btn-default {
+  background-color: var(--color-link);
+  color: var(--color-text-dark);
+  border-radius: calc(var(--radius100) * 1.5) 0 0 calc(var(--radius100) * 1.5);
+}
+
+table.dataTable tbody .dropdown .btn-default:hover,
+table.dataTable tbody .dropdown .btn-default:focus-within {
+  color: var(--color-text-dark);
+  background-color: var(--color-tertiary-hover);
+}
+
+table.dataTable .btn-xs {
+  padding: calc(var(--gap50) + var(--border-width)) calc(var(--gap) + var(--border-width));
+  border-radius: 0 calc(var(--radius100) * 1.5) calc(var(--radius100) * 1.5) 0;
+  min-width: calc(var(--gap) * 5);
+}
+
+table.dataTable .btn-xs.btn-danger {
+  background-color: var(--color-quinternary);
+}
+
+.dataTable[id="network-entries"] .btn-xs,
+.dataTable[id="DHCPStaticLeasesTable"] .btn-xs {
+  border-radius: calc(var(--radius100) * 1.5);
+}
+
+table.table-bordered.dataTable th:last-child,
+table.table-bordered.dataTable td:last-child:not(.dataTables_empty) {
+  text-align: right;
+}
+
+/* --- "Checkbox" */
+table.dataTable tbody td.select-checkbox::before,
+table.dataTable tbody th.select-checkbox::before,
+table.dataTable tr.selected td.select-checkbox::after,
+table.dataTable tr.selected th.select-checkbox::after {
+  height: calc(var(--gap) * 2 + var(--border-width));
+  border: 0;
+  border-radius: 0;
+  cursor: pointer;
+  margin: 0;
+  top: 50%;
+  translate: 0 -50%;
+}
+
+table.dataTable tbody td.select-checkbox::before,
+table.dataTable tbody th.select-checkbox::before {
+  width: var(--gap);
+  background: var(--color-disabled);
+  left: var(--gap25);
+}
+
+table.dataTable tr.selected td.select-checkbox::after,
+table.dataTable tr.selected th.select-checkbox::after {
+  width: calc(var(--gap) / 3);
+  background-color: var(--color-success-dark);
+  transform: translate(0);
+  left: calc(var(--gap) * 1.5);
+}
+
+table.dataTable tbody .selected td.select-checkbox::before,
+table.dataTable tbody .selected th.select-checkbox::before {
+  background-color: var(--color-success);
+}
+
+/* --- Dropdown menu */
+.open > .dropdown-menu {
+  overflow: visible !important;
+}
+
+.dropdown-menu.open {
+  background-color: var(--color-background);
+  min-width: calc(var(--gap) * 14);
+  padding: calc(var(--gap) * 1.5) var(--gap);
+  border: var(--border-width) solid var(--color-secondary);
+  border-left-width: var(--border-width-thick);
+  border-radius: var(--radius100);
+  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 60%);
+}
+
+.dropdown-menu.open::before,
+.dropdown-menu.open::after {
+  --_horizontal-offset: calc(var(--gap25) - (var(--border-width) / 2));
+  width: var(--gap50);
+  display: block;
+  content: "";
+  position: absolute;
+  top: 50%;
+}
+
+.dropdown-menu.open::before {
+  left: 0;
+  background-color: var(--color-background);
+  transform: translateX(-100%) translateY(-50%);
+  border: var(--border-width) solid var(--color-secondary);
+  height: 75%;
+}
+
+.dropdown-menu.open::after {
+  right: var(--_horizontal-offset);
+  background: var(--color-secondary);
+  transform: translateX(100%) translateY(50%);
+  height: 20%;
+}
+
+.dropdown-menu.open .dropdown-menu.inner {
+  background-color: transparent;
+}
+
+.dropdown-menu.open .dropdown-menu li a {
+  padding: calc(var(--gap) / 2) var(--gap);
+  text-transform: uppercase;
+  position: relative;
+  border-left: calc(var(--gap) / 2) solid var(--color-background);
+}
+
+.dropdown-menu.open .dropdown-menu li a::before {
+  background-color: var(--color-primary);
+  width: calc(var(--gap) / 4);
+  height: 100%;
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  translate: -200% 0;
+  opacity: 0;
+  transition: opacity var(--transition);
+}
+
+.dropdown-menu.open .dropdown-menu li a:hover {
+  background-color: transparent;
+  color: var(--color-link);
+}
+
+.dropdown-menu.open .dropdown-menu li a.selected {
+  border-radius: 0 calc(var(--gap) * 2) calc(var(--gap) * 2) 0;
+  background-color: var(--color-link);
+  color: var(--color-text-dark);
+}
+
+.dropdown-menu.open .dropdown-menu li a:hover::before,
+.dropdown-menu.open .dropdown-menu li a.selected::before {
+  opacity: 1;
+}
+
+.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
+  top: calc(var(--gap) * 0.75);
+  right: 0;
+}
+
+.bs-actionsbox {
+  padding: 0;
+}
+
+.bs-actionsbox button.btn:not(.btn-success) {
+  background-color: var(--color-secondary);
+  color: var(--color-background);
+  font-weight: bold;
+}
+
+.bs-actionsbox button.btn:hover {
+  background-color: var(--color-secondary-hover);
+}
+
+.bs-actionsbox > button.btn[disabled] {
+  background-color: var(--color-disabled);
+  pointer-events: none;
+}
+
+.dropdown-menu.open .dropdown-menu li a span.text {
+  margin-right: 0;
+}
+
+.bs-actionsbox .btn-group {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--gap25);
+  padding-bottom: var(--gap);
+}
+
+/* --- Toggle button */
+.toggle.btn-sm {
+  border-radius: 0;
+  min-height: calc(var(--gap) * 2 + var(--border-width));
+  min-width: calc(var(--gap) * 6) !important;
+}
+
+.toggle .toggle-group .btn {
+  padding-right: var(--gap);
+  border-radius: 0;
+}
+
+.toggle .toggle-group .btn.active {
+  color: var(--color-danger);
+  background-color: var(--color-supplement-01);
+}
+
+.toggle .toggle-handle {
+  display: none;
+}
+
+/* --- Table related buttons (select all, select more, delete) */
+div.dt-buttons {
+  margin: var(--gap) 0;
+}
+
+.dt-buttons .datatable-bt span {
+  font-size: inherit;
+}
+
+.dt-buttons .selectAll,
+.dt-buttons .removeAll,
+.dt-buttons .selectMore {
+  background-color: var(--color-secondary);
+  color: var(--color-text-dark);
+}
+
+.dt-buttons .selectAll:hover,
+.dt-buttons .removeAll:hover,
+.dt-buttons .selectMore:hover {
+  background-color: var(--color-secondary-hover);
+}
+
+.dt-buttons .deleteSelected {
+  background-color: var(--color-supplement-01);
+  color: #fff;
+}
+
+.dt-buttons .deleteSelected:hover {
+  background-color: var(--color-danger);
+}
+
+/* ALERTS
+  ========================================================== */
+
+div[class*="alert-"][role="alert"] {
+  border-radius: var(--radius100) 0 0 var(--radius100);
+  color: var(--color-text-dark) !important;
+  padding-right: calc(var(--gap) * 4);
+  position: relative;
+  border: 0;
+}
+
+div[class*="alert-"][role="alert"]::before,
+div[class*="alert-"][role="alert"]::after {
+  content: "";
+  position: absolute;
+}
+
+div[class*="alert-"][role="alert"]::before {
+  inset: 0 0 0 auto;
+  width: calc(var(--gap) * 4.3);
+  background-color: var(--color-background);
+  opacity: 0.5;
+}
+
+div[class*="alert-"][role="alert"]::after {
+  inset: 0 calc(var(--gap) * 4) 0 auto;
+  width: var(--gap25);
+  background-color: var(--color-background);
+}
+
+div[class*="alert-"][role="alert"] button {
+  width: calc(var(--gap) * 2);
+  height: calc(var(--gap) * 2);
+  overflow: hidden;
+  position: relative;
+  right: calc(var(--gap) * -3);
+  font-size: 5rem;
+  line-height: 0;
+}
+
+div[class*="alert-"][role="alert"] h4 {
+  font-size: 2.25rem;
+  vertical-align: middle;
+}
+
+/* CODE
+  ========================================================== */
+
+section pre {
+  background-color: var(--color-background);
+  color: var(--color-success);
+  border-color: var(--color-disabled);
+  border-radius: var(--radius100);
+  min-height: calc(var(--gap) * 6) !important;
+}
+
+td pre {
+  min-height: auto !important;
+}
+
+section code {
+  background-color: var(--color-disabled);
+  color: var(--color-success);
+  border-radius: var(--radius75);
+  padding-inline: var(--gap75);
+  font-family: var(--font-family-mono);
+}
+
+/* ANIMATIONS
+  ========================================================== */
+
+@-webkit-keyframes pulseBg {
+  0% {
+    background-color: var(--pulse-color);
+  }
+  100% {
+    background-color: var(--pulse-color-background);
+  }
+}
+
+@keyframes pulseBg {
+  0% {
+    background-color: var(--pulse-color);
+  }
+  100% {
+    background-color: var(--pulse-color-background);
+  }
+}
+
+@-webkit-keyframes pulseFont {
+  0% {
+    color: var(--pulse-font-color-01);
+  }
+  100% {
+    color: var(--pulse-font-color-02);
+  }
+}
+
+@keyframes pulseFont {
+  0% {
+    color: var(--pulse-font-color-01);
+  }
+  100% {
+    color: var(--pulse-font-color-02);
+  }
+}
+
+@-webkit-keyframes backgroundPositionAnimation {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 0 calc(var(--gap) * -18.125);
+  }
+}
+
+@keyframes backgroundPositionAnimation {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 0 calc(var(--gap) * -18.125);
+  }
+}
+
+@-webkit-keyframes scannerSlide {
+  0%,
+  100% {
+    translate: 0 0;
+  }
+
+  10% {
+    translate: calc(var(--scanner-animation-width) * 8) 0;
+  }
+
+  25% {
+    translate: calc(var(--scanner-animation-width) * -24) 0;
+  }
+
+  35% {
+    translate: calc(var(--scanner-animation-width) * 12) 0;
+  }
+
+  60% {
+    translate: calc(var(--scanner-animation-width) * 6) 0;
+  }
+
+  70% {
+    translate: calc(var(--scanner-animation-width) * 12) 0;
+  }
+
+  95% {
+    translate: calc(var(--scanner-animation-width) * -24) 0;
+  }
+}
+
+@keyframes scannerSlide {
+  0%,
+  100% {
+    translate: 0 0;
+  }
+
+  10% {
+    translate: calc(var(--scanner-animation-width) * 8) 0;
+  }
+
+  25% {
+    translate: calc(var(--scanner-animation-width) * -24) 0;
+  }
+
+  35% {
+    translate: calc(var(--scanner-animation-width) * 12) 0;
+  }
+
+  60% {
+    translate: calc(var(--scanner-animation-width) * 6) 0;
+  }
+
+  70% {
+    translate: calc(var(--scanner-animation-width) * 12) 0;
+  }
+
+  95% {
+    translate: calc(var(--scanner-animation-width) * -24) 0;
+  }
+}
+
+@-webkit-keyframes chartScanner {
+  0%,
+  100% {
+    left: 0;
+  }
+  50% {
+    left: calc(100% - (var(--gap) * 3));
+  }
+}
+
+@keyframes chartScanner {
+  0%,
+  100% {
+    left: 0;
+  }
+  50% {
+    left: calc(100% - (var(--gap) * 3));
+  }
+}
+
+@-webkit-keyframes topBoxesScanner {
+  0%,
+  100% {
+    background-size: var(--gap) var(--gap);
+  }
+
+  50% {
+    background-size: calc(var(--gap) * 2) var(--gap);
+  }
+}
+
+@keyframes topBoxesScanner {
+  0%,
+  100% {
+    background-size: var(--gap) var(--gap);
+  }
+
+  50% {
+    background-size: calc(var(--gap) * 2) var(--gap);
+  }
+}
+
+@-webkit-keyframes topSmallScanner {
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: var(--gap) 0;
+  }
+}
+
+@keyframes topSmallScanner {
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: var(--gap) 0;
+  }
+}
+
+@-webkit-keyframes loginLines {
+  0% {
+    inset: 40% calc(var(--gap) * 6);
+  }
+
+  100% {
+    inset: calc(var(--gap) * 1.35) calc(var(--gap) * 6);
+  }
+}
+
+@keyframes loginLines {
+  0% {
+    inset: 40% calc(var(--gap) * 6);
+  }
+
+  100% {
+    inset: calc(var(--gap) * 1.35) calc(var(--gap) * 6);
+  }
+}
+
+@-webkit-keyframes loginPanel {
+  0% {
+    inset: 40% 0;
+  }
+
+  100% {
+    inset: 0;
+  }
+}
+
+@keyframes loginPanel {
+  0% {
+    inset: 40% 0;
+  }
+
+  100% {
+    inset: 0;
+  }
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes runningDots {
+  0% {
+    content: "■ □ □ □ □ □ □ □ □ □ □";
+  }
+  10% {
+    content: "□ ■ □ □ □ □ □ □ □ □ □";
+  }
+  20% {
+    content: "□ □ ■ □ □ □ □ □ □ □ □";
+  }
+  30% {
+    content: "□ □ □ ■ □ □ □ □ □ □ □";
+  }
+  40% {
+    content: "□ □ □ □ ■ □ □ □ □ □ □";
+  }
+  50% {
+    content: "□ □ □ □ □ ■ □ □ □ □ □";
+  }
+  60% {
+    content: "□ □ □ □ □ □ ■ □ □ □ □";
+  }
+  70% {
+    content: "□ □ □ □ □ □ □ ■ □ □ □";
+  }
+  80% {
+    content: "□ □ □ □ □ □ □ □ ■ □ □";
+  }
+  90% {
+    content: "□ □ □ □ □ □ □ □ □ ■ □";
+  }
+  100% {
+    content: "□ □ □ □ □ □ □ □ □ □ ■";
+  }
+}
+
+@-webkit-keyframes runningDots {
+  0% {
+    content: "■ □ □ □ □ □ □ □ □ □ □";
+  }
+  10% {
+    content: "□ ■ □ □ □ □ □ □ □ □ □";
+  }
+  20% {
+    content: "□ □ ■ □ □ □ □ □ □ □ □";
+  }
+  30% {
+    content: "□ □ □ ■ □ □ □ □ □ □ □";
+  }
+  40% {
+    content: "□ □ □ □ ■ □ □ □ □ □ □";
+  }
+  50% {
+    content: "□ □ □ □ □ ■ □ □ □ □ □";
+  }
+  60% {
+    content: "□ □ □ □ □ □ ■ □ □ □ □";
+  }
+  70% {
+    content: "□ □ □ □ □ □ □ ■ □ □ □";
+  }
+  80% {
+    content: "□ □ □ □ □ □ □ □ ■ □ □";
+  }
+  90% {
+    content: "□ □ □ □ □ □ □ □ □ ■ □";
+  }
+  100% {
+    content: "□ □ □ □ □ □ □ □ □ □ ■";
+  }
+}