From 5dfc79e231ee4138eb4d14a92b25b366aa554bdf Mon Sep 17 00:00:00 2001
From: Bailey Matthews <bailey@hey.com>
Date: Mon, 11 Sep 2023 22:00:15 +0100
Subject: [PATCH] feat: split theme files

---
 .../plugins/dynamix/styles/default-base.css   | 1491 ++++++++++++++++
 .../dynamix/styles/default-color-pallet.css   |   44 +
 .../plugins/dynamix/styles/default-white.css  | 1535 -----------------
 3 files changed, 1535 insertions(+), 1535 deletions(-)
 create mode 100644 emhttp/plugins/dynamix/styles/default-base.css
 create mode 100644 emhttp/plugins/dynamix/styles/default-color-pallet.css

diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css
new file mode 100644
index 000000000..21f77746e
--- /dev/null
+++ b/emhttp/plugins/dynamix/styles/default-base.css
@@ -0,0 +1,1491 @@
+html {
+    font-family: clear-sans;
+    font-size: 62.5%;
+    height: 100%;
+}
+body {
+    font-size: 1.3rem;
+    color: var(--text-color);
+    background-color: var(--background-color);
+    padding: 0;
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+@media (max-width: 1280px) {
+    #template {
+        min-width: 1260px;
+        max-width: 1260px;
+        margin: 0;
+    }
+}
+@media (min-width: 1281px) {
+    #template {
+        min-width: 1260px;
+        margin: 0 10px;
+    }
+}
+@media (min-width: 1921px) {
+    #template {
+        min-width: 1260px;
+        max-width: 1920px;
+        margin: 0 auto;
+    }
+}
+img {
+    border: none;
+    text-decoration: none;
+    vertical-align: middle;
+}
+p {
+    text-align: justify;
+}
+p.centered {
+    text-align: left;
+}
+p:empty {
+    display: none;
+}
+a:hover {
+    text-decoration: underline;
+}
+a {
+    color: var(--blue-800);
+    text-decoration: none;
+}
+a.none {
+    color: var(--text-color);
+}
+a.img {
+    text-decoration: none;
+    border: none;
+}
+a.info {
+    position: relative;
+}
+a.info span {
+    display: none;
+    white-space: nowrap;
+    font-variant: small-caps;
+    position: absolute;
+    top: 16px;
+    left: 12px;
+    line-height: 2rem;
+    color: var(--inverse-text-color);
+    padding: 5px 8px;
+    border: 1px solid var(--inverse-border-color); /* Opacity of 0.25 */
+    border-radius: 3px;
+    background-color: var(--inverse-background-color); /* Opacity of 0.95 */
+    box-shadow: var(--small-shadow);
+}
+a.info:hover span {
+    display: block;
+    z-index: 1;
+}
+a.nohand {
+    cursor: default;
+}
+a.hand {
+    cursor: pointer;
+    text-decoration: none;
+}
+a.static {
+    cursor: default;
+    color: var(--alt-text-color);
+    text-decoration: none;
+}
+a.view {
+    display: inline-block;
+    width: 20px;
+}
+i.spacing {
+    margin-left: -6px;
+}
+i.icon {
+    font-size: 1.6rem;
+    margin-right: 4px;
+    vertical-align: middle;
+}
+i.title {
+    margin-right: 8px;
+}
+i.control {
+    cursor: pointer;
+    color: var(--alt-text-color);
+    font-size: 1.8rem;
+}
+hr {
+    border: none;
+    height: 1px !important;
+    color: var(--hr-color);
+    background-color: var(--hr-color);
+}
+input[type="text"],
+input[type="password"],
+input[type="number"],
+input[type="url"],
+input[type="email"],
+input[type="date"],
+input[type="file"],
+textarea,
+.textarea {
+    font-family: clear-sans;
+    font-size: 1.3rem;
+    background-color: transparent;
+    border: none;
+    border-bottom: 1px solid var(--input-border-color);
+    padding: 4px 0;
+    text-indent: 0;
+    min-height: 2rem;
+    line-height: 2rem;
+    outline: none;
+    width: 300px;
+    margin: 0 20px 0 0;
+    box-shadow: none;
+    border-radius: 0;
+    color: var(--text-color);
+}
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+button,
+button[type="button"],
+a.button {
+    font-family: clear-sans;
+    font-size: 1.1rem;
+    font-weight: bold;
+    letter-spacing: 1.8px;
+    text-transform: uppercase;
+    min-width: 86px;
+    margin: 10px 12px 10px 0;
+    padding: 8px;
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    border-radius: 4px;
+    border: none;
+    color: var(--brand-orange);
+    background: -webkit-gradient(
+                linear,
+                left top,
+                right top,
+                from(var(--brand-red)),
+                to(var(--brand-orange))
+            )
+            0 0 no-repeat,
+        -webkit-gradient(
+                linear,
+                left top,
+                right top,
+                from(var(--brand-red)),
+                to(var(--brand-orange))
+            ) 0 100% no-repeat,
+        -webkit-gradient(
+                linear,
+                left bottom,
+                left top,
+                from(var(--brand-red)),
+                to(var(--brand-red))
+            ) 0 100% no-repeat,
+        -webkit-gradient(
+                linear,
+                left bottom,
+                left top,
+                from(var(--brand-orange)),
+                to(var(--brand-orange))
+            ) 100% 100% no-repeat;
+    background: linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange))
+            0 0 no-repeat,
+        linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)) 0 100%
+            no-repeat,
+        linear-gradient(0deg, var(--brand-red) 0, var(--brand-red)) 0 100%
+            no-repeat,
+        linear-gradient(0deg, var(--brand-orange) 0, var(--brand-orange)) 100%
+            100% no-repeat;
+    background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
+}
+input[type="checkbox"] {
+    vertical-align: middle;
+    margin-right: 6px;
+}
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+}
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+input:focus[type="text"],
+input:focus[type="password"],
+input:focus[type="number"],
+input:focus[type="url"],
+input:focus[type="email"],
+input:focus[type="file"],
+textarea:focus {
+    background-color: var(--mild-background-color);
+    outline: 0;
+}
+input:hover[type="button"],
+input:hover[type="reset"],
+input:hover[type="submit"],
+button:hover,
+button:hover[type="button"],
+a.button:hover {
+    color: var(--inverse-text-color);
+    background: -webkit-gradient(
+        linear,
+        left top,
+        right top,
+        from(var(--brand-red)),
+        to(var(--brand-orange))
+    );
+    background: linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange));
+}
+input[disabled],
+textarea[disabled] {
+    color: var(--text-color);
+    border-bottom-color: var(--disabled-input-border-color);
+    opacity: 0.5;
+    cursor: default;
+}
+input[type="button"][disabled],
+input[type="reset"][disabled],
+input[type="submit"][disabled],
+button[disabled],
+button[type="button"][disabled],
+a.button[disabled] input:hover[type="button"][disabled],
+input:hover[type="reset"][disabled],
+input:hover[type="submit"][disabled],
+button:hover[disabled],
+button:hover[type="button"][disabled],
+a.button:hover[disabled] input:active[type="button"][disabled],
+input:active[type="reset"][disabled],
+input:active[type="submit"][disabled],
+button:active[disabled],
+button:active[type="button"][disabled],
+a.button:active[disabled] {
+    cursor: default;
+    color: var(--disabled-text-color);
+    background: -webkit-gradient(
+                linear,
+                left top,
+                right top,
+                from(var(--gray-700)),
+                to(var(--gray-500))
+            )
+            0 0 no-repeat,
+        -webkit-gradient(
+                linear,
+                left top,
+                right top,
+                from(var(--gray-700)),
+                to(var(--gray-500))
+            ) 0 100% no-repeat,
+        -webkit-gradient(
+                linear,
+                left bottom,
+                left top,
+                from(var(--gray-700)),
+                to(var(--gray-700))
+            ) 0 100% no-repeat,
+        -webkit-gradient(
+                linear,
+                left bottom,
+                left top,
+                from(var(--gray-500)),
+                to(var(--gray-500))
+            ) 100% 100% no-repeat;
+    background: linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 0
+            no-repeat,
+        linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 100%
+            no-repeat,
+        linear-gradient(0deg, var(--gray-700) 0, var(--gray-700)) 0 100%
+            no-repeat,
+        linear-gradient(0deg, var(--gray-500) 0, var(--gray-500)) 100% 100%
+            no-repeat;
+    background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
+}
+input::-webkit-input-placeholder {
+    color: var(--link-text-color);
+}
+select {
+    -webkit-appearance: none;
+    appearance: none;
+    font-family: clear-sans;
+    font-size: 1.3rem;
+    min-width: 166px;
+    max-width: 300px;
+    padding: 5px 8px 5px 0;
+    text-indent: 0;
+    margin: 0 10px 0 0;
+    border: none;
+    border-bottom: 1px solid var(--input-border-color);
+    box-shadow: none;
+    border-radius: 0;
+    color: var(--text-color);
+    background-color: transparent;
+    background-image: linear-gradient(
+            66.6deg,
+            transparent 60%,
+            var(--input-border-color) 40%
+        ),
+        linear-gradient(
+            113.4deg,
+            var(--input-border-color) 40%,
+            transparent 60%
+        );
+    background-position: calc(100% - 4px), 100%;
+    background-size: 4px 6px, 4px 6px;
+    background-repeat: no-repeat;
+    outline: none;
+    display: inline-block;
+    cursor: pointer;
+}
+select option {
+    color: var(--text-color);
+    background-color: var(--mild-background-color);
+}
+select:focus {
+    outline: 0;
+}
+select[disabled] {
+    color: var(--text-color);
+    border-bottom-color: var(--disabled-border-color);
+    opacity: 0.5;
+    cursor: default;
+}
+select[name="enter_view"] {
+    margin: 0;
+    padding: 0 12px 0 0;
+    border: none;
+    min-width: auto;
+}
+select[name="enter_share"] {
+    font-size: 1.1rem;
+    padding: 0;
+    border: none;
+    min-width: 40px;
+    float: right;
+    margin-top: 13px;
+    margin-right: 20px;
+}
+select[name="port_select"] {
+    border: none;
+    min-width: 54px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+select.narrow {
+    min-width: 76px;
+}
+select.auto {
+    min-width: auto;
+}
+select.slot {
+    min-width: 44rem;
+    max-width: 44rem;
+}
+input.narrow {
+    width: 166px;
+}
+input.trim {
+    width: 76px;
+    min-width: 76px;
+}
+textarea {
+    resize: none;
+}
+#header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-width: 1260px;
+    height: 91px;
+    z-index: 102;
+    margin: 0;
+    color: var(--inverse-text-color);
+    background-color: var(--inverse-background-color);
+    background-size: 100% 90px;
+    background-repeat: no-repeat;
+}
+#header .logo {
+    float: left;
+    margin-left: 10px;
+    color: var(--red-800);
+    text-align: center;
+}
+#header .logo svg {
+    width: 160px;
+    display: block;
+    margin: 25px 0 8px 0;
+}
+#header .block {
+    margin: 0;
+    float: right;
+    text-align: right;
+    background-color: var(--inverse-background-color); /* Opacity of 0.3 */
+    padding: 10px 12px;
+}
+#header .text-left {
+    float: left;
+    text-align: right;
+    padding-right: 5px;
+    border-right: solid medium var(--orange-800);
+}
+#header .text-right {
+    float: right;
+    text-align: left;
+    padding-left: 5px;
+}
+#header .text-right a {
+    color: var(--inverse-text-color);
+}
+#header .text-right #licensetype {
+    font-weight: bold;
+    font-style: italic;
+    margin-right: 4px;
+}
+div.title {
+    margin: 20px 0 32px 0;
+    padding: 8px 10px;
+    clear: both;
+    background-color: var(--mild-background-color);
+    letter-spacing: 1.8px;
+}
+div.title span.left {
+    font-size: 1.4rem;
+}
+div.title span.right {
+    font-size: 1.4rem;
+    padding-top: 2px;
+    padding-right: 10px;
+    float: right;
+}
+div.title span img {
+    padding-right: 4px;
+}
+div.title.shift {
+    margin-top: -30px;
+}
+#menu {
+    position: absolute;
+    top: 90px;
+    left: 0;
+    right: 0;
+    display: grid;
+    grid-template-columns: auto max-content;
+    z-index: 101;
+}
+.nav-tile {
+    height: 4rem;
+    line-height: 4rem;
+    padding: 0;
+    margin: 0;
+    font-size: 1.2rem;
+    letter-spacing: 1.8px;
+    background-color: var(--inverse-background-color);
+    white-space: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+}
+.nav-tile::-webkit-scrollbar {
+    height: 8px;
+}
+.nav-tile.right {
+    text-align: right;
+}
+.nav-item,
+.nav-user {
+    position: relative;
+    display: inline-block;
+    text-align: center;
+    margin: 0;
+}
+.nav-item a {
+    min-width: 0;
+}
+.nav-item a span {
+    display: none;
+}
+.nav-item .system {
+    vertical-align: middle;
+    padding-bottom: 2px;
+}
+.nav-item a {
+    color: var(--inverse-text-color);
+    background-color: transparent;
+    text-transform: uppercase;
+    font-weight: bold;
+    display: block;
+    padding: 0 10px;
+}
+.nav-item a {
+    text-decoration: none;
+    text-decoration-skip-ink: auto;
+    -webkit-text-decoration-skip: objects;
+    -webkit-transition: all 0.25s ease-out;
+    transition: all 0.25s ease-out;
+}
+.nav-item:after,
+.nav-user.show:after {
+    border-radius: 4px;
+    display: block;
+    background-color: transparent;
+    content: "";
+    width: 32px;
+    height: 2px;
+    bottom: 8px;
+    position: absolute;
+    left: 50%;
+    margin-left: -16px;
+    -webkit-transition: all 0.25s ease-in-out;
+    transition: all 0.25s ease-in-out;
+    pointer-events: none;
+}
+.nav-item:focus:after,
+.nav-item:hover:after,
+.nav-user.show:hover:after {
+    background-color: var(--orange-800);
+}
+.nav-item.active:after {
+    background-color: var(--background-color);
+}
+.nav-user a {
+    color: var(--inverse-text-color);
+    background-color: transparent;
+    display: block;
+    padding: 0 10px;
+}
+.nav-user .system {
+    vertical-align: middle;
+    padding-bottom: 2px;
+}
+#clear {
+    clear: both;
+}
+#footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    color: var(--text-color);
+    background-color: var(--mild-background-color);
+    padding: 5px 0;
+    width: 100%;
+    height: 1.6rem;
+    line-height: 1.6rem;
+    text-align: center;
+    /* TODO: Use variables for z-index to have more control */
+    z-index: 10000;
+}
+#statusraid {
+    float: left;
+    padding-left: 10px;
+}
+#countdown {
+    margin: 0 auto;
+}
+#copyright {
+    font-family: bitstream;
+    font-size: 1.1rem;
+    float: right;
+    padding-right: 10px;
+}
+.green {
+    color: var(--green-800);
+    padding-left: 5px;
+    padding-right: 5px;
+}
+.red {
+    color: var(--red-600);
+    padding-left: 5px;
+    padding-right: 5px;
+}
+.orange {
+    color: var(--orange-300);
+    padding-left: 5px;
+    padding-right: 5px;
+}
+.blue {
+    color: var(--blue-800);
+    padding-left: 5px;
+    padding-right: 5px;
+}
+.green-text,
+.passed {
+    color: var(--green-800);
+}
+.red-text,
+.failed {
+    color: var(--red-600);
+}
+.orange-text,
+.warning {
+    color: var(--orange-300);
+}
+.blue-text {
+    color: var(--blue-800);
+}
+.grey-text {
+    color: var(--gray-500);
+}
+.green-orb {
+    color: var(--green-200);
+}
+.grey-orb {
+    color: var(--gray-300);
+}
+.blue-orb {
+    color: var(--blue-700);
+}
+.yellow-orb {
+    color: var(--orange-200);
+}
+.red-orb {
+    color: var(--red-500);
+}
+.usage-bar {
+    float: left;
+    height: 2rem;
+    line-height: 2rem;
+    width: 14rem;
+    padding: 1px 1px 1px 2px;
+    margin: 8px 12px;
+    border-radius: 3px;
+    background-color: var(--usage-bar-background-color);
+    box-shadow: 0 1px 0 var(--gray-400), inset 0 1px 0 var(--gray-600);
+}
+.usage-bar > span {
+    display: block;
+    height: 100%;
+    text-align: right;
+    border-radius: 2px;
+    color: var(--inverse-text-color);
+    background-color: var(--usage-bar-background-color);
+    box-shadow: inset 0 1px 0 var(--gray-000); /* Opacity of 0.5 */
+}
+.usage-disk {
+    position: relative;
+    height: 1.8rem;
+    background-color: var(--usage-disk-background-color);
+    margin: 0;
+}
+.usage-disk > span:first-child {
+    position: absolute;
+    left: 0;
+    margin: 0 !important;
+    height: 1.8rem;
+    background-color: var(--gray-400);
+}
+.usage-disk > span:last-child {
+    position: relative;
+    padding-right: 4px;
+    z-index: 1;
+}
+.usage-disk.sys {
+    height: 12px;
+    margin: -15px 20px 0 44px;
+}
+.usage-disk.sys > span:first-child {
+    height: 12px;
+    padding: 0;
+}
+.usage-disk.sys.none {
+    background-color: transparent;
+}
+.usage-disk.mm {
+    height: 3px;
+    margin: 5px 20px 0 0;
+}
+.usage-disk.mm > span:first-child {
+    height: 3px;
+}
+.notice {
+    background: var(--yellow-100) url(../images/notice.png) no-repeat;
+    background-position: 60px 50%;
+    color: var(--text-color);
+    font-size: 1.4rem;
+    text-align: left;
+    padding: 15px 0 15px 130px;
+    display: block;
+    height: 7rem;
+    line-height: 7rem;
+    border-top: 2px solid var(--yellow-500);
+    border-bottom: 2px solid var(--yellow-500);
+}
+.notice.shift {
+    margin-top: 160px;
+}
+.greenbar {
+    background: -webkit-gradient(
+        linear,
+        left top,
+        right top,
+        from(var(--green-900)),
+        to(var(--green-500))
+    );
+    background: linear-gradient(90deg, var(--green-900) 0, var(--green-500));
+}
+.orangebar {
+    background: -webkit-gradient(
+        linear,
+        left top,
+        right top,
+        from(var(--orange-400)),
+        to(var(--orange-400))
+    );
+    background: linear-gradient(90deg, var(--orange-400) 0, var(--orange-400));
+}
+.redbar {
+    background: -webkit-gradient(
+        linear,
+        left top,
+        right top,
+        from(var(--red-900)),
+        to(var(--red-700))
+    );
+    background: linear-gradient(90deg, var(--red-900) 0, var(--red-700));
+}
+.graybar {
+    background: -webkit-gradient(
+        linear,
+        left top,
+        right top,
+        from(var(--gray-400)),
+        to(var(--gray-200))
+    );
+    background: linear-gradient(90deg, var(--gray-400) 0, var(--gray-200));
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    border-style: hidden;
+    margin: -30px 0 0 0;
+    width: 100%;
+    background-color: var(--background-color);
+}
+table thead td {
+    padding: 7px 0;
+}
+table tbody td {
+    padding: 5px 0;
+}
+table tbody tr.tr_last {
+    background-color: var(--background-color);
+    border-top: 1px solid var(--table-border-color);
+}
+table td.cpu-info {
+    border: 1px solid var(--table-border-color);
+}
+table.disk_status {
+    white-space: nowrap;
+}
+table.disk_status td span {
+    margin-left: 10px;
+}
+table.disk_status thead tr:first-child td {
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    background-color: var(--usage-disk-background-color);
+}
+table.disk_status thead tr:last-child {
+    border-bottom: 1px solid var(--table-border-color);
+}
+table.disk_status tr > td {
+    width: 10%;
+    padding-left: 12px;
+    padding-right: 0;
+    white-space: nowrap;
+}
+table.disk_status tr > td + td {
+    width: auto;
+}
+table.disk_status tr > td + td + td {
+    width: 6.5%;
+    text-align: center;
+    padding-left: 4px;
+    padding-right: 8px;
+}
+table.disk_status tr > td + td + td + td {
+    text-align: right;
+    padding-left: 0;
+    padding-right: 12px;
+}
+table.disk_status tbody tr:nth-child(even) {
+    background-color: var(--background-color);
+}
+table.disk_status tbody tr:not(.tr_last):hover td {
+    background-color: var(--inverse-background-color); /* Opacity of 0.1 */
+}
+table.disk_status.stats tr > td + td {
+    text-align: left;
+    padding-left: 0;
+    padding-right: 12px;
+}
+table.array_status td {
+    padding: 4px 0;
+}
+table.array_status tr > td {
+    text-align: left;
+    white-space: nowrap;
+    padding-left: 12px;
+    width: 30%;
+}
+table.array_status tr > td + td {
+    padding-left: 2px;
+    width: 20%;
+}
+table.array_status tr > td + td + td {
+    width: auto;
+}
+table.array_status td.line {
+    border-top: 1px solid var(--table-border-color);
+}
+table.array_status.noshift {
+    margin-top: 0;
+}
+table.settings {
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+}
+table.settings td:first-child {
+    width: 35%;
+    padding: 12px;
+}
+table.settings td + td {
+    padding-left: 8px;
+}
+table.settings.shifted {
+    padding: 0;
+    margin-left: 0;
+    margin-top: 0;
+}
+table.settings.shifted td {
+    padding-left: 0;
+}
+table.access_list {
+    border-spacing: 0;
+    margin-top: 10px;
+    border: none;
+}
+table.access_list tr:first-child td {
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    vertical-align: middle;
+    text-align: left;
+    border: 1px solid var(--table-border-color);
+    border-bottom: 1px solid var(--table-border-color);
+    background-color: var(--usage-disk-background-color);
+}
+table.access_list td:first-child {
+    font-weight: normal;
+    width: 35%;
+    padding-left: 12px;
+}
+table.access_list tr:first-child td:first-child {
+    font-weight: normal;
+}
+table.access_list tr > td + td {
+    white-space: nowrap;
+}
+table.share_status {
+    white-space: nowrap;
+}
+table.share_status thead tr:first-child td {
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    background-color: var(--mild-background-color);
+}
+table.share_status tr > td {
+    text-align: left;
+    padding-left: 12px;
+}
+table.share_status tr > td + td {
+    padding-left: 0;
+}
+table.share_status tbody tr:nth-child(even) {
+    background-color: var(--background-color);
+}
+table.share_status:not(.dashboard) tbody tr:hover td {
+    background-color: var(--inverse-background-color); /* Opacity of 0.1 */
+}
+table.share_status tbody tr.alert {
+    color: var(--red-600);
+}
+table.share_status tbody tr.warn {
+    color: var(--orange-300);
+}
+table.share_status.fixed tr > td + td {
+    min-width: 39px;
+    font-size: 1.1rem;
+    text-align: center;
+    padding: 0;
+}
+table.share_status.table {
+    margin-top: 36px;
+}
+table.share_status.table tr > td {
+    width: 50%;
+}
+table.share_status.dashboard {
+    margin: 0;
+    border: 1px solid var(--border-color);
+}
+table.share_status.dashboard tbody {
+    border: 1px solid var(--border-color);
+}
+table.share_status.dashboard tr:first-child > td {
+    height: 3.6rem;
+    padding-top: 12px;
+    font-size: 1.6rem;
+    font-weight: bold;
+    letter-spacing: 1.8px;
+    text-transform: none;
+    vertical-align: top;
+}
+table.share_status.dashboard tr:nth-child(even) {
+    background-color: transparent;
+}
+table.share_status.dashboard tr:last-child > td {
+    padding-bottom: 20px;
+}
+table.share_status.dashboard tr.last > td {
+    padding-bottom: 20px;
+}
+table.share_status.dashboard tr.header td {
+    padding-bottom: 10px;
+}
+table.share_status.dashboard td {
+    padding: 3px 10px;
+}
+table.share_status.dashboard td.vpn {
+    font-size: 1.1rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+table.share_status.dashboard td div.section {
+    display: inline-block;
+    vertical-align: top;
+    margin-left: 4px;
+    font-size: 1.2rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+table.share_status.dashboard td div.section span {
+    font-weight: normal;
+    text-transform: none;
+    letter-spacing: 0;
+    white-space: normal;
+}
+table.share_status.dashboard td span.info {
+    float: right;
+    margin-right: 20px;
+    font-size: 1.2rem;
+    font-weight: normal;
+    text-transform: none;
+    letter-spacing: 0;
+}
+table.share_status.dashboard td span.info.title {
+    font-weight: bold;
+}
+table.share_status.dashboard td span.load {
+    display: inline-block;
+    width: 38px;
+    text-align: right;
+}
+table.share_status.dashboard td span.finish {
+    float: right;
+    margin-right: 24px;
+}
+table.share_status.dashboard i.control {
+    float: right;
+    font-size: 1.4rem !important;
+    margin: 0 3px 0 0;
+    cursor: pointer;
+    background-color: var(--inverse-background-color); /* Opacity of 0.1 */
+    padding: 2px;
+}
+[name="arrayOps"] {
+    margin-top: 12px;
+}
+span.error {
+    color: var(--red-600);
+    background-color: var(--red-300);
+    display: block;
+    width: 100%;
+}
+span.warn {
+    color: var(--orange-300);
+    background-color: var(--yellow-200);
+    display: block;
+    width: 100%;
+}
+span.system {
+    color: var(--blue-700);
+    background-color: var(--blue-300);
+    display: block;
+    width: 100%;
+}
+span.array {
+    color: var(--green-800);
+    background-color: var(--green-100);
+    display: block;
+    width: 100%;
+}
+span.login {
+    color: var(--orange-900);
+    background-color: var(--red-100);
+    display: block;
+    width: 100%;
+}
+span.lite {
+    background-color: var(--background-color);
+}
+span.label {
+    font-size: 1.2rem;
+    padding: 2px 0 2px 6px;
+    margin-right: 6px;
+    border-radius: 4px;
+    display: inline;
+    width: auto;
+    vertical-align: middle;
+}
+span.cpu-speed {
+    display: block;
+    color: var(--blue-900);
+}
+span.status {
+    float: right;
+    font-size: 1.4rem;
+    margin-top: 30px;
+    padding-right: 8px;
+    letter-spacing: 1.8px;
+}
+span.status.vhshift {
+    margin-top: 0;
+    margin-right: -9px;
+}
+span.status.vshift {
+    margin-top: -16px;
+}
+span.status.hshift {
+    margin-right: -20px;
+}
+span.diskinfo {
+    float: left;
+    clear: both;
+    margin-top: 5px;
+    padding-left: 10px;
+}
+span.bitstream {
+    font-family: bitstream;
+    font-size: 1.1rem;
+}
+span.ucfirst {
+    text-transform: capitalize;
+}
+span.strong {
+    font-weight: bold;
+}
+span.big {
+    font-size: 1.4rem;
+}
+span.small {
+    font-size: 1.2rem;
+}
+span.outer {
+    margin-bottom: 20px;
+    margin-right: 0;
+}
+span.outer.solid {
+    background-color: var(--background-color);
+}
+span.hand {
+    cursor: pointer;
+}
+span.outer.started > img,
+span.outer.started > i.img {
+    opacity: 1;
+}
+span.outer.stopped > img,
+span.outer.stopped > i.img {
+    opacity: 0.3;
+}
+span.outer.paused > img,
+span.outer.paused > i.img {
+    opacity: 0.6;
+}
+span.inner {
+    display: inline-block;
+    vertical-align: top;
+}
+span.state {
+    font-size: 1.1rem;
+    margin-left: 7px;
+}
+i.padlock {
+    margin-right: 8px;
+    cursor: default;
+    vertical-align: middle;
+}
+i.nolock {
+    visibility: hidden;
+    margin-right: 8px;
+    vertical-align: middle;
+}
+i.lock {
+    margin-left: 8px;
+    cursor: default;
+    vertical-align: middle;
+}
+i.orb {
+    font-size: 1.1rem;
+    margin: 0 8px 0 3px;
+}
+img.img,
+i.img {
+    width: 32px;
+    height: 32px;
+    margin-right: 10px;
+}
+img.icon {
+    margin: -3px 4px 0 0;
+}
+img.list {
+    width: auto;
+    max-width: 32px;
+    height: 32px;
+}
+i.list {
+    font-size: 32px;
+}
+a.list {
+    text-decoration: none;
+    color: inherit;
+}
+div.content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding-bottom: 30px;
+    z-index: -1;
+    clear: both;
+}
+div.content.shift {
+    margin-top: 1px;
+}
+label + .content {
+    margin-top: 86px;
+}
+div.tabs {
+    position: relative;
+    margin: 130px 0 0 0;
+}
+div.tab {
+    float: left;
+    margin-top: 30px;
+}
+div.tab input[id^="tab"] {
+    display: none;
+}
+div.tab [type="radio"] + label:hover {
+    background-color: transparent;
+    border: 1px solid var(--orange-500);
+    border-bottom: none;
+    cursor: pointer;
+    opacity: 1;
+}
+div.tab [type="radio"]:checked + label {
+    cursor: default;
+    background-color: transparent;
+    border: 1px solid var(--orange-500);
+    border-bottom: none;
+    opacity: 1;
+}
+div.tab [type="radio"] + label ~ .content {
+    display: none;
+}
+div.tab [type="radio"]:checked + label ~ .content {
+    display: inline;
+}
+div.tab [type="radio"] + label {
+    position: relative;
+    font-size: 1.4rem;
+    letter-spacing: 1.8px;
+    padding: 4px 10px;
+    margin-right: 2px;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    border: 1px solid var(--disabled-input-border-color);
+    border-bottom: none;
+    background-color: var(--radio-background-color);
+    opacity: 0.5;
+}
+div.tab [type="radio"] + label img {
+    padding-right: 4px;
+}
+div.Panel {
+    text-align: center;
+    float: left;
+    margin: 0 30px 30px 12px;
+    height: 8rem;
+}
+div.Panel a {
+    text-decoration: none;
+}
+div.Panel span {
+    height: 42px;
+    display: block;
+}
+div.Panel:hover .PanelText {
+    text-decoration: underline;
+}
+div.Panel img.PanelImg {
+    width: auto;
+    max-width: 32px;
+    height: 32px;
+}
+div.Panel i.PanelIcon {
+    font-size: 32px;
+    color: var(--text-color);
+}
+div.user-list {
+    float: left;
+    padding: 10px;
+    margin-right: 10px;
+    margin-bottom: 24px;
+    border: 1px solid var(--border-color);
+    border-radius: 5px;
+    line-height: 2rem;
+    height: 10rem;
+    width: 10rem;
+    background-color: var(--border-color);
+}
+div.user-list img {
+    width: auto;
+    max-width: 48px;
+    height: 48px;
+    margin-bottom: 16px;
+}
+div.up {
+    margin-top: -30px;
+    border: 1px solid var(--border-color);
+    padding: 4px 6px;
+    overflow: auto;
+}
+div.spinner {
+    margin: 48px auto;
+    text-align: center;
+}
+div.spinner.fixed {
+    display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    margin-top: -16px;
+    margin-left: -64px;
+    z-index: 10000;
+}
+div.spinner .unraid_mark {
+    height: 64px;
+}
+div.spinner .unraid_mark_2,
+div .unraid_mark_4 {
+    animation: mark_2 1.5s ease infinite;
+}
+div.spinner .unraid_mark_3 {
+    animation: mark_3 1.5s ease infinite;
+}
+div.spinner .unraid_mark_6,
+div .unraid_mark_8 {
+    animation: mark_6 1.5s ease infinite;
+}
+div.spinner .unraid_mark_7 {
+    animation: mark_7 1.5s ease infinite;
+}
+div.domain {
+    margin-top: -20px;
+}
+@keyframes mark_2 {
+    50% {
+        transform: translateY(-40px);
+    }
+    100% {
+        transform: translateY(0px);
+    }
+}
+@keyframes mark_3 {
+    50% {
+        transform: translateY(-62px);
+    }
+    100% {
+        transform: translateY(0px);
+    }
+}
+@keyframes mark_6 {
+    50% {
+        transform: translateY(40px);
+    }
+    100% {
+        transform: translateY(0px);
+    }
+}
+@keyframes mark_7 {
+    50% {
+        transform: translateY(62px);
+    }
+    100% {
+        transform: translateY(0px);
+    }
+}
+pre.up {
+    margin-top: -30px;
+}
+pre {
+    border: 1px solid var(--border-color);
+    font-family: bitstream;
+    font-size: 1.3rem;
+    line-height: 1.8rem;
+    padding: 4px 6px;
+    overflow: auto;
+}
+iframe#progressFrame {
+    position: fixed;
+    bottom: 32px;
+    left: 0;
+    margin: 0;
+    padding: 8px 8px 0 8px;
+    width: 100%;
+    height: 1.2rem;
+    line-height: 1.2rem;
+    border-style: none;
+    overflow: hidden;
+    font-family: bitstream;
+    font-size: 1.1rem;
+    color: var(--alt-text-color);
+    white-space: nowrap;
+    z-index: -10;
+}
+dl {
+    margin: 0;
+    padding-left: 12px;
+    line-height: 2.6rem;
+}
+dt {
+    clear: left;
+    float: left;
+    width: 35%;
+    font-weight: normal;
+}
+dd {
+    margin-bottom: 12px;
+    white-space: nowrap;
+}
+dd p {
+    margin: 0 0 4px 0;
+}
+dd blockquote {
+    padding-left: 0;
+}
+blockquote {
+    width: 90%;
+    margin: 10px auto;
+    text-align: left;
+    padding: 4px 20px;
+    border-top: 2px solid var(--blue-200);
+    border-bottom: 2px solid var(--blue-200);
+    color: var(--blockquote-text-color);
+    background-color: var(--blue-100);
+}
+blockquote.ontop {
+    margin-top: -20px;
+    margin-bottom: 46px;
+}
+blockquote a {
+    color: var(--orange-500);
+    font-weight: 600;
+}
+blockquote a:hover,
+blockquote a:focus {
+    color: var(--orange-800);
+}
+label.checkbox {
+    display: block;
+    position: relative;
+    padding-left: 28px;
+    margin: 3px 0;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+label.checkbox input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+}
+span.checkmark {
+    position: absolute;
+    top: 0;
+    left: 6px;
+    height: 14px;
+    width: 14px;
+    background-color: var(--checkbox-color);
+    border-radius: 100%;
+}
+label.checkbox:hover input ~ .checkmark {
+    background-color: var(--checkbox-hover-color);
+}
+label.checkbox input:checked ~ .checkmark {
+    background-color: var(--brand-orange);
+}
+label.checkbox input:disabled ~ .checkmark {
+    opacity: 0.5;
+}
+a.bannerDismiss {
+    float: right;
+    cursor: pointer;
+    text-decoration: none;
+    margin-right: 1rem;
+}
+.bannerDismiss::before {
+    content: "\e92f";
+    font-family: Unraid;
+    color: var(--orange-300);
+}
+a.bannerInfo {
+    cursor: pointer;
+    text-decoration: none;
+}
+.bannerInfo::before {
+    content: "\f05a";
+    font-family: fontAwesome;
+    color: var(--orange-300);
+}
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+    background: transparent;
+}
+::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-color);
+    border-radius: 10px;
+}
+::-webkit-scrollbar-corner {
+    background: var(--scrollbar-color);
+    border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-hover-color);
+}
diff --git a/emhttp/plugins/dynamix/styles/default-color-pallet.css b/emhttp/plugins/dynamix/styles/default-color-pallet.css
new file mode 100644
index 000000000..0eb2cea7f
--- /dev/null
+++ b/emhttp/plugins/dynamix/styles/default-color-pallet.css
@@ -0,0 +1,44 @@
+:root {
+    --gray-000: #ffffff;
+    --gray-100: #f2f2f2;
+    --gray-200: #d3d3d3; /* Condensed from: #d9d9d9 #dcdcdc #d4d5d6 */
+    --gray-300: #cccccc; /* Condensed from: gray #c0c0c0 #a8a8a8 */
+    --gray-400: #909090; /* Condensed from: #989898 #a2a2a2 #949494 */
+    --gray-500: #808080; /* Condensed from: #606060 #585858 */
+    --gray-600: #303030; /* Condensed from: #202020 */
+    --gray-700: #404040;
+    --gray-800: #191919; /* Condensed from: #2b2a29 */
+    --gray-900: #1d1b1b;
+
+    --orange-200: #ff9900;
+    --orange-300: #e68a00;
+    --orange-400: #ce7c10;
+    --orange-500: #ff8c2f;
+    --orange-800: #f15a2c;
+    --orange-900: #d63301;
+
+    --red-100: #ffddd1;
+    --red-300: #ff9e9e;
+    --red-500: #ff3300;
+    --red-600: #f0000c;
+    --red-700: #de1100;
+    --red-800: #e22828;
+    --red-900: #941c00;
+
+    --green-100: #dff2bf;
+    --green-200: #33cc33;
+    --green-500: #17bf0b;
+    --green-800: #4f8a10;
+    --green-900: #127a05;
+
+    --blue-100: #d9edf7;
+    --blue-200: #bce8f1;
+    --blue-300: #bde5f8;
+    --blue-700: #0099ff;
+    --blue-800: #486dba;
+    --blue-900: #3b5998;
+
+    --yellow-100: #fff6bf;
+    --yellow-200: #feefb3;
+    --yellow-500: #ffd324;
+}
\ No newline at end of file
diff --git a/emhttp/plugins/dynamix/styles/default-white.css b/emhttp/plugins/dynamix/styles/default-white.css
index 193786276..56801d788 100644
--- a/emhttp/plugins/dynamix/styles/default-white.css
+++ b/emhttp/plugins/dynamix/styles/default-white.css
@@ -1,47 +1,4 @@
 :root {
-    --gray-000: #ffffff;
-    --gray-100: #f2f2f2;
-    --gray-200: #d3d3d3; /* Condensed from: #d9d9d9 #dcdcdc #d4d5d6 */
-    --gray-300: #cccccc; /* Condensed from: gray #c0c0c0 #a8a8a8 */
-    --gray-400: #909090; /* Condensed from: #989898 #a2a2a2 #949494 */
-    --gray-500: #808080; /* Condensed from: #606060 #585858 */
-    --gray-600: #303030; /* Condensed from: #202020 */
-    --gray-700: #404040;
-    --gray-800: #191919; /* Condensed from: #2b2a29 */
-    --gray-900: #1d1b1b;
-
-    --orange-200: #ff9900;
-    --orange-300: #e68a00;
-    --orange-400: #ce7c10;
-    --orange-500: #ff8c2f;
-    --orange-800: #f15a2c;
-    --orange-900: #d63301;
-
-    --red-100: #ffddd1;
-    --red-300: #ff9e9e;
-    --red-500: #ff3300;
-    --red-600: #f0000c;
-    --red-700: #de1100;
-    --red-800: #e22828;
-    --red-900: #941c00;
-
-    --green-100: #dff2bf;
-    --green-200: #33cc33;
-    --green-500: #17bf0b;
-    --green-800: #4f8a10;
-    --green-900: #127a05;
-
-    --blue-100: #d9edf7;
-    --blue-200: #bce8f1;
-    --blue-300: #bde5f8;
-    --blue-700: #0099ff;
-    --blue-800: #486dba;
-    --blue-900: #3b5998;
-
-    --yellow-100: #fff6bf;
-    --yellow-200: #feefb3;
-    --yellow-500: #ffd324;
-
     --text-color: var(--gray-900);
     --blockquote-text-color: var(--gray-800);
     --alt-text-color: var(--gray-400);
@@ -77,1495 +34,3 @@
     --scrollbar-color: var(--gray-400);
     --scrollbar-hover-color: var(--gray-500);
 }
