ArkBot/WebApp/src/styles.css
:root {
    --light-theme-bg: #fff;
    --light-theme: #000;

    --light-theme-l1-bg: #fff;
    --light-theme-l1: #000;
    --light-theme-l2-bg: #f1f1f1;
    --light-theme-l2: #000;
    --light-theme-d1-bg: #2196F3;
    --light-theme-d1: #fff;
    --light-theme-c1-bg: #4CAF50;
    --light-theme-c1: #fff;
    --light-theme-e1-bg: #f44336;
    --light-theme-e1: #fff;

    --light-theme-l2-even-bg: #f5f5f5;
    --light-theme-l2-even: #000;
    --light-theme-lighter-c1-bg: #CEEDCE;
    --light-theme-l1-hover-bg: #ccc;
    --light-theme-l1-hover: #000;
    --light-theme-l2-hover-bg: #ccc;
    --light-theme-l2-hover: #000;

    --light-theme-text-l1-light: darkgray;
    --light-theme-text-d1: #2196F3;
    --light-theme-text-c1: #4CAF50;

    --light-border-theme: #ddd;
    --light-divider-theme: silver;


    --dark-theme-bg: #141519;
    --dark-theme: #fff;

    --dark-theme-l1-bg: #141519;
    --dark-theme-l1: #fff;
    --dark-theme-l2-bg: #2A2C36;
    --dark-theme-l2: #fff;
    --dark-theme-d1-bg: #114F7F;
    --dark-theme-d1: #fff;
    --dark-theme-c1-bg: #114F7F;
    --dark-theme-c1: #fff;
    --dark-theme-e1-bg: #f44336;
    --dark-theme-e1: #fff;

    --dark-theme-l2-even-bg: #22232B;
    --dark-theme-l2-even: #fff;
    --dark-theme-lighter-c1-bg: #58A6DD;
    --dark-theme-l1-hover-bg: #ccc;
    --dark-theme-l1-hover: #fff;
    --dark-theme-l2-hover-bg: #ccc;
    --dark-theme-l2-hover: #fff;

    --dark-theme-text-l1-light: darkgray;
    --dark-theme-text-d1: #fff;
    --dark-theme-text-c1: #114F7F;

    --dark-border-theme: #2B2D33;
    --dark-divider-theme: silver;
}

body.light { background-color: var(--light-theme-bg) !important; color: var(--light-theme); }
.light .theme-l1 {color:var(--light-theme-l1) !important; background-color:var(--light-theme-l1-bg) !important}
.light .theme-l2 {color:var(--light-theme-l2) !important; background-color:var(--light-theme-l2-bg) !important}
.light .theme-d1 {color:var(--light-theme-d1) !important; background-color:var(--light-theme-d1-bg) !important}
.light .theme-c1 {color:var(--light-theme-c1) !important; background-color:var(--light-theme-c1-bg) !important}
.light .theme-e1 {color:var(--light-theme-e1) !important; background-color:var(--light-theme-e1-bg) !important}
.light .even .theme-l2 {color:var(--light-theme-l1) !important; background-color:var(--light-theme-l1-bg) !important}
.light .theme-lighter-c1-bg {background-color:var(--light-theme-lighter-c1-bg) !important}
.light .theme-l1.theme-hover:hover {color:var(--light-theme-l1-hover) !important; background-color:var(--light-theme-l1-hover-bg) !important}
.light .theme-l2.theme-hover:hover {color:var(--light-theme-l2-hover) !important; background-color:var(--light-theme-l2-hover-bg) !important}
.light .theme-text-l1-light {color:var(--light-theme-text-l1-light) !important}
.light .theme-text-d1 {color:var(--light-theme-text-d1) !important}
.light .theme-text-c1 {color:var(--light-theme-text-c1) !important}
.light .border-theme {border-color:var(--light-border-theme) !important}
.light a:hover { color:var(--light-theme-text-d1); }
.light .theme-d1 a:hover, .light .theme-c1 a:hover { color:var(--light-theme-d1); }
.light .breadcrumb ul li a { color: var(--light-theme-text-d1) !important}
.light .breadcrumb ul li { color: var(--light-theme-text-l1-light); }
.light .breadcrumb ul li+li:before { color: var(--light-divider-theme); }
.light .w3-bordered tr, .light .w3-table-all tr { border-bottom:1px solid var(--light-border-theme); }
.light .w3-striped tbody tr:nth-child(even), .light .w3-table-all tr:nth-child(even) { background-color:var(--light-theme-l2-even-bg); color: var(--light-theme-l2-even); }
.light .w3-striped tbody tr:nth-child(odd), .light .w3-table-all tr:nth-child(odd) { background-color:var(--light-theme-l1-bg); color: var(--light-theme-l1); }
.light .w3-ul li {border-bottom:1px solid var(--light-border-theme)}

