style.user.css

/* ==UserStyle==
@name         Portainer Nord Dark Theme
@description  Dark Blue Nord Theme for Portainer
@namespace    github.com/STaRDoGG/portainer-nord-dark-theme
@homepageURL  https://github.com/STaRDoGG/portainer-nord-dark-theme
@supportURL   https://github.com/STaRDoGG/portainer-nord-dark-theme/issues
@updateURL    https://raw.githubusercontent.com/STaRDoGG/portainer-nord-dark-theme/master/style.user.css
@author       ThE STaRDoGG CHaMPioN | J. Scott Elblein | GeekDrop.com
@version      1.0.4
@preprocessor stylus
==/UserStyle== */
@-moz-document regexp("https?:\/\/.*(?<!github.*)(?<!https?:\/\/.*\..*\/.*\/)(?<!\?.)portainer.*")
  /* The above regex will theme URLs at portainer.example.com and example.com/portainer. It has built in checking to block false positives like example.com/example/portainer or example.com/example?portainer */

@import url('https://fonts.googleapis.com/css?family=Rubik&display=swap');

/* ------------------------------------------------------------------------------------------
   -
   - Dark Portainer UI
   -
   - Last Updated: 03/18/2022
   -
   - NEW:
   -   Changes to match the latest Portainer's new CSS variable format. (some)
   -
   - TODO:
   -   Templates Page: Search Bar needs work. Particularly the colors when clicked in/on.
   -   Templates page: Select cat. drop-down needs work.
   -   Users Page: The white things on the input fields are too bright.
   -   Exec Console needs work. (when clicking it's icon on a container in the list)
   -   Finish the Login box. 5px bord-rad, input backgrounds, and icon backgrounds.
   -   Swap Button background colors(?). i.e. the "text/tree" buttons on the Inspect pages)
   -   Buttons still need work all over the place, incl. when hovered.
   -
   -----------------------------------------------------------------------------------------
*/