-
-html {
-    font-family: clear-sans;
-    font-size: 62.5%;
-    height: 100%;
-}
-body {
-    font-size: 1.3rem;
-    color: var(--text-color);
-    background-color: var(--background-color);
-    padding: 0;
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-@media (max-width: 1280px) {
-    #template {
-        min-width: 1260px;
-        max-width: 1260px;
-        margin: 0;
-    }
-}
-@media (min-width: 1281px) {
-    #template {
-        min-width: 1260px;
-        margin: 0 10px;
-    }
-}
-@media (min-width: 1921px) {
-    #template {
-        min-width: 1260px;
-        max-width: 1920px;
-        margin: 0 auto;
-    }
-}
-img {
-    border: none;
-    text-decoration: none;
-    vertical-align: middle;
-}
-p {
-    text-align: justify;
-}
-p.centered {
-    text-align: left;
-}
-p:empty {
-    display: none;
-}
-a:hover {
-    text-decoration: underline;
-}
-a {
-    color: var(--blue-800);
-    text-decoration: none;
-}
-a.none {
-    color: var(--text-color);
-}
-a.img {
-    text-decoration: none;
-    border: none;
-}
-a.info {
-    position: relative;
-}
-a.info span {
-    display: none;
-    white-space: nowrap;
-    font-variant: small-caps;
-    position: absolute;
-    top: 16px;
-    left: 12px;
-    line-height: 2rem;
-    color: var(--inverse-text-color);
-    padding: 5px 8px;
-    border: 1px solid var(--inverse-border-color); /* Opacity of 0.25 */
-    border-radius: 3px;
-    background-color: var(--inverse-background-color); /* Opacity of 0.95 */
-    box-shadow: var(--small-shadow);
-}
-a.info:hover span {
-    display: block;
-    z-index: 1;
-}
-a.nohand {
-    cursor: default;
-}
-a.hand {
-    cursor: pointer;
-    text-decoration: none;
-}
-a.static {
-    cursor: default;
-    color: var(--alt-text-color);
-    text-decoration: none;
-}
-a.view {
-    display: inline-block;
-    width: 20px;
-}
-i.spacing {
-    margin-left: -6px;
-}
-i.icon {
-    font-size: 1.6rem;
-    margin-right: 4px;
-    vertical-align: middle;
-}
-i.title {
-    margin-right: 8px;
-}
-i.control {
-    cursor: pointer;
-    color: var(--alt-text-color);
-    font-size: 1.8rem;
-}
-hr {
-    border: none;
-    height: 1px !important;
-    color: var(--hr-color);
-    background-color: var(--hr-color);
-}
-input[type="text"],
-input[type="password"],
-input[type="number"],
-input[type="url"],
-input[type="email"],
-input[type="date"],
-input[type="file"],
-textarea,
-.textarea {
-    font-family: clear-sans;
-    font-size: 1.3rem;
-    background-color: transparent;
-    border: none;
-    border-bottom: 1px solid var(--input-border-color);
-    padding: 4px 0;
-    text-indent: 0;
-    min-height: 2rem;
-    line-height: 2rem;
-    outline: none;
-    width: 300px;
-    margin: 0 20px 0 0;
-    box-shadow: none;
-    border-radius: 0;
-    color: var(--text-color);
-}
-input[type="button"],
-input[type="reset"],
-input[type="submit"],
-button,
-button[type="button"],
-a.button {
-    font-family: clear-sans;
-    font-size: 1.1rem;
-    font-weight: bold;
-    letter-spacing: 1.8px;
-    text-transform: uppercase;
-    min-width: 86px;
-    margin: 10px 12px 10px 0;
-    padding: 8px;
-    text-align: center;
-    text-decoration: none;
-    white-space: nowrap;
-    cursor: pointer;
-    outline: none;
-    border-radius: 4px;
-    border: none;
-    color: var(--brand-orange);
-    background: -webkit-gradient(
-                linear,
-                left top,
-                right top,
-                from(var(--brand-red)),
-                to(var(--brand-orange))
-            )
-            0 0 no-repeat,
-        -webkit-gradient(
-                linear,
-                left top,
-                right top,
-                from(var(--brand-red)),
-                to(var(--brand-orange))
-            ) 0 100% no-repeat,
-        -webkit-gradient(
-                linear,
-                left bottom,
-                left top,
-                from(var(--brand-red)),
-                to(var(--brand-red))
-            ) 0 100% no-repeat,
-        -webkit-gradient(
-                linear,
-                left bottom,
-                left top,
-                from(var(--brand-orange)),
-                to(var(--brand-orange))
-            ) 100% 100% no-repeat;
-    background: linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange))
-            0 0 no-repeat,
-        linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange)) 0 100%
-            no-repeat,
-        linear-gradient(0deg, var(--brand-red) 0, var(--brand-red)) 0 100%
-            no-repeat,
-        linear-gradient(0deg, var(--brand-orange) 0, var(--brand-orange)) 100%
-            100% no-repeat;
-    background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
-}
-input[type="checkbox"] {
-    vertical-align: middle;
-    margin-right: 6px;
-}
-input[type="number"]::-webkit-outer-spin-button,
-input[type="number"]::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-}
-input[type="number"] {
-    -moz-appearance: textfield;
-}
-input:focus[type="text"],
-input:focus[type="password"],
-input:focus[type="number"],
-input:focus[type="url"],
-input:focus[type="email"],
-input:focus[type="file"],
-textarea:focus {
-    background-color: var(--mild-background-color);
-    outline: 0;
-}
-input:hover[type="button"],
-input:hover[type="reset"],
-input:hover[type="submit"],
-button:hover,
-button:hover[type="button"],
-a.button:hover {
-    color: var(--inverse-text-color);
-    background: -webkit-gradient(
-        linear,
-        left top,
-        right top,
-        from(var(--brand-red)),
-        to(var(--brand-orange))
-    );
-    background: linear-gradient(90deg, var(--brand-red) 0, var(--brand-orange));
-}
-input[disabled],
-textarea[disabled] {
-    color: var(--text-color);
-    border-bottom-color: var(--disabled-input-border-color);
-    opacity: 0.5;
-    cursor: default;
-}
-input[type="button"][disabled],
-input[type="reset"][disabled],
-input[type="submit"][disabled],
-button[disabled],
-button[type="button"][disabled],
-a.button[disabled] input:hover[type="button"][disabled],
-input:hover[type="reset"][disabled],
-input:hover[type="submit"][disabled],
-button:hover[disabled],
-button:hover[type="button"][disabled],
-a.button:hover[disabled] input:active[type="button"][disabled],
-input:active[type="reset"][disabled],
-input:active[type="submit"][disabled],
-button:active[disabled],
-button:active[type="button"][disabled],
-a.button:active[disabled] {
-    cursor: default;
-    color: var(--disabled-text-color);
-    background: -webkit-gradient(
-                linear,
-                left top,
-                right top,
-                from(var(--gray-700)),
-                to(var(--gray-500))
-            )
-            0 0 no-repeat,
-        -webkit-gradient(
-                linear,
-                left top,
-                right top,
-                from(var(--gray-700)),
-                to(var(--gray-500))
-            ) 0 100% no-repeat,
-        -webkit-gradient(
-                linear,
-                left bottom,
-                left top,
-                from(var(--gray-700)),
-                to(var(--gray-700))
-            ) 0 100% no-repeat,
-        -webkit-gradient(
-                linear,
-                left bottom,
-                left top,
-                from(var(--gray-500)),
-                to(var(--gray-500))
-            ) 100% 100% no-repeat;
-    background: linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 0
-            no-repeat,
-        linear-gradient(90deg, var(--gray-700) 0, var(--gray-500)) 0 100%
-            no-repeat,
-        linear-gradient(0deg, var(--gray-700) 0, var(--gray-700)) 0 100%
-            no-repeat,
-        linear-gradient(0deg, var(--gray-500) 0, var(--gray-500)) 100% 100%
-            no-repeat;
-    background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
-}
-input::-webkit-input-placeholder {
-    color: var(--link-text-color);
-}
-select {
-    -webkit-appearance: none;
-    appearance: none;
-    font-family: clear-sans;
-    font-size: 1.3rem;
-    min-width: 166px;
-    max-width: 300px;
-    padding: 5px 8px 5px 0;
-    text-indent: 0;
-    margin: 0 10px 0 0;
-    border: none;
-    border-bottom: 1px solid var(--input-border-color);
-    box-shadow: none;
-    border-radius: 0;
-    color: var(--text-color);
-    background-color: transparent;
-    background-image: linear-gradient(
-            66.6deg,
-            transparent 60%,
-            var(--input-border-color) 40%
-        ),
-        linear-gradient(
-            113.4deg,
-            var(--input-border-color) 40%,
-            transparent 60%
-        );
-    background-position: calc(100% - 4px), 100%;
-    background-size: 4px 6px, 4px 6px;
-    background-repeat: no-repeat;
-    outline: none;
-    display: inline-block;
-    cursor: pointer;
-}
-select option {
-    color: var(--text-color);
-    background-color: var(--mild-background-color);
-}
-select:focus {
-    outline: 0;
-}
-select[disabled] {
-    color: var(--text-color);
-    border-bottom-color: var(--disabled-border-color);
-    opacity: 0.5;
-    cursor: default;
-}
-select[name="enter_view"] {
-    margin: 0;
-    padding: 0 12px 0 0;
-    border: none;
-    min-width: auto;
-}
-select[name="enter_share"] {
-    font-size: 1.1rem;
-    padding: 0;
-    border: none;
-    min-width: 40px;
-    float: right;
-    margin-top: 13px;
-    margin-right: 20px;
-}
-select[name="port_select"] {
-    border: none;
-    min-width: 54px;
-    padding-top: 0;
-    padding-bottom: 0;
-}
-select.narrow {
-    min-width: 76px;
-}
-select.auto {
-    min-width: auto;
-}
-select.slot {
-    min-width: 44rem;
-    max-width: 44rem;
-}
-input.narrow {
-    width: 166px;
-}
-input.trim {
-    width: 76px;
-    min-width: 76px;
-}
-textarea {
-    resize: none;
-}
-#header {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    min-width: 1260px;
-    height: 91px;
-    z-index: 102;
-    margin: 0;
-    color: var(--inverse-text-color);
-    background-color: var(--inverse-background-color);
-    background-size: 100% 90px;
-    background-repeat: no-repeat;
-}
-#header .logo {
-    float: left;
-    margin-left: 10px;
-    color: var(--red-800);
-    text-align: center;
-}
-#header .logo svg {
-    width: 160px;
-    display: block;
-    margin: 25px 0 8px 0;
-}
-#header .block {
-    margin: 0;
-    float: right;
-    text-align: right;
-    background-color: var(--inverse-background-color); /* Opacity of 0.3 */
-    padding: 10px 12px;
-}
-#header .text-left {
-    float: left;
-    text-align: right;
-    padding-right: 5px;
-    border-right: solid medium var(--orange-800);
-}
-#header .text-right {
-    float: right;
-    text-align: left;
-    padding-left: 5px;
-}
-#header .text-right a {
-    color: var(--inverse-text-color);
-}
-#header .text-right #licensetype {
-    font-weight: bold;
-    font-style: italic;
-    margin-right: 4px;
-}
-div.title {
-    margin: 20px 0 32px 0;
-    padding: 8px 10px;
-    clear: both;
-    background-color: var(--mild-background-color);
-    letter-spacing: 1.8px;
-}
-div.title span.left {
-    font-size: 1.4rem;
-}
-div.title span.right {
-    font-size: 1.4rem;
-    padding-top: 2px;
-    padding-right: 10px;
-    float: right;
-}
-div.title span img {
-    padding-right: 4px;
-}
-div.title.shift {
-    margin-top: -30px;
-}
-#menu {
-    position: absolute;
-    top: 90px;
-    left: 0;
-    right: 0;
-    display: grid;
-    grid-template-columns: auto max-content;
-    z-index: 101;
-}
-.nav-tile {
-    height: 4rem;
-    line-height: 4rem;
-    padding: 0;
-    margin: 0;
-    font-size: 1.2rem;
-    letter-spacing: 1.8px;
-    background-color: var(--inverse-background-color);
-    white-space: nowrap;
-    overflow-x: auto;
-    overflow-y: hidden;
-    scrollbar-width: thin;
-}
-.nav-tile::-webkit-scrollbar {
-    height: 8px;
-}
-.nav-tile.right {
-    text-align: right;
-}
-.nav-item,
-.nav-user {
-    position: relative;
-    display: inline-block;
-    text-align: center;
-    margin: 0;
-}
-.nav-item a {
-    min-width: 0;
-}
-.nav-item a span {
-    display: none;
-}
-.nav-item .system {
-    vertical-align: middle;
-    padding-bottom: 2px;
-}
-.nav-item a {
-    color: var(--inverse-text-color);
-    background-color: transparent;
-    text-transform: uppercase;
-    font-weight: bold;
-    display: block;
-    padding: 0 10px;
-}
-.nav-item a {
-    text-decoration: none;
-    text-decoration-skip-ink: auto;
-    -webkit-text-decoration-skip: objects;
-    -webkit-transition: all 0.25s ease-out;
-    transition: all 0.25s ease-out;
-}
-.nav-item:after,
-.nav-user.show:after {
-    border-radius: 4px;
-    display: block;
-    background-color: transparent;
-    content: "";
-    width: 32px;
-    height: 2px;
-    bottom: 8px;
-    position: absolute;
-    left: 50%;
-    margin-left: -16px;
-    -webkit-transition: all 0.25s ease-in-out;
-    transition: all 0.25s ease-in-out;
-    pointer-events: none;
-}
-.nav-item:focus:after,
-.nav-item:hover:after,
-.nav-user.show:hover:after {
-    background-color: var(--orange-800);
-}
-.nav-item.active:after {
-    background-color: var(--background-color);
-}
-.nav-user a {
-    color: var(--inverse-text-color);
-    background-color: transparent;
-    display: block;
-    padding: 0 10px;
-}
-.nav-user .system {
-    vertical-align: middle;
-    padding-bottom: 2px;
-}
-#clear {
-    clear: both;
-}
-#footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    color: var(--text-color);
-    background-color: var(--mild-background-color);
-    padding: 5px 0;
-    width: 100%;
-    height: 1.6rem;
-    line-height: 1.6rem;
-    text-align: center;
-    /* TODO: Use variables for z-index to have more control */
-    z-index: 10000;
-}
-#statusraid {
-    float: left;
-    padding-left: 10px;
-}
-#countdown {
-    margin: 0 auto;
-}
-#copyright {
-    font-family: bitstream;
-    font-size: 1.1rem;
-    float: right;
-    padding-right: 10px;
-}
-.green {
-    color: var(--green-800);
-    padding-left: 5px;
-    padding-right: 5px;
-}
-.red {
-    color: var(--red-600);
-    padding-left: 5px;
-    padding-right: 5px;
-}
-.orange {
-    color: var(--orange-300);
-    padding-left: 5px;
-    padding-right: 5px;
-}
-.blue {
-    color: var(--blue-800);
-    padding-left: 5px;
-    padding-right: 5px;
-}
-.green-text,
-.passed {
-    color: var(--green-800);
-}
-.red-text,
-.failed {
-    color: var(--red-600);
-}
-.orange-text,
-.warning {
-    color: var(--orange-300);
-}
-.blue-text {
-    color: var(--blue-800);
-}
-.grey-text {
-    color: var(--gray-500);
-}
-.green-orb {
-    color: var(--green-200);
-}
-.grey-orb {
-    color: var(--gray-300);
-}
-.blue-orb {
-    color: var(--blue-700);
-}
-.yellow-orb {
-    color: var(--orange-200);
-}
-.red-orb {
-    color: var(--red-500);
-}
-.usage-bar {
-    float: left;
-    height: 2rem;
-    line-height: 2rem;
-    width: 14rem;
-    padding: 1px 1px 1px 2px;
-    margin: 8px 12px;
-    border-radius: 3px;
-    background-color: var(--usage-bar-background-color);
-    box-shadow: 0 1px 0 var(--gray-400), inset 0 1px 0 var(--gray-600);
-}
-.usage-bar > span {
-    display: block;
-    height: 100%;
-    text-align: right;
-    border-radius: 2px;
-    color: var(--inverse-text-color);
-    background-color: var(--usage-bar-background-color);
-    box-shadow: inset 0 1px 0 var(--gray-000); /* Opacity of 0.5 */
-}
-.usage-disk {
-    position: relative;
-    height: 1.8rem;
-    background-color: var(--usage-disk-background-color);
-    margin: 0;
-}
-.usage-disk > span:first-child {
-    position: absolute;
-    left: 0;
-    margin: 0 !important;
-    height: 1.8rem;
-    background-color: var(--gray-400);
-}
-.usage-disk > span:last-child {
-    position: relative;
-    padding-right: 4px;
-    z-index: 1;
-}
-.usage-disk.sys {
-    height: 12px;
-    margin: -15px 20px 0 44px;
-}
-.usage-disk.sys > span:first-child {
-    height: 12px;
-    padding: 0;
-}
-.usage-disk.sys.none {
-    background-color: transparent;
-}
-.usage-disk.mm {
-    height: 3px;
-    margin: 5px 20px 0 0;
-}
-.usage-disk.mm > span:first-child {
-    height: 3px;
-}
-.notice {
-    background: var(--yellow-100) url(../images/notice.png) no-repeat;
-    background-position: 60px 50%;
-    color: var(--text-color);
-    font-size: 1.4rem;
-    text-align: left;
-    padding: 15px 0 15px 130px;
-    display: block;
-    height: 7rem;
-    line-height: 7rem;
-    border-top: 2px solid var(--yellow-500);
-    border-bottom: 2px solid var(--yellow-500);
-}
-.notice.shift {
-    margin-top: 160px;
-}
-.greenbar {
-    background: -webkit-gradient(
-        linear,
-        left top,
-        right top,
-        from(var(--green-900)),
-        to(var(--green-500))
-    );
-    background: linear-gradient(90deg, var(--green-900) 0, var(--green-500));
-}
-.orangebar {
-    background: -webkit-gradient(
-        linear,
-        left top,
-        right top,
-        from(var(--orange-400)),
-        to(var(--orange-400))
-    );
-    background: linear-gradient(90deg, var(--orange-400) 0, var(--orange-400));
-}
-.redbar {
-    background: -webkit-gradient(
-        linear,
-        left top,
-        right top,
-        from(var(--red-900)),
-        to(var(--red-700))
-    );
-    background: linear-gradient(90deg, var(--red-900) 0, var(--red-700));
-}
-.graybar {
-    background: -webkit-gradient(
-        linear,
-        left top,
-        right top,
-        from(var(--gray-400)),
-        to(var(--gray-200))
-    );
-    background: linear-gradient(90deg, var(--gray-400) 0, var(--gray-200));
-}
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-    border-style: hidden;
-    margin: -30px 0 0 0;
-    width: 100%;
-    background-color: var(--background-color);
-}
-table thead td {
-    padding: 7px 0;
-}
-table tbody td {
-    padding: 5px 0;
-}
-table tbody tr.tr_last {
-    background-color: var(--background-color);
-    border-top: 1px solid var(--table-border-color);
-}
-table td.cpu-info {
-    border: 1px solid var(--table-border-color);
-}
-table.disk_status {
-    white-space: nowrap;
-}
-table.disk_status td span {
-    margin-left: 10px;
-}
-table.disk_status thead tr:first-child td {
-    font-size: 1.1rem;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    background-color: var(--usage-disk-background-color);
-}
-table.disk_status thead tr:last-child {
-    border-bottom: 1px solid var(--table-border-color);
-}
-table.disk_status tr > td {
-    width: 10%;
-    padding-left: 12px;
-    padding-right: 0;
-    white-space: nowrap;
-}
-table.disk_status tr > td + td {
-    width: auto;
-}
-table.disk_status tr > td + td + td {
-    width: 6.5%;
-    text-align: center;
-    padding-left: 4px;
-    padding-right: 8px;
-}
-table.disk_status tr > td + td + td + td {
-    text-align: right;
-    padding-left: 0;
-    padding-right: 12px;
-}
-table.disk_status tbody tr:nth-child(even) {
-    background-color: var(--background-color);
-}
-table.disk_status tbody tr:not(.tr_last):hover td {
-    background-color: var(--inverse-background-color); /* Opacity of 0.1 */
-}
-table.disk_status.stats tr > td + td {
-    text-align: left;
-    padding-left: 0;
-    padding-right: 12px;
-}
-table.array_status td {
-    padding: 4px 0;
-}
-table.array_status tr > td {
-    text-align: left;
-    white-space: nowrap;
-    padding-left: 12px;
-    width: 30%;
-}
-table.array_status tr > td + td {
-    padding-left: 2px;
-    width: 20%;
-}
-table.array_status tr > td + td + td {
-    width: auto;
-}
-table.array_status td.line {
-    border-top: 1px solid var(--table-border-color);
-}
-table.array_status.noshift {
-    margin-top: 0;
-}
-table.settings {
-    margin: 0;
-    padding: 0;
-    background-color: transparent;
-}
-table.settings td:first-child {
-    width: 35%;
-    padding: 12px;
-}
-table.settings td + td {
-    padding-left: 8px;
-}
-table.settings.shifted {
-    padding: 0;
-    margin-left: 0;
-    margin-top: 0;
-}
-table.settings.shifted td {
-    padding-left: 0;
-}
-table.access_list {
-    border-spacing: 0;
-    margin-top: 10px;
-    border: none;
-}
-table.access_list tr:first-child td {
-    font-size: 1.1rem;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    vertical-align: middle;
-    text-align: left;
-    border: 1px solid var(--table-border-color);
-    border-bottom: 1px solid var(--table-border-color);
-    background-color: var(--usage-disk-background-color);
-}
-table.access_list td:first-child {
-    font-weight: normal;
-    width: 35%;
-    padding-left: 12px;
-}
-table.access_list tr:first-child td:first-child {
-    font-weight: normal;
-}
-table.access_list tr > td + td {
-    white-space: nowrap;
-}
-table.share_status {
-    white-space: nowrap;
-}
-table.share_status thead tr:first-child td {
-    font-size: 1.1rem;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    background-color: var(--mild-background-color);
-}
-table.share_status tr > td {
-    text-align: left;
-    padding-left: 12px;
-}
-table.share_status tr > td + td {
-    padding-left: 0;
-}
-table.share_status tbody tr:nth-child(even) {
-    background-color: var(--background-color);
-}
-table.share_status:not(.dashboard) tbody tr:hover td {
-    background-color: var(--inverse-background-color); /* Opacity of 0.1 */
-}
-table.share_status tbody tr.alert {
-    color: var(--red-600);
-}
-table.share_status tbody tr.warn {
-    color: var(--orange-300);
-}
-table.share_status.fixed tr > td + td {
-    min-width: 39px;
-    font-size: 1.1rem;
-    text-align: center;
-    padding: 0;
-}
-table.share_status.table {
-    margin-top: 36px;
-}
-table.share_status.table tr > td {
-    width: 50%;
-}
-table.share_status.dashboard {
-    margin: 0;
-    border: 1px solid var(--border-color);
-}
-table.share_status.dashboard tbody {
-    border: 1px solid var(--border-color);
-}
-table.share_status.dashboard tr:first-child > td {
-    height: 3.6rem;
-    padding-top: 12px;
-    font-size: 1.6rem;
-    font-weight: bold;
-    letter-spacing: 1.8px;
-    text-transform: none;
-    vertical-align: top;
-}
-table.share_status.dashboard tr:nth-child(even) {
-    background-color: transparent;
-}
-table.share_status.dashboard tr:last-child > td {
-    padding-bottom: 20px;
-}
-table.share_status.dashboard tr.last > td {
-    padding-bottom: 20px;
-}
-table.share_status.dashboard tr.header td {
-    padding-bottom: 10px;
-}
-table.share_status.dashboard td {
-    padding: 3px 10px;
-}
-table.share_status.dashboard td.vpn {
-    font-size: 1.1rem;
-    font-weight: bold;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-}
-table.share_status.dashboard td div.section {
-    display: inline-block;
-    vertical-align: top;
-    margin-left: 4px;
-    font-size: 1.2rem;
-    font-weight: bold;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-}
-table.share_status.dashboard td div.section span {
-    font-weight: normal;
-    text-transform: none;
-    letter-spacing: 0;
-    white-space: normal;
-}
-table.share_status.dashboard td span.info {
-    float: right;
-    margin-right: 20px;
-    font-size: 1.2rem;
-    font-weight: normal;
-    text-transform: none;
-    letter-spacing: 0;
-}
-table.share_status.dashboard td span.info.title {
-    font-weight: bold;
-}
-table.share_status.dashboard td span.load {
-    display: inline-block;
-    width: 38px;
-    text-align: right;
-}
-table.share_status.dashboard td span.finish {
-    float: right;
-    margin-right: 24px;
-}
-table.share_status.dashboard i.control {
-    float: right;
-    font-size: 1.4rem !important;
-    margin: 0 3px 0 0;
-    cursor: pointer;
-    background-color: var(--inverse-background-color); /* Opacity of 0.1 */
-    padding: 2px;
-}
-[name="arrayOps"] {
-    margin-top: 12px;
-}
-span.error {
-    color: var(--red-600);
-    background-color: var(--red-300);
-    display: block;
-    width: 100%;
-}
-span.warn {
-    color: var(--orange-300);
-    background-color: var(--yellow-200);
-    display: block;
-    width: 100%;
-}
-span.system {
-    color: var(--blue-700);
-    background-color: var(--blue-300);
-    display: block;
-    width: 100%;
-}
-span.array {
-    color: var(--green-800);
-    background-color: var(--green-100);
-    display: block;
-    width: 100%;
-}
-span.login {
-    color: var(--orange-900);
-    background-color: var(--red-100);
-    display: block;
-    width: 100%;
-}
-span.lite {
-    background-color: var(--background-color);
-}
-span.label {
-    font-size: 1.2rem;
-    padding: 2px 0 2px 6px;
-    margin-right: 6px;
-    border-radius: 4px;
-    display: inline;
-    width: auto;
-    vertical-align: middle;
-}
-span.cpu-speed {
-    display: block;
-    color: var(--blue-900);
-}
-span.status {
-    float: right;
-    font-size: 1.4rem;
-    margin-top: 30px;
-    padding-right: 8px;
-    letter-spacing: 1.8px;
-}
-span.status.vhshift {
-    margin-top: 0;
-    margin-right: -9px;
-}
-span.status.vshift {
-    margin-top: -16px;
-}
-span.status.hshift {
-    margin-right: -20px;
-}
-span.diskinfo {
-    float: left;
-    clear: both;
-    margin-top: 5px;
-    padding-left: 10px;
-}
-span.bitstream {
-    font-family: bitstream;
-    font-size: 1.1rem;
-}
-span.ucfirst {
-    text-transform: capitalize;
-}
-span.strong {
-    font-weight: bold;
-}
-span.big {
-    font-size: 1.4rem;
-}
-span.small {
-    font-size: 1.2rem;
-}
-span.outer {
-    margin-bottom: 20px;
-    margin-right: 0;
-}
-span.outer.solid {
-    background-color: var(--background-color);
-}
-span.hand {
-    cursor: pointer;
-}
-span.outer.started > img,
-span.outer.started > i.img {
-    opacity: 1;
-}
-span.outer.stopped > img,
-span.outer.stopped > i.img {
-    opacity: 0.3;
-}
-span.outer.paused > img,
-span.outer.paused > i.img {
-    opacity: 0.6;
-}
-span.inner {
-    display: inline-block;
-    vertical-align: top;
-}
-span.state {
-    font-size: 1.1rem;
-    margin-left: 7px;
-}
-i.padlock {
-    margin-right: 8px;
-    cursor: default;
-    vertical-align: middle;
-}
-i.nolock {
-    visibility: hidden;
-    margin-right: 8px;
-    vertical-align: middle;
-}
-i.lock {
-    margin-left: 8px;
-    cursor: default;
-    vertical-align: middle;
-}
-i.orb {
-    font-size: 1.1rem;
-    margin: 0 8px 0 3px;
-}
-img.img,
-i.img {
-    width: 32px;
-    height: 32px;
-    margin-right: 10px;
-}
-img.icon {
-    margin: -3px 4px 0 0;
-}
-img.list {
-    width: auto;
-    max-width: 32px;
-    height: 32px;
-}
-i.list {
-    font-size: 32px;
-}
-a.list {
-    text-decoration: none;
-    color: inherit;
-}
-div.content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    padding-bottom: 30px;
-    z-index: -1;
-    clear: both;
-}
-div.content.shift {
-    margin-top: 1px;
-}
-label + .content {
-    margin-top: 86px;
-}
-div.tabs {
-    position: relative;
-    margin: 130px 0 0 0;
-}
-div.tab {
-    float: left;
-    margin-top: 30px;
-}
-div.tab input[id^="tab"] {
-    display: none;
-}
-div.tab [type="radio"] + label:hover {
-    background-color: transparent;
-    border: 1px solid var(--orange-500);
-    border-bottom: none;
-    cursor: pointer;
-    opacity: 1;
-}
-div.tab [type="radio"]:checked + label {
-    cursor: default;
-    background-color: transparent;
-    border: 1px solid var(--orange-500);
-    border-bottom: none;
-    opacity: 1;
-}
-div.tab [type="radio"] + label ~ .content {
-    display: none;
-}
-div.tab [type="radio"]:checked + label ~ .content {
-    display: inline;
-}
-div.tab [type="radio"] + label {
-    position: relative;
-    font-size: 1.4rem;
-    letter-spacing: 1.8px;
-    padding: 4px 10px;
-    margin-right: 2px;
-    border-top-left-radius: 6px;
-    border-top-right-radius: 6px;
-    border: 1px solid var(--disabled-input-border-color);
-    border-bottom: none;
-    background-color: var(--radio-background-color);
-    opacity: 0.5;
-}
-div.tab [type="radio"] + label img {
-    padding-right: 4px;
-}
-div.Panel {
-    text-align: center;
-    float: left;
-    margin: 0 30px 30px 12px;
-    height: 8rem;
-}
-div.Panel a {
-    text-decoration: none;
-}
-div.Panel span {
-    height: 42px;
-    display: block;
-}
-div.Panel:hover .PanelText {
-    text-decoration: underline;
-}
-div.Panel img.PanelImg {
-    width: auto;
-    max-width: 32px;
-    height: 32px;
-}
-div.Panel i.PanelIcon {
-    font-size: 32px;
-    color: var(--text-color);
-}
-div.user-list {
-    float: left;
-    padding: 10px;
-    margin-right: 10px;
-    margin-bottom: 24px;
-    border: 1px solid var(--border-color);
-    border-radius: 5px;
-    line-height: 2rem;
-    height: 10rem;
-    width: 10rem;
-    background-color: var(--border-color);
-}
-div.user-list img {
-    width: auto;
-    max-width: 48px;
-    height: 48px;
-    margin-bottom: 16px;
-}
-div.up {
-    margin-top: -30px;
-    border: 1px solid var(--border-color);
-    padding: 4px 6px;
-    overflow: auto;
-}
-div.spinner {
-    margin: 48px auto;
-    text-align: center;
-}
-div.spinner.fixed {
-    display: none;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    margin-top: -16px;
-    margin-left: -64px;
-    z-index: 10000;
-}
-div.spinner .unraid_mark {
-    height: 64px;
-}
-div.spinner .unraid_mark_2,
-div .unraid_mark_4 {
-    animation: mark_2 1.5s ease infinite;
-}
-div.spinner .unraid_mark_3 {
-    animation: mark_3 1.5s ease infinite;
-}
-div.spinner .unraid_mark_6,
-div .unraid_mark_8 {
-    animation: mark_6 1.5s ease infinite;
-}
-div.spinner .unraid_mark_7 {
-    animation: mark_7 1.5s ease infinite;
-}
-div.domain {
-    margin-top: -20px;
-}
-@keyframes mark_2 {
-    50% {
-        transform: translateY(-40px);
-    }
-    100% {
-        transform: translateY(0px);
-    }
-}
-@keyframes mark_3 {
-    50% {
-        transform: translateY(-62px);
-    }
-    100% {
-        transform: translateY(0px);
-    }
-}
-@keyframes mark_6 {
-    50% {
-        transform: translateY(40px);
-    }
-    100% {
-        transform: translateY(0px);
-    }
-}
-@keyframes mark_7 {
-    50% {
-        transform: translateY(62px);
-    }
-    100% {
-        transform: translateY(0px);
-    }
-}
-pre.up {
-    margin-top: -30px;
-}
-pre {
-    border: 1px solid var(--border-color);
-    font-family: bitstream;
-    font-size: 1.3rem;
-    line-height: 1.8rem;
-    padding: 4px 6px;
-    overflow: auto;
-}
-iframe#progressFrame {
-    position: fixed;
-    bottom: 32px;
-    left: 0;
-    margin: 0;
-    padding: 8px 8px 0 8px;
-    width: 100%;
-    height: 1.2rem;
-    line-height: 1.2rem;
-    border-style: none;
-    overflow: hidden;
-    font-family: bitstream;
-    font-size: 1.1rem;
-    color: var(--alt-text-color);
-    white-space: nowrap;
-    z-index: -10;
-}
-dl {
-    margin: 0;
-    padding-left: 12px;
-    line-height: 2.6rem;
-}
-dt {
-    clear: left;
-    float: left;
-    width: 35%;
-    font-weight: normal;
-}
-dd {
-    margin-bottom: 12px;
-    white-space: nowrap;
-}
-dd p {
-    margin: 0 0 4px 0;
-}
-dd blockquote {
-    padding-left: 0;
-}
-blockquote {
-    width: 90%;
-    margin: 10px auto;
-    text-align: left;
-    padding: 4px 20px;
-    border-top: 2px solid var(--blue-200);
-    border-bottom: 2px solid var(--blue-200);
-    color: var(--blockquote-text-color);
-    background-color: var(--blue-100);
-}
-blockquote.ontop {
-    margin-top: -20px;
-    margin-bottom: 46px;
-}
-blockquote a {
-    color: var(--orange-500);
-    font-weight: 600;
-}
-blockquote a:hover,
-blockquote a:focus {
-    color: var(--orange-800);
-}
-label.checkbox {
-    display: block;
-    position: relative;
-    padding-left: 28px;
-    margin: 3px 0;
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-label.checkbox input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-}
-span.checkmark {
-    position: absolute;
-    top: 0;
-    left: 6px;
-    height: 14px;
-    width: 14px;
-    background-color: var(--checkbox-color);
-    border-radius: 100%;
-}
-label.checkbox:hover input ~ .checkmark {
-    background-color: var(--checkbox-hover-color);
-}
-label.checkbox input:checked ~ .checkmark {
-    background-color: var(--brand-orange);
-}
-label.checkbox input:disabled ~ .checkmark {
-    opacity: 0.5;
-}
-a.bannerDismiss {
-    float: right;
-    cursor: pointer;
-    text-decoration: none;
-    margin-right: 1rem;
-}
-.bannerDismiss::before {
-    content: "\e92f";
-    font-family: Unraid;
-    color: var(--orange-300);
-}
-a.bannerInfo {
-    cursor: pointer;
-    text-decoration: none;
-}
-.bannerInfo::before {
-    content: "\f05a";
-    font-family: fontAwesome;
-    color: var(--orange-300);
-}
-::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-    background: transparent;
-}
-::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-color);
-    border-radius: 10px;
-}
-::-webkit-scrollbar-corner {
-    background: var(--scrollbar-color);
-    border-radius: 10px;
-}
-::-webkit-scrollbar-thumb:hover {
-    background: var(--scrollbar-hover-color);
-}