body.dark { background-color: var(--dark-theme-bg) !important; color: var(--dark-theme); }
.dark .theme-l1 {color:var(--dark-theme-l1) !important; background-color:var(--dark-theme-l1-bg) !important}
.dark .theme-l2 {color:var(--dark-theme-l2) !important; background-color:var(--dark-theme-l2-bg) !important}
.dark .theme-d1 {color:var(--dark-theme-d1) !important; background-color:var(--dark-theme-d1-bg) !important}
.dark .theme-c1 {color:var(--dark-theme-c1) !important; background-color:var(--dark-theme-c1-bg) !important}
.dark .theme-e1 {color:var(--dark-theme-e1) !important; background-color:var(--dark-theme-e1-bg) !important}
.dark .even .theme-l2 {color:var(--dark-theme-l1) !important; background-color:var(--dark-theme-l1-bg) !important}
.dark .theme-lighter-c1-bg {background-color:var(--dark-theme-lighter-c1-bg) !important}
.dark .theme-l1.theme-hover:hover {color:var(--dark-theme-l1-hover) !important; background-color:var(--dark-theme-l1-hover-bg) !important}
.dark .theme-l2.theme-hover:hover {color:var(--dark-theme-l2-hover) !important; background-color:var(--dark-theme-l2-hover-bg) !important}
.dark .theme-text-l1-light {color:var(--dark-theme-text-l1-light) !important}
.dark .theme-text-d1 {color:var(--dark-theme-text-d1) !important}
.dark .theme-text-c1 {color:var(--dark-theme-text-c1) !important}
.dark .border-theme {border-color:var(--dark-border-theme) !important}
.dark a:hover { color:var(--dark-theme-text-d1); }
.dark .theme-d1 a:hover, .dark .theme-c1 a:hover { color:var(--dark-theme-d1); }
.dark .breadcrumb ul li a { color: var(--dark-theme-text-d1) !important}
.dark .breadcrumb ul li { color: var(--dark-theme-text-l1-light); }
.dark .breadcrumb ul li+li:before { color: var(--dark-divider-theme); }
.dark .w3-bordered tr, .dark .w3-table-all tr { border-bottom:1px solid var(--dark-border-theme); }
.dark .w3-striped tbody tr:nth-child(even), .dark .w3-table-all tr:nth-child(even) { background-color:var(--dark-theme-l2-even-bg); color: var(--dark-theme-l2-even); }
.dark .w3-striped tbody tr:nth-child(odd), .dark .w3-table-all tr:nth-child(odd) { background-color:var(--dark-theme-l1-bg); color: var(--dark-theme-l1); }
.dark .w3-ul li {border-bottom:1px solid var(--dark-border-theme)}

.dark .w3-ul li:last-child{border-bottom: none;}
.dark .w3-card-4 {box-shadow:none;}

a:hover { opacity: 0.60; }

body { margin-bottom: 2em;}

.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .material-icons {
    position: absolute;
    padding: 10px;
}