/* Vars */
:root {
    --bg-card-color: #1B1E2B;
    --bg-main-color: #1B1E2B;
    /*  --bg-body-color: var(--grey-9);
    --bg-checkbox-border-color: var(--grey-49);
    --bg-sidebar-color: var(--grey-37);
    --bg-sidebar-header-color: var(--grey-37);
    --bg-widget-color: var(--white-color);
    --bg-widget-header-color: var(--grey-10);
    --bg-widget-table-color: var(--grey-13);
    --bg-header-color: var(--white-color);
    --bg-hover-table-color: var(--grey-14);
    --bg-switch-box-color: var(--white-color); */
    --bg-input-group-addon-color: #5E81AC;
    /*--bg-btn-default-color: var(--white-color);
    --bg-blocklist-hover-color: var(--grey-12);
    --bg-boxselector-color: var(--white-color);
    --bg-table-color: var(--white-color);
    --bg-md-checkbox-color: var(--grey-12); */
    --bg-form-control-disabled-color: #30426A;
    /*--bg-modal-content-color: var(--white-color);
    --bg-code-color: var(--grey-15);
    --bg-navtabs-color: var(--white-color);
    --bg-navtabs-hover-color: var(--grey-16);
    --bg-table-selected-color: var(--grey-14);
    --bg-codemirror-gutters-color: var(--grey-17);
    --bg-dropdown-menu-color: var(--white-color);
    --bg-log-viewer-color: var(--white-color);
    --bg-log-line-selected-color: var(--grey-18);
    --bg-pre-color: var(--grey-14);
    --bg-blocklist-item-selected-color: var(--grey-12);
    --bg-progress-color: var(--grey-14);
    --bg-pagination-color: var(--white-color);
    --bg-pagination-span-color: var(--white-color);
    --bg-pagination-hover-color: var(--grey-11);
    --bg-ui-select-hover-color: var(--grey-14); */
    --bg-motd-body-color: #1B1E2B;
    /* --bg-item-highlighted-color: var(--grey-21);
    --bg-item-highlighted-null-color: var(--grey-14);
    --bg-row-header-color: var(--white-color);
    --bg-multiselect-checkbox-color: var(--white-color);
    --bg-sidebar-wrapper-color: var(--blue-5);*/
    --bg-panel-body-color: #232F48;
    /*--bg-codemirror-color: var(--white-color);
    --bg-codemirror-selected-color: var(--grey-22);
    --bg-multiselect-color: var(--white-color);
    --bg-daterangepicker-color: var(--white-color);
    --bg-calendar-color: var(--white-color);
    --bg-calendar-table-color: var(--white-color);
    --bg-daterangepicker-end-date: var(--white-color);
    --bg-daterangepicker-hover: var(--grey-16);
    --bg-daterangepicker-in-range: var(--grey-58);
    --bg-daterangepicker-active: var(--blue-14);
    --bg-tooltip-color: var(--white-color);
    --bg-input-autofill-color: var(--white-color);
    --bg-btn-default-hover-color: var(--grey-59);
    --bg-btn-focus: var(--grey-59);
    --bg-boxselector-disabled-color: var(--white-color);
    --bg-small-select-color: var(--white-color);
    --bg-app-datatable-thead: var(--grey-23);
    --bg-app-datatable-tbody: var(--grey-24);
    --text-main-color: var(--grey-7);
    --text-body-color: var(--grey-6);
    --text-sidebar-title-color: var(--blue-3);
    --text-widget-header-color: var(--grey-7);
    --text-form-control-color: var(--grey-25); */
    --text-muted-color: #bf7449;
    /*--text-link-color: var(--blue-2);
    --text-link-hover-color: var(--blue-4);
    --text-input-group-addon-color: var(--grey-25);
    --text-btn-default-color: var(--grey-6);
    --text-blocklist-hover-color: var(--grey-37);
    --text-dashboard-item-color: var(--grey-32);
    --text-danger-color: var(--red-1);
    --text-code-color: var(--red-2);
    --text-navtabs-color: var(--grey-25);
    --text-form-section-title-color: var(--grey-26);
    --text-cm-default-color: var(--blue-1);
    --text-cm-meta-color: var(--black-color);
    --text-cm-string-color: var(--red-3);
    --text-cm-number-color: var(--green-1);
    --text-codemirror-color: var(--black-color);
    --text-dropdown-menu-color: var(--grey-6);
    --text-log-viewer-color: var(--black-color);
    --text-json-tree-color: var(--blue-3);
    --text-json-tree-leaf-color: var(--blue-5);
    --text-json-tree-branch-preview-color: var(--blue-5);
    --text-pre-color: var(--grey-6);
    --text-blocklist-item-selected-color: var(--grey-37);
    --text-progress-bar-color: var(--grey-27);
    --text-pagination-color: var(--grey-26);
    --text-pagination-span-color: var(--blue-2);
    --text-pagination-span-hover-color: var(--blue-4);
    --text-ui-select-color: var(--grey-6);
    --text-ui-select-hover-color: var(--grey-28);
    --text-summary-color: var(--black-color);
    --text-multiselect-button-color: var(--grey-29);
    --text-multiselect-item-color: var(--grey-30);
    --text-sidebar-list-color: var(--grey-56);
    --text-rzslider-color: var(--grey-36);
    --text-rzslider-limit-color: var(--grey-36);
    --text-daterangepicker-end-date: var(--grey-57);
    --text-daterangepicker-in-range: var(--black-color);
    --text-daterangepicker-active: var(--white-color);
    --text-tooltip-color: var(--grey-6);
    --text-input-autofill-color: var(--black-color);
    --text-button-hover-color: var(--grey-6);
    --text-small-select-color: var(--grey-25);
    --border-color: var(--grey-42);
    --border-widget-color: var(--grey-43);
    --border-sidebar-color: var(--white-color); */
    --border-form-control-color: #CCC;
    /*--border-table-color: var(--grey-19);
    --border-table-top-color: var(--grey-19); */
    --border-datatable-top-color: #1B1E2B;
    /*--border-blocklist-color: var(--grey-44) ccc;
    --border-input-group-addon-color: var(--grey-44);
    --border-btn-default-color: var(--grey-44);
    --border-boxselector-color: var(--grey-6);
    --border-md-checkbox-color: var(--grey-19);
    --border-modal-header-color: var(--grey-45);
    --border-navtabs-color: var(--grey-19);
    --border-form-section-title-color: var(--grey-26);
    --border-codemirror-cursor-color: var(--black-color);
    --border-codemirror-gutters-color: var(--grey-19);
    --border-pre-color: var(--grey-43);
    --border-blocklist-item-selected-color: var(--grey-46);
    --border-pagination-color: var(--grey-19);
    --border-pagination-span-color: var(--grey-19);
    --border-pagination-hover-color: var(--grey-19);
    --border-multiselect-button-color: var(--grey-48);
    --border-searchbar-color: var(--grey-10);
    --border-panel-color: var(--white-color);
    --border-daterangepicker-color: var(--grey-19);
    --border-calendar-table: var(--white-color);
    --border-daterangepicker: var(--grey-19);
    --border-pre-next-month: var(--black-color);
    --border-daterangepicker-after: var(--white-color);
    --border-tooltip-color: var(--grey-47);
    --border-modal: 0px;
    --hover-sidebar-color: var(--grey-37);
    --shadow-box-color: 0 3px 10px -2px var(--grey-50);
    --shadow-boxselector-color: 0 3px 10px -2px var(--grey-50);
    --blue-color: var(--blue-13);
    --button-close-color: var(--black-color);
    --button-opacity: 0.2;
    --button-opacity-hover: 0.5;
    --bg-boxselector-wrapper-color: var(--grey-6);
    --bg-image-multiselect: linear-gradient(var(--blue-2),var(--blue-2));
    --bg-image-multiselect-button: linear-gradient(var(--white-color),var(--grey-17));
    --bg-image-multiselect-hover: linear-gradient(var(--white-color),var(--grey-43));
    --border-multiselect: var(--grey-48);
    --border-multiselect-checkboxlayer: var(--grey-51);
    --text-multiselect: var(--grey-29);
    --text-multiselect-selectitem: var(--white-color);
    --bg-multiselect-checkboxcontainer: var(--white-color);
    --text-multiselect-item: var(--grey-30);
    --bg-multiselect-helpercontainer: var(--white-color);
    --text-input-textarea: var(--white-color); */
    --bg-service-datatable-thead: #292D3E;
    /* --bg-service-datatable-tbody: var(--grey-24); */
}

