:root {
    --main-color: #303f9f;
    /* This is the main color, used for all the links and icons */
    --highlight-color: #666ad1;
    /*This color will be used to emphasise stuff, like underlines */
    --main-color-dark: #001970;
    /* This is a high contrast version of the main color, fo add a visusl difference/ borders */
    --text-color: #444444;
    --alert-color: #d32f2f;
    --fine-color: #388e3c;
    --text-color-negative: #001970;
    /* This is the color of all the texts/ links that appear on elements that have background colors. CHange to white if you use a solid Background */
    --header-color: #f1f1f1;
    /* This is the color for all the headers, change this to the same value of main-color if you want a colorfull UI */
    --header-color-highlight: #dedddd;
    /* This is the darker header color, for activ/ hover states and so on. Change to main color dark value if you want a colorfull UI */
    --logo-hue: 0;
    /* change this to '1' on solid backgrounds */
}
input[type=button],
input[type=reset],
input[type=submit],
button,
a.button {
    border: 1px solid var(--main-color-dark);
    background: var(--main-color-dark);
    border-radius: 2px;
    color: var(--header-color);
    /* Change this if you use a light color as main color */
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
input:hover[type=button],
input:hover[type=reset],
input:hover[type=submit],
button:hover,
a.button:hover {
    border-color: var(--main-color);
    background: var(--main-color);
}
#menu {
    border-radius: 0;
    background: var(--header-color);
}
#nav-block #nav-item.active {
    background: var(--header-color-highlight);
    /* change this if you want more color cues */
    border-bottom: thick solid var(--highlight-color);
    border-right: 1px solid var(--header-color);
    border-radius: 0px;
}
#nav-block #nav-item {
    border-right: 1px solid var(--header-color);
}
#header.image {
    background-image: none;
    background: var(--header-color);
}
#header .block {
    border-radius: 2px;
}
#nav-block #nav-item:hover {
    background: var(--header-color-highlight);
    /*change this if you want more color cues */
    border-bottom: thick solid var(--header-color);
    border-radius: 0;
}
#nav-block #nav-item a:hover {
    color: var(--text-color-negative);
}
#nav-block #nav-item {
    border-right: 1px solid var(--header-color);
}
#nav-block #nav-item a {
    color: var(--text-color-negative);
}
#nav-block #nav-item.active:hover a,
#nav-block #nav-item.active a {
    color: var(--text-color-negative);
}
#header.image {
    border-radius: 0;
}
#header .logo a {
    color: var(--text-color-negative);
}
.logo img {
    filter: grayscale(1) invert(var(--logo-hue));
}
#header .text-left {
    border-right: solid medium var(--highlight-color);
}
#template {
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
}
#title,
table.share_status thead tr:first-child td,
table.disk_status thead tr:first-child td,
table.tablesorter thead tr th,
table.tablesorter thead tr .tablesorter-headerAsc,
table.tablesorter thead tr .tablesorter-headerDesc {
    border-radius: 0;
    background: var(--header-color);
    color: var(--text-color-negative);
    border: 1px;
}
.switch-button-label {
    color: var(--text-color-negative) !important;
}
.switch-button-background {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid transparent;
}
.switch-button-button {
    border-radius: 10px;
    background: #F1F1F1;
    border: 1px solid #F1F1F1;
}
#header .block {
    background-color: transparent;
    color: var(--text-color-negative);
}
.blue-text {
    color: var(--text-color-negative);
}
.usage-bar,
.usage-disk {
    background-color: var(--header-color-highlight);
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}
.usage-bar > span,
.usage-disk.sys > span,
.usage-disk.all > span,
.usage-disk > span {
    background-color: var(--highlight-color);
    border-radius: 0;
    box-shadow: none;
}
.stopped {
    color: var(--alert-color);
}
.started {
    color: var(--fine-color);
}
.update {
    color: var(--highlight-color);
}
.back_to_top {
    color: var(--main-color);
}
select {
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: var(--text-color-negative);
}
#smart-parity img,
#smart-disk1 img,
#smart-disk2 img,
#smart-disk3 img,
#smart-disk4 img,
#smart-disk5 img,
#smart-disk6 img,
#smart-disk7 img,
#smart-disk8 img,
#smart-disk9 img,
#smart-disk10 img,
#smart-cache img,
#smart-sda img,
#smart-sdb img,
#smart-sdc img,
#smart-sdd img,
#smart-sde img,
#smart-sdf img,
#smart-sdg img,
#smart-sdh img,
#smart-sdi img,
#smart-sdj img,
#smart-sdk img,
#smart-sdl img,
#smart-sdm img,
#smart-sdn img,
#smart-sdo img,
#smart-sdp img,
#smart-sdq img,
#smart-sdr img,
#smart-sds img,
#smart-sdt img,
#smart-sdu img,
#smart-sdv img,
#smart-sdw img,
#smart-sdx img,
#smart-sdy img,
#smart-sdz img,
#title span img {
    filter: saturate(0);
}
.status a {
    color: var(--text-color-negative);
}
div.user-list {
    border-radius: 2px;
    border: none;
    background: var(--header-color);
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
}
div.user-list a {
    color: var(--text-color-negative);
}
div.user-list img {
    filter: contrast(0%) brightness(10);
}
div.tab [type=radio]:checked + label {
    color: var(--text-color-negative);
    border-radius: 0;
    border: none;
    background: var(--header-color-highlight);
}
div.tab [type=radio] + label {
    color: var(--text-color-negative);
    border-radius: 0;
    border: none;
    background: var(--header-color);
    opacity: 1;
}
div.tab [type=radio] + label:hover {
    background: var(--header-color-highlight);
    color: var(--text-color-negative);
}
table {
    margin-top: -22px;
}
table.share_status.fixed {
    border: 1px solid var(--header-color);
}
table.tablesorter.shift {
    margin-top: -23px;
}
.tablesorter .fa {
    color: var(--text-color-negative);
}
.switch-button-background.checked {
    background: var(--main-color-dark) !important;
}
.switch-button-background.checked {
    border: 1px solid var(--main-color-dark);
}
.searchSubmit {
    border-radius: 0;
    background: var(--main-color-dark) !important;
}
.searchSubmit a {
    box-shadow: none;
}
#searchFilter input {
    background: transparent;
    color: var(--text-color-negative);
    box-shadow: none;
    border: none;
}
#searchFilter input::placeholder {
    color: var(--text-color-negative);
    opacity: 1;
}
#searchFilter button {
    background: var(--highlight-color) !important;
    border-bottom: 1px solid var(--highlight-color);
    box-shadow: none;
}
#searchFilter button:hover {
    background: var(--main-color-dark) !important;
}
.ca_template_icon {
    border-radius: 0;
    background: var(--header-color-highlight);
    color: var(--text-color-negative);
}
.ca_template {
    border-radius: 0;
}
.ca_applicationName,
.ca_repository,
.ca_author,
.ca_wide_info .fa,
.unpinned {
    color: var(--text-color-negative);
}
.ca_tooltip img {
    filter: grayscale(1);
}
.ca_category {
    color: var(--main-color);
}
center b {
    color: var(--main-color) !important;
}
table.share_status.dash,
table.share_status.dash.line tbody td {
    border: none;
}
table.disk_status select {
    color: var(--text-color);
}
.docker_readmore .fa,
.readmore-js-toggle .fa {
    color: var(--main-color);
}
dd select {
    color: var(--text-color) !important;
}
i.fa.iconstatus.fa-play.started {
    color: var(--fine-color) !important;
}
i.fa.iconstatus.fa-square.stopped {
    color: var(--alert-color) !Important;
}