/* align icon */
.left-addon .material-icons  { left:  0px;}
.right-addon .material-icons { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

/* Style the list */
.breadcrumb ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

/* Display list items side by side */
.breadcrumb ul li {
    display: inline;
}

/* Add a slash symbol (/) before/behind each list item */
.breadcrumb ul li+li:before {
    padding: 8px;
    content: "/\00a0";
}

/* Add a color to all links inside the list */
.breadcrumb ul li a {
    text-decoration: none;
    cursor: pointer;
}

h2.logo {
    display:block;
  	margin-left:auto;
    margin-right:auto;
    margin-top: 5px;
    margin-bottom: 10px; /* -10px (with menu headers enabled) */
    height:200px; 
    width:200px; 
    text-indent:-99999em;
    overflow:hidden;
    background-size: contain !important;
}

.dark h2.logo { background:url(/assets/logodark.png) 0 0 no-repeat; }
.light h2.logo { background:url(/assets/logolight.png) 0 0 no-repeat; }

.menucontainer + #page { margin-left: 220px; }
#menu.w3-sidebar { width: 220px; padding-bottom: 10px; }
#menu .w3-cell { display: inline-block; width: 100%; text-align: left; }
#menucontent.hide { display: block; }
#menubtn { display: none; }

/* experiment with removing menu headers */
#menu .menu-header { display: none; }
#menu .menu-items { margin-top: 20px; }

.device-tiny-show, .device-small-show, .device-medium-show { display: none; }

body.dark *::-webkit-scrollbar { width: auto; }
body.dark * {
    scrollbar-width: auto;
    scrollbar-color: var(--dark-theme-l2-bg) var(--dark-theme-bg);
}
body.dark *::-webkit-scrollbar-track { background: var(--dark-theme-bg); }
body.dark *::-webkit-scrollbar-thumb {
    background-color: var(--dark-theme-l2-bg) ;
    border-radius: 10px;
    border: 3px solid var(--dark-theme-bg);
}

@media screen and (min-width: 601px) {
    .topmenu.dark h2.logo { background:url(/assets/logodark_small.png) 0 0 no-repeat; }
    .topmenu.light h2.logo { background:url(/assets/logolight_small.png) 0 0 no-repeat; }
    .topmenu.dark #menu h2.logo, .topmenu.light #menu h2.logo {
        height:46px;
        width:46px;
        margin-top: 3px;
        margin-left: 14px;
        margin-right: 0px;
        margin-bottom: -7px;
    }
    .topmenu .menucontainer + #page { margin-left: 0px; }
    .topmenu #menu.w3-sidebar
    {
        position: relative !important; width: auto;
    }

    .topmenu #menucontent {
        display: block !important;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        padding-left: 75px;
    }

    .topmenu #menucontent .menu-items {
        width: auto;
        display: flex;
        justify-content: flex-end;
        margin-top: 7px;
    }

    .topmenu #menubtn { display: none !important; }

    .topmenu #menu .w3-cell {
        display: table-cell;
        width: auto;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media screen and (max-width: 767px) {
    .dark h2.logo { background:url(/assets/logodark_small.png) 0 0 no-repeat; }
    .light h2.logo { background:url(/assets/logolight_small.png) 0 0 no-repeat; }
    .dark #menu h2.logo, .light #menu h2.logo {
        height:46px;
        width:46px;
        margin-top: 3px;
        margin-left: 14px;
        margin-right: 0px;
        margin-bottom: -7px;
    }
    .menucontainer + #page { margin-left: 0px; }
    #menu.w3-sidebar
    {
        position: relative !important; width: auto;
    }
    #menu .w3-cell { display: table-cell; width: auto; text-align: center; }
    #menubtn { display: block; }
    #menucontent.hide { display: none; }
    .device-medium-hide { display: none; }
    .device-medium-show { display: unset; }
}

@media screen and (max-width: 600px) {
    #menu .w3-cell { display: block; }
    #menucontent.hide { display: none; }
    .device-small-hide, .device-medium-hide { display: none; }
    .device-small-show, .device-medium-show { display: unset; }
}

@media screen and (max-width: 400px) {
    .device-tiny-hide, .device-small-hide, .device-medium-hide { display: none; }
    .device-tiny-show, .device-small-show, .device-medium-show { display: unset; }
}