body {
    background: #292D3E;
    font-family: Rubik;
    color: #B2BFDC !important;
}

/* Latest News Banner */
.motd-body {
    background-color: var(--bg-motd-body-color, #1B1E2B);
    border: 2px solid #F0AD4E;
    border: 2px solid #F0AD4E5c;
    border-radius: 2px;
}

/* Login Panel: Begin */
.panel-body {
    background-color: var(--bg-panel-body-color, #232F48);
    border: 1px solid #1B1E2B
}

.panel-default { border-color: #2D3E63; }
.panel         { background-color: #2D3E63; }
/* End */

/* User Name + Icon */
.user-box {
    color: #A3BE8C;
    margin-bottom: 5px;
}

/* Sidebar: Begin */
.sidebar-header a { color: #D8DEE9; }

ul.sidebar .sidebar-list a.active {
    color: #E5E9F0;
    border-left: 3px solid #E5E9F0;
    background: #2D3E63;
}

ul.sidebar .sidebar-title.endpoint-name { color: #EBCB8B; }

ul.sidebar .sidebar-title {
    border-bottom: 1px solid #292D3E;
    margin: 1.1em 0 0 0;
}

ul.sidebar .sidebar-list a:hover {
    color: #E5E9F0;
    border-left: 3px solid #D08770;
}
/* End */

/* Buttons: Begin */
.btn-primary, .btn-danger, .btn-success  {
    color: #D8DEE9;
    margin-right: 1px;
}

.btn-primary {
    background-color: #286090;
    /* border-color: #204d74; */
}

.btn-primary:hover {
    background-color: #30426A;
    /* border-color: #81A1C1; */
}

.btn-danger:hover { border-color: #cc6b69; }

.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
    color: #E5E9F0;
    background-color: #204d74;
    border-color: #122b40;
}

.btn.btn-xs.btn-primary.space-left { float: right; }

/* TODO: (Following #view selectors are a bit buggy. I only want this to work in the container buttons at the top, but it is styling more than I want. Disabled for now). 
/* Center the row of container control buttons */
/* #view > div:nth-child(2) > div > rd-widget > div > rd-widget-body > div {text-align: center;} */

/* Give them some room to unbutton their belts and let the fat hang out */
/* #view > div:nth-child(2) > div > rd-widget > div > rd-widget-body > div > div > div .btn-primary,
/* #view > div:nth-child(2) > div > rd-widget > div > rd-widget-body > div > div > div .btn-danger,
/* #view > div:nth-child(2) > div > rd-widget > div > rd-widget-body > div > div > div .btn-success {padding: .5em 2.5em .5em 2.5em;} */

/* Add a bit more space between the 2 sections */
/* #view > div:nth-child(2) > div > rd-widget > div > rd-widget-body > div > div > div:nth-child(2) {padding-left: 2em;} */

/* i.e. As seen in the popup Settings boxes */
.btn-default {
    color: #E5E9F0;
    background-color: #5E81AC;
    border-color: #30426A;
}

/* Search Box 'Button': Begin */
.btn-default:hover {
    color: #30426A;
    background-color: #1B1E2B;
}

/* X button on popup dialogs */
.close { color: #fff; }
/* End */

/* Drop-down Menus */
.dropdown-menu {
    /* font-size: 1em; */
    background-color: #1B1E2B;
    border: 1px solid rgb(48, 66, 106);
}

/* Text color inside of the drop-down menus. (i.e. popup settings boxes) */
.tableMenu { color: unset; }

/* Pagination: Begin */
.pagination>li>a, .pagination>li>span {
    color: #5E81AC;
    background-color: #232F48;
    border: 1px solid #232F48;
}

/* Selected */
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    color: #E5E9F0;
    background-color: #1B1E2B;
    border-color: #232F48;
}

/* Hovered */
.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
    z-index: 1;
    color: #E5E9F0;
    background-color: #30426A;
    border-color: #232F48;
}

/* Disabled */
.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
    color: #1B1E2B;
    background-color: #232F48;
    border-color: #232F48;
}
/* End */

/* Stacks page, Tab: Begin */
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #E5E9F0;
    background-color: #1B1E2B;
    border: 1px solid #30426A;
}

.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: #30426A;
    border: 1px solid #1B1E2B;
}

/* Keep the bottom line the same color at all times */
.nav-tabs,
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover,
.nav>li>a:focus, .nav>li>a:hover {
    border-bottom: 1px solid #30426A;
}
/* End */

/* Big boxy things ...: Begin */
.boxselector_wrapper input[type=radio]:checked+label {
    background: #30426A;
    color: #E5E9F0;
    border-color: #1B1E2B;
}

.boxselector_wrapper label {
    background: #1c2538;
    border: 1px solid #30426A;
    -webkit-box-shadow: unset;
    box-shadow: unset;
}

.boxselector_wrapper input[type=radio]:checked+label:after {
    color: #5E81AC;
    border: 2px solid #5E81AC;
    background: #E5E9F0;
}

/* Stop that weird bouncing when selecting these */
boxselector_wrapper label { padding: 20px 10px 0; }
/* End */

.row.header {
    height: 60px;
    background: #1B1E2B;
    margin-bottom: 15px;
}

.datatable .footer {
    background-color: var(--bg-card-color, #1B1E2B);
    border-radius: 0 0 5px 5px;
    border-top: var(--border-datatable-top-color, #1B1E2B);
    color: #D8DEE9;
}

.datatable .actionBar, .datatable .toolBar {
    color: #D8DEE9;
    padding: 10px;
}

.datatable .toolBar {
    background-color: #1B1E2B;
    border-radius: 5px 5px 0 0;
}

.datatable .searchBar {
    border-top: 1px dashed #1B1E2B !important;
    border-bottom: 1px dashed #1B1E2B;
    background-color: #252A3C;
}

a {
    color: #81A1C1;
    text-decoration: none;
}

a:hover, a:focus, u, .btn:hover {
    color: #ECEFF4;
    text-decoration: none;
}

/* TODO: (A bit buggy. I only want this to work in the breadcrumbs, but it is styling more than I want. Disabled for now). To make the currently chosen container's name more apparent
a.ng-binding.ng-scope {
    color: #EBCB8B;
    font-size: larger;
    text-transform: uppercase;   
}
 */
/* 1 Place this is used is the search bar 'button' on the Templates page ...*/
.form-control, output {
    color: #5E81AC;
    border: 1px solid #232F48 !important;
    border-radius: 5px;
}

.widget {
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    background: #232F48;
    border: 1px solid #1B1E2B;
    border-radius: 5px;
    /*border-color: #E9E9E9;*/
}

.widget .widget-header {
    color: #B2BFDC;
    background-color: #232F48;
    padding: 10px 15px;
    border-bottom: 1px solid #E9E9E9;
    line-height: 30px;
}

/* Text in table headers */
.widget .widget-body table thead * { color: #ECEFF4; }

/* TODO: Duped the above selector, but there are a cpl changes here.
   Designed the above on the Home tab, then the below on the Dashboard tab,
   and haven't throughougly gone through testing what it all affects. */
.widget .widget-header {
    background-color: #30426A;
    border-bottom: 1px solid #292D3E;
    border-radius: 5px 5px 0 0;
}

.text-muted { color: var(--text-muted-color, #bf7449); }

.widget .widget-body table thead {
    /* background: #232F48; */
    background: #1B1E2B;
}

.widget .widget-footer { border-top: 1px solid #31426a; }
    
.blocklist-item {
    border: 1px solid #1B1E2B;
    margin: 10px 0;
    -webkit-box-shadow: unset;
    box-shadow: unset;
}

/* Hovered Items in Block Lists, i.e. Endpoints List */
.blocklist-item--selected, .blocklist-item:hover {
    background-color: #2D3E63;
    color: #E5E9F0;
}

.datatable .searchIcon {
    color: #EBCB8B;
    margin-right: 5px;
}


/* Endpoint Detals page: Begin */
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: var(--bg-form-control-disabled-color,#30426A); }
    
/* Tags dropdown. TODO: Still needs work. */
#tags { background-color: #1B1E2B !important; }

/**/
.dropdown-menu>li>a { color: unset; }

/* Labels & Such: Begin */
.label {
    color: #ECEFF4;
    text-shadow: 1px 1px 1px #000000A6;
    letter-spacing: 1px;
}

.label-success { background-color: #A3BE8C; }
.label-warning { background-color: #EBCB8B; }
.label-default { background-color: #5E81AC; }
.label-info    { background-color: #D08770; }

/* The Label-info on the Networks table */
span.label.label-info.image-tag.space-left.ng-scope { float: right; }

/* Special floating for the label on the Volumes & Images pages, for aethestics */
span.label.label-warning.image-tag.ng-scope { float: right; }

.label-danger, .btn-danger     { background-color: #BF616A; }
.label-primary, .btn-primary   { background-color: #5E81AC; }
.fa.green-icon                 { color: #A3BE8C; }
.fa.red-icon, .text-danger     { color: #BF616A; }
.fa.orange-icon, .text-warning { color: #D08770; }

/* TODO: Disabled for now because they break the hover color for some reason (a:hover) */
/*.fa-file-alt                   { color: #EBCB8B; }  Logs */
/*.fa-info-circle                { color: #B48EAD; }  Info */
/*.fa-chart-area                 { color: #A3BE8C; }  Chart/Stats */
/*.fa-terminal                   { color: #D08770; }  Terminal */

/* For 'healthy' containers in the Containers list, add a lil more spice */
span.label.label-success.interactive {
    color: #fbe1ad!important;
    text-shadow: 1px 1px 1px #000000a6 !important;
}

/* "Filter" text on colunmn headers */
.widget .widget-body table thead th .table-filter { color:#EBCB8B; }

/* i.e. The circular icons on the Dashboard page */
.blue {
    background: #31426A !important;
    border: 1px solid #1c1e2b;
    border-radius: 20px !important;
}
/* .blue { background: #1B1E2B !important; } */
/* End */

.form-control {
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    background-color: var(--bg-main-color,#1B1E2B);
    background-image: none;
    border: 1px solid var(--border-form-control-color,#CCC); /* hmmmm .... */
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
}

.form-control, output {
    display: block;
    font-size: 14px;
    line-height: 1.42857143;
    /* color: #337ab7; */
    color: #5E81AC;
}

.table .table { background-color: rgba(0,0,0,.25); }

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { border-top: 1px solid #30426A; }
.table>thead>tr>th { border-bottom: 2px solid #1B1E2B; }

/* Background hover color for table items */
.table-hover>tbody>tr:hover, .table>tbody>tr.active>td, .table>tbody>tr.active>th, .table>tbody>tr>td.active, .table>tbody>tr>th.active, .table>tfoot>tr.active>td, .table>tfoot>tr.active>th, .table>tfoot>tr>td.active, .table>tfoot>tr>th.active, .table>thead>tr.active>td, .table>thead>tr.active>th, .table>thead>tr>td.active, .table>thead>tr>th.active {
    background-color: #2D3E63;
}

/* Background hover color for actively hovered table items */
.table-hover>tbody>tr.active:hover>td, .table-hover>tbody>tr.active:hover>th, .table-hover>tbody>tr:hover>.active, .table-hover>tbody>tr>td.active:hover, .table-hover>tbody>tr>th.active:hover {
    background-color: #5E81AC;
}

/* Table item borders */
.table-bordered, .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
    border: 1px solid #232F48;
}

/* i.e. As seen in the popup Settings boxes */
.tableMenu .menuContent {border-bottom: 1px solid #232F48;}
.datatable .toolBar .setting-active {color: #30426A;}

.form-section-title {
    color: unset;
    border-bottom: 1px solid #2D3E63;
    margin-top: unset;
    padding-bottom: 1em;
}

#view > information-panel > div > div > rd-widget > div > rd-widget-body > div > div > div.form-group.ng-scope > ng-transclude > span,
#view > div:nth-child(3) > div > rd-widget > div > rd-widget-body > div > div > form > div:nth-child(2) > div > span {color: #D8DEE9;}

json-tree { color: unset; }

/* Colored text on the Roles page.*/
.portainer-disabled-datatable { color: #1B1E2B; }

/* Sliders/Switches: Begin */
.bootbox-form .checkbox i, .switch i {
    -webkit-box-shadow: inset 0 0 1px 1px rgb(48, 66, 106);
    box-shadow: inset 0 0 1px 1px rgb(48, 66, 106);
}

/* When switched on ... */
.bootbox-form .checkbox :checked~i, .switch :checked+i {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 0 40px #8A97B3;
    box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 0 40px #B2BFDC;
}
/* End */

/* Styled for the "text" view on the Inspect page; haven't fully looked to see if that fucked up anything else yet. MAY need to isolate it. */
pre {
    color: #B2BFDC;
    background-color: #232F48;
    border: unset;
    border-radius: unset;
}

/* Log Viewer: Begin */
/*
pre {
    color: #333;
    background-color: #F5F5F5;
    border: 1px solid #30426A;
    border-radius: 5px;
}
*/

.log_viewer {
    color: #D8DEE9;
    background-color: #1B1E2B;
    font-size: .75em;
    border: 1px solid #30426A;
    border-radius: 5px;
}

/* Highlighted line(s) in log viewer */
.log_viewer .line_selected {
    background-color: #2D3E63;
    border-left: 3px solid #F0AD4E;
}
/* End */

/* As seen in the Container details section */
code {
    color: #BF616A;
    background-color: #1A2336;
    padding: 4px 5px 4px 5px !important;
}

/* Code Editor */

/* Allow expanding the code area vertically (as well as the log viewer area) */
.CodeMirror { background: #ECEFF4; }

/* NEW: BUG: Supposed to allow re-sizing he terminal window, but not having any effect. */
.CodeMirror, .log_viewer, .xterm-viewport {
    min-height: 510px;
    resize: vertical;
    overflow-x: auto;
}

.CodeMirror-linenumber                                  { color: #D08770; }
.CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler { background-color: #ECEFF4; }
.CodeMirror-selected                                    { background:#CCCCCC; }

.CodeMirror-gutters {
    border-right: 1px solid #D08770;
    background-color: #EBCB8B;
}

/* Bar under 'Search' when on Templates page */
.searchBar ng-scope {border-bottom: 2px solid #30426A;}

/* NOT FINISHED: Dialogs: i.e. When deleting a container and it asks if you also want to delete non-persistant volumes */
.modal-content { background-color: #A94442; }

.modal-title {
    color: #ECEFF4;
    font-style: italic;
    font-size: larger;
}

/* NEW: Added more style to the confirm dialog */
.modal-header {
    background-color: #79282F;
    border-bottom: 1px solid #733B3B;
    border-radius: 5px 5px 0 0;
}

.modal-footer                      { border-top: 1px solid #733B3B; }
.bootbox-form label, .bootbox-body { color: #ECEFF4; }

.bootbox-form .checkbox :checked~i, .switch :checked+i {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 0 40px #BF616A;
    box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 0 40px #BF616A;
}

/* Footer Version Number, and the 'eye' icons (i.e. 'administrators' text in tables.) */
.sidebar-footer-content .version, .fa.fa-eye-slash, .fa.fa-eye { color: #EBCB8B; }

/* NEW: Service Details Page: Begin */

/* Add a little space between env var items */
.env-item .env-item-value { margin-bottom: 5px; }

/* End */

/* Table header in Services list. Could probably trim down this long selector but I'm being lazy right now. :p

TODO: change these colors, including the hover colors */
service-tasks-datatable > div > table > thead { background-color: var(--bg-service-datatable-thead, #292D3E) !important; }

/* Table body for the above */
service-tasks-datatable > div > table > tbody { background-color: #30426A !important; }

/* Table border for the above */
service-tasks-datatable > div { background-color: #30426A !important; }

/* TESTING: trying to change background of selected text. these aren't working
.CodeMirror-selected {
    background: red;
}

.CodeMirror-focused .CodeMirror-selected {
    background: red;
}

.CodeMirror-line::selection,
.CodeMirror-line>span::selection,
.CodeMirror-line>span>span::selection {
    background: red;
}

.CodeMirror-line::-moz-selection,
.CodeMirror-line>span::-moz-selection,
.CodeMirror-line>span>span::-moz-selection {
    background: red;
} */

#toast-container { z-index: 0; }

/* NEW: Update Notification Banner (at bottom left) */
.sidebar-footer-content .update-notification { background-color: #D08770; }

.fa-cloud-download-alt:before, .update-notification.ng-scope > a { color: #ECEFF4 !important; }

/* #loadingbar-placeholder TESTING */
#loadingbar { color: #EBCB8B; }

/* The things that look like buttons but aren't buttons */
.input-group-addon {
    color: unset;
    background-color: var(--bg-input-group-addon-color, #5E81AC);
    border: unset;
}

/* The Linux/Windows icon when connecting to the shell */
.boxselector_header .fa, .fab { color: #ECEFF4; }

/* As seen on the Service details page, for example. */
hr { border-top: 1px solid #D08770; }

.rzslider .rz-pointer { background-color: #A3BE8C; }