From f6c726e28f01b59231aa2a3f47ee233373ea2859 Mon Sep 17 00:00:00 2001
From: Marius <24592972+gilbN@users.noreply.github.com>
Date: Mon, 19 Apr 2021 22:20:35 +0200
Subject: [PATCH] bazarr react rewrite

---
 CSS/themes/bazarr/aquamarine.css      |   12 +-
 CSS/themes/bazarr/bazarr-base-old.css |  818 +++++++++++++++++
 CSS/themes/bazarr/bazarr-base.css     | 1209 +++++++++++--------------
 CSS/themes/bazarr/dark.css            |   12 +-
 CSS/themes/bazarr/hotline.css         |   12 +-
 CSS/themes/bazarr/organizr-dark.css   |   12 +-
 CSS/themes/bazarr/plex.css            |   12 +-
 CSS/themes/bazarr/space-gray.css      |   16 +-
 8 files changed, 1408 insertions(+), 695 deletions(-)
 create mode 100644 CSS/themes/bazarr/bazarr-base-old.css

diff --git a/CSS/themes/bazarr/aquamarine.css b/CSS/themes/bazarr/aquamarine.css
index 62ba3386..7b524b49 100644
--- a/CSS/themes/bazarr/aquamarine.css
+++ b/CSS/themes/bazarr/aquamarine.css
@@ -19,6 +19,16 @@
 
   --button-color: #009688;
   --button-color-hover: #12afa0;
-  --accent-color:  #009688;
+  --button-text: #eee;
+  --button-text-hover: #FFF;
+
+  --accent-color:  0, 150, 136;
   --accent-color-hover: #12afa0;
+  --queue-color: #009688;
+  --link-color: #0ed2bf;
+  --link-color-hover: #fff;
+    
+  --text:#eee;
+  --text-hover: #fff;
+  --text-muted: #bbb;
 }
\ No newline at end of file
diff --git a/CSS/themes/bazarr/bazarr-base-old.css b/CSS/themes/bazarr/bazarr-base-old.css
new file mode 100644
index 00000000..16309d8e
--- /dev/null
+++ b/CSS/themes/bazarr/bazarr-base-old.css
@@ -0,0 +1,818 @@
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/* 			      https://github.com/gilbN/theme.park			 */
+
+html {
+  background: var(--main-bg-color);
+}
+
+.page-wrapper {
+  background: var(--main-bg-color);
+  color: white !important;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #eee;
+}
+
+body {
+  background: var(--main-bg-color);
+  background-repeat: repeat, no-repeat;
+  background-attachment: fixed, fixed;
+  background-position: center center, center center;
+  background-size: auto, cover;
+  -webkit-background-size: auto, cover;
+  -moz-background-size: auto, cover;
+  -o-background-size: auto, cover;
+}
+
+a {
+  color: #eee !important;
+  text-decoration: none;
+}
+
+a:focus,
+a:hover {
+  color: #ffffff;
+}
+
+hr {
+  border-top: 1px solid var(--accent-color);
+}
+
+/* scroller */
+::-webkit-scrollbar-corner {
+  background-color: hsla(0, 0%, 100%, .08);
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  background: #1f1f1f;
+}
+
+::-webkit-scrollbar-thumb {
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  background-color: rgba(255, 255, 255, 0.35) !important;
+}
+
+
+/* Form Stuff */
+
+.form-control {
+  color: #FFF;
+  background-color: rgba(0, 0, 0, .25) !important;
+  border: 1px solid rgba(0, 0, 0, .25);
+}
+
+.form-control:focus {
+  background-color: #eee !important;
+  border-color: rgba(0, 0, 0, 0.51);
+  outline: 0;
+  box-shadow: none;
+  color: black;
+}
+
+.form-group i {
+  color: #ffffff;
+}
+
+.bootstrap-tagsinput {
+  color: #eee;
+  background-color: rgba(0, 0, 0, .25) !important;
+  border: 1px solid transparent !important;
+
+}
+
+.bootstrap-tagsinput.focus {
+  background-color: #fff !important;
+  border-color: transparent;
+  outline: 0;
+  box-shadow: none;
+  color: black;
+}
+
+/* Tables */
+.table {
+  color: #eee;
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+  background: rgb(0 0 0 / 8%);
+}
+
+.table-striped tbody tr:nth-of-type(odd):hover,
+table.dataTable tbody tr:hover {
+  background: rgb(255 255 255 / 8%);
+  transition: background 500ms;
+}
+
+table.dataTable tbody tr {
+  background-color: transparent;
+}
+
+table.dataTable tbody>tr.selected,
+table.dataTable tbody>tr>.selected {
+  background-color: rgb(255 255 255 / 15%);
+}
+
+table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before,
+table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
+  border: 2px solid transparent;
+  font-family: monospace;
+}
+
+/*Checkbox*/
+table.dataTable tbody td.select-checkbox:before,
+table.dataTable tbody th.select-checkbox:before {
+  border: 1px solid #eee;
+}
+
+.table td,
+.table th {
+  border-color: rgb(255 255 255 / 25%);
+}
+
+table.dataTable tr.dtrg-group td {
+  background-color: rgb(0 0 0 / 25%);
+}
+
+/* Header */
+.topbar {
+  background: var(--main-bg-color);
+}
+
+.topbar .top-navbar {
+  background-color: rgba(0, 0, 0, .7);
+}
+
+.page-titles {
+  background: rgb(0 0 0 / 25%);
+  box-shadow: 0px 5px 20px rgb(0 0 0 / 20%);
+}
+
+.page-titles .btn:hover:not(:disabled) {
+  color: #fff !important;
+}
+
+.page-titles .btn {
+  color: hsla(0, 0%, 100%, .7) !important;
+}
+
+.text-themecolor {
+  color: inherit !important;
+}
+
+.fa-stack {
+  color: inherit;
+}
+
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled),
+button:not(:disabled) {
+  cursor: pointer !important;
+}
+
+.form-material .form-control,
+.form-material .form-control.focus,
+.form-material .form-control:focus {
+  background-image: linear-gradient(var(--accent-color), var(--accent-color)), linear-gradient(#e1e2e3, #e1e2e3);
+  color: #eee;
+}
+
+.form-control:focus::placeholder {
+  /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: #eee;
+}
+
+.form-control:focus::-ms-input-placeholder {
+  /* Internet Explorer 10-11 */
+  color: #eee;
+}
+
+.form-control:focus::-ms-input-placeholder {
+  /* Microsoft Edge */
+  color: #eee;
+}
+
+.topbar .form-control {
+  color: #FFF;
+  background-color: transparent !important;
+  border: 1px solid rgba(0, 0, 0, .25);
+}
+
+.topbar ul.dropdown-user li a {
+  color: #eee;
+  background: var(--modal-bg-color);
+}
+
+.topbar ul.dropdown-user {
+
+  background: var(--modal-bg-color);
+}
+
+.topbar ul.dropdown-user li a:hover {
+  background: rgb(255 255 255 / 7%);
+}
+
+.buttons_bars {
+  position: absolute;
+}
+
+.nav-item .typeahead__dropdown,
+.typeahead__list {
+  background: var(--modal-bg-color);
+  border: 1px solid transparent;
+  box-shadow: 0 0 10px 1px #000;
+}
+
+.nav-item .typeahead__list>li {
+  border-top: solid 1px rgba(255, 255, 255, .25);
+}
+
+.typeahead__dropdown .typeahead__dropdown-item:not([disabled]).active>a,
+.typeahead__dropdown .typeahead__dropdown-item:not([disabled])>a:focus,
+.typeahead__dropdown .typeahead__dropdown-item:not([disabled])>a:hover,
+.typeahead__list .typeahead__item:not([disabled]).active>a,
+.typeahead__list .typeahead__item:not([disabled])>a:focus,
+.typeahead__list .typeahead__item:not([disabled])>a:hover {
+  background-color: rgb(255 255 255 / .07);
+}
+
+/* Sidebar */
+.left-sidebar {
+  position: absolute;
+  width: 240px;
+  height: 100%;
+  top: 0;
+  z-index: 20;
+  padding-top: 60px;
+  background: rgb(0 0 0 / 25%);
+  box-shadow: 0 0 0 rgba(0, 0, 0, 0.08);
+}
+
+.sidebar-nav {
+  background: rgba(255, 255, 255, 0);
+  padding: 0;
+}
+
+.card-no-border .sidebar-nav>ul>li>a.active {
+  background-color: hsla(0, 0%, 100%, .08);
+  border-left: 3px solid var(--accent-color);
+}
+
+.sidebar-nav>ul>li>a.active i,
+.sidebar-nav>ul>li>a:hover i {
+  color: white;
+}
+
+#sidebarnav .sidebar-nav>ul>li.active>a {
+  border-left: 3px solid var(--accent-color);
+  background: rgb(255 255 255 / 7%);
+}
+
+#sidebarnav .sidebar-nav>ul>li.active>a i {
+  color: #eee;
+  font-size: 14px;
+}
+
+.sidebar-nav>ul>li.active>a {
+  color: #eee;
+  border-left: 3px solid var(--accent-color);
+  background: hsla(0, 0%, 100%, .08);
+}
+
+.sidebar-nav>ul>li.active>a i {
+  color: #eee;
+  font-size: 14px;
+}
+
+@media (min-width: 768px) {
+  .mini-sidebar .sidebar-nav #sidebarnav>li.active>a.active {
+    border-color: var(--accent-color);
+  }
+}
+
+@media (min-width: 768px) {
+  .mini-sidebar .sidebar-nav #sidebarnav>li:hover>a {
+    width: 260px;
+    background: var(--main-bg-color);
+    color: #ffffff;
+    border-color: rgba(255, 255, 255, .05);
+  }
+}
+
+@media (min-width: 768px) {
+  .mini-sidebar .sidebar-nav #sidebarnav>li>ul {
+
+    background: var(--main-bg-color);
+    display: none;
+    padding-left: 1px;
+  }
+}
+
+@media (min-width: 768px) {
+  .mini-sidebar .sidebar-nav #sidebarnav li:hover {
+    position: relative;
+    background: rgba(255, 255, 255, .1);
+  }
+}
+
+.sidebar-nav ul li ul {
+  padding-left: 0px;
+  border-left: 3px solid var(--accent-color);
+}
+
+.sidebar-nav ul li ul li a {
+  padding-left: 60px;
+}
+
+.sidebar-nav ul li a.active,
+.sidebar-nav ul li a:hover {
+  background: rgba(255, 255, 255, .08);
+
+}
+
+/* Series page */
+#series .progress-bar {
+  background-color: var(--accent-color);
+}
+
+#series .progress {
+  background-color: rgb(255 255 255 / 20%);
+}
+
+#series .badge-secondary,
+#episodes_wrapper .badge-secondary {
+  background-color: var(--accent-color);
+}
+
+.card-no-border .card {
+  background: var(--modal-bg-color);
+  border: solid 1px transparent;
+  box-shadow: 0 0 10px 1px #000;
+}
+
+#seriesDetails .badge-secondary {
+  color: #fff;
+  background-color: var(--accent-color);
+}
+
+/* Movies page */
+#movies .progress-bar {
+  background-color: var(--accent-color);
+}
+
+#movies .progress {
+  background-color: rgb(255 255 255 / 20%);
+}
+
+#movies .badge-secondary {
+  background-color: var(--accent-color);
+}
+
+#movieDetails .badge-secondary {
+  color: #fff;
+  background-color: var(--accent-color);
+}
+
+#movieSubtitles .badge-secondary {
+  background-color: var(--accent-color);
+}
+
+/*Mass Edit*/
+.container-fluid .bg-dark {
+  background: var(--modal-bg-color) !important;
+}
+
+@media (min-width: 1024px) {
+  #edit_bar {
+    margin-left: 0px;
+  }
+}
+
+/* History */
+table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before,
+table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
+  left: -15px;
+  background-color: var(--accent-color);
+}
+
+/* Wanted page */
+#wanted_series .progress {
+  background-color: rgb(255 255 255 / 20%);
+}
+
+#wanted_series .badge-secondary,
+#wanted_series_badge .badge-secondary,
+#wanted_movies_badge .badge-secondary,
+#wanted_movies .badge-secondary {
+  background-color: var(--accent-color);
+}
+
+/* Buttons */
+.btn.focus,
+.btn:focus {
+  outline: 0;
+  box-shadow: none;
+}
+
+.btn-info,
+.btn-info.disabled {
+  background: var(--button-color);
+  border: 1px solid var(--button-color);
+  box-shadow: none;
+}
+
+.btn-info:hover,
+.btn-info.disabled:hover {
+  background: var(--button-color-hover);
+  border: 1px solid var(--button-color-hover);
+  box-shadow: none;
+}
+
+.btn-info:not(:disabled):not(.disabled).active,
+.btn-info:not(:disabled):not(.disabled):active,
+.show>.btn-info.dropdown-toggle {
+  color: #fff;
+  background-color: var(--button-color);
+  border-color: var(--button-color);
+  opacity: .5;
+}
+
+.custom-control-input:checked~.custom-control-label::before {
+  color: #fff;
+  border-color: var(--button-color);
+  background-color: var(--button-color);
+}
+
+.dt-buttons .dt-button {
+  background: var(--button-color);
+  color: #eee;
+  border-color: var(--button-color);
+}
+
+.dt-buttons .dt-button:hover {
+  background: var(--button-color-hover);
+}
+
+button.dt-button:hover:not(.disabled),
+div.dt-button:hover:not(.disabled),
+a.dt-button:hover:not(.disabled) {
+  border: 1px solid transparent;
+  background: var(--button-color-hover);
+  border-color: var(--button-color-hover);
+  background-image: none !important;
+}
+
+button.dt-button.disabled,
+div.dt-button.disabled,
+a.dt-button.disabled {
+  color: #eee;
+  border: 1px solid var(--button-color);
+  background-color: var(--button-color);
+  background-image: none !important;
+  opacity: .5;
+}
+
+button.dt-button.disabled:hover,
+div.dt-button.disabled:hover,
+a.dt-button.disabled:hover {
+  color: #eee;
+  border: 1px solid var(--button-color);
+  background-color: var(--button-color);
+  background-image: none !important;
+  opacity: .5;
+  cursor: not-allowed !important;
+}
+
+.btn-light:not(:disabled):not(.disabled).active,
+.btn-light:not(:disabled):not(.disabled):active,
+.show>.btn-light.dropdown-toggle {
+  color: #eee;
+  background-color: rgba(0, 0, 0, .25);
+  border-color: transparent;
+}
+
+.btn-light {
+  background-color: rgba(0, 0, 0, .25);
+  border: 1px solid transparent;
+}
+
+.btn-light:not(:disabled):not(.disabled).active:focus,
+.btn-light:not(:disabled):not(.disabled):active:focus,
+.show>.btn-light.dropdown-toggle:focus {
+  box-shadow: none;
+  border: solid 1px transparent;
+  outline: none;
+}
+
+.bootstrap-select .dropdown-toggle:focus {
+  outline: none !important;
+
+}
+
+.btn-light.focus,
+.btn-light:focus {
+  box-shadow: none;
+}
+
+.btn-light:hover {
+  background-color: rgb(0 0 0 / 25%);
+  border-color: transparent;
+}
+
+.btn-secondary,
+.btn-secondary.disabled {
+  background: var(--button-color);
+  border: 1px solid var(--button-color);
+}
+
+.btn-secondary:hover {
+  background: var(--button-color-hover);
+  opacity: 1;
+  border: 1px solid var(--button-color-hover);
+}
+
+.btn-secondary.disabled:hover {
+  background: var(--button-color-hover);
+  opacity: 0.7;
+  border: 1px solid var(--button-color-hover);
+}
+
+.close,
+.close:hover,
+.close:focus {
+  color: #FFF !important;
+  opacity: 1;
+}
+
+.btn-default {
+  color: hsla(0, 0%, 100%, .7);
+  background-color: rgba(0, 0, 0, .25);
+  border-color: none;
+  outline-style: none;
+}
+
+.btn-default:hover,
+.btn-default.active,
+.btn-default.active:hover {
+  color: #FFFFFF;
+  background-color: hsla(0, 0%, 100%, .08);
+  border-color: none;
+  outline-style: none;
+}
+
+.btn-default.active.focus,
+.btn-default.active:focus,
+.btn-default.active:hover,
+.btn-default:active.focus,
+.btn-default:active:focus,
+.btn-default:active:hover,
+.open>.dropdown-toggle.btn-default.focus,
+.open>.dropdown-toggle.btn-default:focus,
+.open>.dropdown-toggle.btn-default:hover {
+  color: #fff;
+  background-color: hsla(0, 0%, 100%, .08);
+  border-color: #FFF;
+}
+
+.btn {
+  color: #FFF;
+  outline: 0 !important;
+}
+
+.btn.btn-lg.btn-block.x-search-auto {
+  color: #FFF;
+  background-color: rgba(0, 0, 0, .25);
+}
+
+.btn.btn-lg.btn-block.x-search-auto:hover {
+  color: #FFF;
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.btn.focus,
+.btn:focus,
+.btn:hover {
+  color: #fff;
+}
+
+/* Loading */
+.preloader {
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  position: fixed;
+  z-index: 99999;
+  background: rgb(0 0 0 / 7%);
+}
+
+/* Pagination*/
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
+  color: #eee !important;
+  opacity: .1;
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
+  cursor: default;
+  color: #eee;
+  border: 1px solid transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+.pagination .page-link {
+  position: relative;
+  display: block;
+  padding: .5rem .75rem;
+  margin-left: -1px;
+  line-height: 1.25;
+  background-color: rgb(0 0 0 / 15%);
+  border: 1px solid #00000000;
+}
+
+.pagination>.active>a,
+.pagination>.active>span,
+.pagination>.active>a:hover,
+.pagination>.active>span:hover,
+.pagination>.active>a:focus,
+.pagination>.active>span:focus {
+  background-color: rgb(0 0 0 / 35%);
+  border-color: rgb(0 0 0 / 35%);
+}
+
+.pagination .page-item.active .page-link {
+  z-index: 1;
+  color: #fff;
+  background-color: var(--accent-color);
+  border-color: var(--accent-color);
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button {
+  border: 1px solid rgb(221 221 221 / 8%);
+}
+
+.pagination>li>a:hover,
+.pagination>li>span:hover,
+.pagination>li>a:focus,
+.pagination>li>span:focus {
+  background-color: rgb(242 244 248 / 15%);
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
+  color: white;
+  border: 1px solid #00000000;
+  background-color: #009efb00;
+}
+
+.pagination .page-link:focus {
+  box-shadow: none;
+}
+
+/* Settings */
+.dropdown-menu,
+.topbar .dropdown-menu {
+  background: var(--modal-bg-color);
+  cursor: pointer;
+  box-shadow: 0 0 5px 0px rgb(0 0 0 / 50%);
+}
+
+.dropdown-item.active,
+.dropdown-item:active {
+  color: #fff;
+  text-decoration: none;
+  background-color: rgb(255 255 255 / 0.25);
+}
+.dropdown-item:focus, .dropdown-item:hover {
+  background-color: rgb(255 255 255 / 7%);
+}
+.dropdown-menu>li>a:hover {
+  color: white !important;
+  background-color: rgb(255 255 255 / 35%);
+}
+
+/* General */
+
+
+/* Notifications */
+.alert-secondary {
+  color: #ffffff;
+  background-color: rgb(255 255 255 / 25%);
+  border-color: transparent;
+}
+
+.alert-secondary a {
+  color: var(--accent-color) !important;
+  text-decoration: none;
+}
+
+.alert-secondary a:hover {
+  color: white !important;
+  text-decoration: none;
+}
+
+.badge-info {
+  background-color: var(--accent-color);
+  margin-left: 5px !important;
+}
+
+/* Modal */
+
+.modal-content {
+  box-shadow: 0 0 10px 1px #000;
+  border-radius: 3px;
+  background: var(--modal-bg-color);
+  background-repeat: repeat, no-repeat;
+  background-attachment: fixed, fixed;
+  background-position: center center, center center;
+  background-size: auto, cover;
+  -webkit-background-size: auto, cover;
+  -moz-background-size: auto, cover;
+  -o-background-size: auto, cover;
+}
+.modal-header {
+  border-bottom: 1px solid var(--accent-color);
+
+}
+.modal-footer {
+  border-top: 1px solid var(--accent-color);
+}
+.modal-content .badge-secondary {
+  color: #fff;
+  background-color: var(--accent-color);
+  padding: 5px;
+}
+
+.modal-content button:focus {
+  outline: none !important;
+}
+
+/* Chart */
+.chartjs-render-monitor {
+  filter: invert(1);
+}
+
+.highlight pre code {
+  font-size: inherit;
+  color: #eee;
+}
+
+.highlight {
+  background-color: rgb(255 255 255 / 0.08);
+  border-radius: 3px;
+}
+
+/* Mobile */
+@media (max-width: 767px) {
+  .mini-sidebar .left-sidebar {
+    background: var(--modal-bg-color);
+  }
+
+#buttons_bars .col-8 {
+    -ms-flex: none !important;
+    flex: auto;
+    max-width: fit-content;
+    padding-left: 5px;
+    padding-right: 5px;
+    display: inline-grid;
+    position: absolute;
+    z-index: 11;
+}
+
+  .page-titles .btn {
+    height: 50px !important;
+    width: 55px !important;
+    padding: 0 0;
+  }
+
+#buttons_bars .col-4 {
+    -ms-flex: none !important;
+    flex: auto;
+    display: grid;
+    padding-right: 5px !important;
+    padding-bottom: 5px !important;
+    position: inherit;
+    z-index: 10;
+    padding-left: 85%;
+}
+}
\ No newline at end of file
diff --git a/CSS/themes/bazarr/bazarr-base.css b/CSS/themes/bazarr/bazarr-base.css
index 16309d8e..33cd068e 100644
--- a/CSS/themes/bazarr/bazarr-base.css
+++ b/CSS/themes/bazarr/bazarr-base.css
@@ -8,811 +8,646 @@
 /*                                                  dP					 */
 
 /*		   		        Made by @gilbN					 */
-/* 			      https://github.com/gilbN/theme.park			 */
+/*			      https://github.com/gilbN/theme.park			 */
 
-html {
-  background: var(--main-bg-color);
-}
-
-.page-wrapper {
-  background: var(--main-bg-color);
-  color: white !important;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  color: #eee;
+* {
+    outline: none;
 }
 
 body {
-  background: var(--main-bg-color);
-  background-repeat: repeat, no-repeat;
-  background-attachment: fixed, fixed;
-  background-position: center center, center center;
-  background-size: auto, cover;
-  -webkit-background-size: auto, cover;
-  -moz-background-size: auto, cover;
-  -o-background-size: auto, cover;
-}
-
-a {
-  color: #eee !important;
-  text-decoration: none;
-}
-
-a:focus,
-a:hover {
-  color: #ffffff;
-}
-
-hr {
-  border-top: 1px solid var(--accent-color);
+    background: var(--main-bg-color);
+    background-repeat: repeat, no-repeat;
+    background-attachment: fixed, fixed;
+    background-position: center center, center center;
+    background-size: auto, cover;
+    -webkit-background-size: auto, cover;
+    -moz-background-size: auto, cover;
+    -o-background-size: auto, cover;
+    color: var(--text);
 }
 
 /* scroller */
 ::-webkit-scrollbar-corner {
-  background-color: hsla(0, 0%, 100%, .08);
+    background-color: hsla(0, 0%, 100%, .08);
 }
 
 ::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-  background: #1f1f1f;
+    width: 10px;
+    height: 10px;
+    background: #1f1f1f;
 }
 
 ::-webkit-scrollbar-thumb {
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  background-color: rgba(255, 255, 255, 0.35) !important;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 0.35) !important;
 }
 
+a,
+.page-link {
+    color: var(--link-color);
+}
+
+a:hover {
+    color: var(--link-color-hover);
+}
+
+/* Pagination */
+.page-item.active .page-link {
+    z-index: 3;
+    color: var(--button-text);
+    background-color: var(--button-color);
+    border-color: var(--button-color);
+}
+
+.page-link {
+    background-color: rgba(255, 255, 255, .07);
+    border: 1px solid rgba(255, 255, 255, .1);
+}
+
+.page-link:hover {
+    color: var(--link-color-hover);
+    text-decoration: none;
+    background-color: rgba(0, 0, 0, .15);
+    border: 1px solid rgba(255, 255, 255, .1);
+}
+
+.page-item.disabled .page-link {
+    color: var(--link-color);
+    background-color: rgba(255, 255, 255, .07);
+    border: 1px solid rgba(255, 255, 255, .1);
+}
+
+.page-link:focus {
+    z-index: 3;
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgb(var(--accent-color) / 25%);
+}
+
+/* TEXT */
+.text-muted {
+    color: var(--text-muted) !important;
+}
+
+.table {
+    color: var(--text);
+}
 
 /* Form Stuff */
 
+.header-container input[type=text] {
+    padding: 0;
+    transition: none;
+    color: #fff;
+    border-radius: 0;
+    border: none;
+    border-bottom: 1px solid rgba(255, 255, 255, .3) !important;
+    background-color: transparent;
+}
+
+.header-container input[type=text]:focus {
+    box-shadow: none;
+    color: #fff;
+    background-color: transparent !important;
+    border-color: rgb(var(--accent-color)) !important;
+}
+
 .form-control {
-  color: #FFF;
-  background-color: rgba(0, 0, 0, .25) !important;
-  border: 1px solid rgba(0, 0, 0, .25);
+    color: #FFF;
+    background-color: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .form-control:focus {
-  background-color: #eee !important;
-  border-color: rgba(0, 0, 0, 0.51);
-  outline: 0;
-  box-shadow: none;
-  color: black;
+    background-color: rgba(255, 255, 255, 0.25) !important;
+    border-color: rgba(255, 255, 255, 0.25) !important;
+    outline: 0;
+    box-shadow: none;
+    color: #fff;
+}
+
+.form-control:disabled,
+.form-control[readonly] {
+    background-color: rgb(255 255 255 / 15%);
+    opacity: .7;
+    color: var(--text);
+    border: 1px solid rgb(255 255 255 / 15%);
+}
+
+:root .form-control:focus {
+    box-shadow: none !important;
+    border-color: transparent !important;
 }
 
 .form-group i {
-  color: #ffffff;
+    color: #ffffff;
 }
 
 .bootstrap-tagsinput {
-  color: #eee;
-  background-color: rgba(0, 0, 0, .25) !important;
-  border: 1px solid transparent !important;
+    color: #eee;
+    background-color: rgba(0, 0, 0, .25) !important;
+    border: 1px solid transparent !important;
 
 }
 
 .bootstrap-tagsinput.focus {
-  background-color: #fff !important;
-  border-color: transparent;
-  outline: 0;
-  box-shadow: none;
-  color: black;
+    background-color: #fff !important;
+    border-color: transparent;
+    outline: 0;
+    box-shadow: none;
+    color: black;
 }
 
-/* Tables */
-.table {
-  color: #eee;
+.input-group-text {
+    color: var(--text);
+    background-color: rgb(0 0 0 / 25%);
+    border: 1px solid transparent;
 }
 
-.table-striped tbody tr:nth-of-type(odd) {
-  background: rgb(0 0 0 / 8%);
+.custom-chip-input .main-input {
+    background: transparent;
+    color: var(--text);
 }
 
-.table-striped tbody tr:nth-of-type(odd):hover,
-table.dataTable tbody tr:hover {
-  background: rgb(255 255 255 / 8%);
-  transition: background 500ms;
+.custom-chip-input:focus-within {
+    border-color: rgb(255 255 255 / 10%);
 }
 
-table.dataTable tbody tr {
-  background-color: transparent;
+.custom-chip-input .custom-chip {
+    color: var(--button-text);
+    background-color: var(--button-color);
 }
 
-table.dataTable tbody>tr.selected,
-table.dataTable tbody>tr>.selected {
-  background-color: rgb(255 255 255 / 15%);
+.custom-selector .selector__control .selector__multi-value,
+.selector__multi-value__label {
+    background: var(--button-color);
+    color: var(--button-text);
 }
 
-table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before,
-table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
-  border: 2px solid transparent;
-  font-family: monospace;
+/* SIDEBAR */
+.sidebar-container {
+    background-color: rgba(0, 0, 0, .25);
 }
 
-/*Checkbox*/
-table.dataTable tbody td.select-checkbox:before,
-table.dataTable tbody th.select-checkbox:before {
-  border: 1px solid #eee;
+.sidebar-container .sidebar-button {
+    background: transparent
 }
 
-.table td,
-.table th {
-  border-color: rgb(255 255 255 / 25%);
+.sidebar-container .sidebar-button:active,
+.sidebar-container .sidebar-button:focus {
+    color: #fff;
+    background-color: hsla(0, 0%, 100%, .08) !important;
 }
 
-table.dataTable tr.dtrg-group td {
-  background-color: rgb(0 0 0 / 25%);
+.sidebar-container .sidebar-button:hover {
+    background-color: hsla(0, 0%, 100%, .08) !important;
 }
 
-/* Header */
-.topbar {
-  background: var(--main-bg-color);
+.sidebar-container .sidebar-button.sb-active {
+    background-color: hsla(0, 0%, 100%, .08);
 }
 
-.topbar .top-navbar {
-  background-color: rgba(0, 0, 0, .7);
+.sidebar-container .sidebar-collapse-box.active:before,
+.sidebar-container .sidebar-button.sb-active:before {
+    background-color: rgb(var(--accent-color));
 }
 
-.page-titles {
-  background: rgb(0 0 0 / 25%);
-  box-shadow: 0px 5px 20px rgb(0 0 0 / 20%);
+@media (max-width: 767.98px) {
+
+    .sidebar-container.open,
+    .sidebar-container {
+        background: var(--modal-bg-color);
+    }
+}
+.sidebar-container .badge-secondary {
+    color: var(--button-text);
+    background-color: var(--queue-color);
+}
+/* TOP NAV BAR */
+.header-container .bg-primary {
+    background-color: rgba(0, 0, 0, .35) !important;
 }
 
-.page-titles .btn:hover:not(:disabled) {
-  color: #fff !important;
+.header-container .btn-primary {
+    color: var(--button-text);
+    background-color: transparent;
+    border-color: transparent;
 }
 
-.page-titles .btn {
-  color: hsla(0, 0%, 100%, .7) !important;
+.header-container .btn-primary.focus,
+.header-container .btn-primary:focus,
+.header-container .btn-primary:hover {
+    color: var(--button-text-hover);
+    background-color: transparent;
+    border-color: transparent;
 }
 
-.text-themecolor {
-  color: inherit !important;
+.header-container .btn-primary:not(:disabled):not(.disabled).active,
+.header-container .btn-primary:not(:disabled):not(.disabled):active,
+.header-container .show>.btn-primary.dropdown-toggle {
+    color: var(--button-text-hover);
+    background-color: transparent;
+    border-color: transparent;
 }
 
-.fa-stack {
-  color: inherit;
+/* PAGES */
+.content-header.bg-dark {
+    background: var(--main-bg-color) !important;
+    border-bottom: solid 1px rgba(255, 255, 255, .1);
+
 }
 
-[type=button]:not(:disabled),
-[type=reset]:not(:disabled),
-[type=submit]:not(:disabled),
-button:not(:disabled) {
-  cursor: pointer !important;
+.card {
+    background-color: rgba(0, 0, 0, .45);
+    box-shadow: 0 0 10px 1px #000000;
+    color: var(--text);
 }
 
-.form-material .form-control,
-.form-material .form-control.focus,
-.form-material .form-control:focus {
-  background-image: linear-gradient(var(--accent-color), var(--accent-color)), linear-gradient(#e1e2e3, #e1e2e3);
-  color: #eee;
+.settings-card:hover,
+.settings-card:focus {
+    border-color: transparent;
+    color: var(--text-hover);
 }
 
-.form-control:focus::placeholder {
-  /* Chrome, Firefox, Opera, Safari 10.1+ */
-  color: #eee;
-}
-
-.form-control:focus::-ms-input-placeholder {
-  /* Internet Explorer 10-11 */
-  color: #eee;
-}
-
-.form-control:focus::-ms-input-placeholder {
-  /* Microsoft Edge */
-  color: #eee;
-}
-
-.topbar .form-control {
-  color: #FFF;
-  background-color: transparent !important;
-  border: 1px solid rgba(0, 0, 0, .25);
-}
-
-.topbar ul.dropdown-user li a {
-  color: #eee;
-  background: var(--modal-bg-color);
-}
-
-.topbar ul.dropdown-user {
-
-  background: var(--modal-bg-color);
-}
-
-.topbar ul.dropdown-user li a:hover {
-  background: rgb(255 255 255 / 7%);
-}
-
-.buttons_bars {
-  position: absolute;
-}
-
-.nav-item .typeahead__dropdown,
-.typeahead__list {
-  background: var(--modal-bg-color);
-  border: 1px solid transparent;
-  box-shadow: 0 0 10px 1px #000;
-}
-
-.nav-item .typeahead__list>li {
-  border-top: solid 1px rgba(255, 255, 255, .25);
-}
-
-.typeahead__dropdown .typeahead__dropdown-item:not([disabled]).active>a,
-.typeahead__dropdown .typeahead__dropdown-item:not([disabled])>a:focus,
-.typeahead__dropdown .typeahead__dropdown-item:not([disabled])>a:hover,
-.typeahead__list .typeahead__item:not([disabled]).active>a,
-.typeahead__list .typeahead__item:not([disabled])>a:focus,
-.typeahead__list .typeahead__item:not([disabled])>a:hover {
-  background-color: rgb(255 255 255 / .07);
-}
-
-/* Sidebar */
-.left-sidebar {
-  position: absolute;
-  width: 240px;
-  height: 100%;
-  top: 0;
-  z-index: 20;
-  padding-top: 60px;
-  background: rgb(0 0 0 / 25%);
-  box-shadow: 0 0 0 rgba(0, 0, 0, 0.08);
-}
-
-.sidebar-nav {
-  background: rgba(255, 255, 255, 0);
-  padding: 0;
-}
-
-.card-no-border .sidebar-nav>ul>li>a.active {
-  background-color: hsla(0, 0%, 100%, .08);
-  border-left: 3px solid var(--accent-color);
-}
-
-.sidebar-nav>ul>li>a.active i,
-.sidebar-nav>ul>li>a:hover i {
-  color: white;
-}
-
-#sidebarnav .sidebar-nav>ul>li.active>a {
-  border-left: 3px solid var(--accent-color);
-  background: rgb(255 255 255 / 7%);
-}
-
-#sidebarnav .sidebar-nav>ul>li.active>a i {
-  color: #eee;
-  font-size: 14px;
-}
-
-.sidebar-nav>ul>li.active>a {
-  color: #eee;
-  border-left: 3px solid var(--accent-color);
-  background: hsla(0, 0%, 100%, .08);
-}
-
-.sidebar-nav>ul>li.active>a i {
-  color: #eee;
-  font-size: 14px;
-}
-
-@media (min-width: 768px) {
-  .mini-sidebar .sidebar-nav #sidebarnav>li.active>a.active {
-    border-color: var(--accent-color);
-  }
-}
-
-@media (min-width: 768px) {
-  .mini-sidebar .sidebar-nav #sidebarnav>li:hover>a {
-    width: 260px;
-    background: var(--main-bg-color);
-    color: #ffffff;
-    border-color: rgba(255, 255, 255, .05);
-  }
-}
-
-@media (min-width: 768px) {
-  .mini-sidebar .sidebar-nav #sidebarnav>li>ul {
-
-    background: var(--main-bg-color);
-    display: none;
-    padding-left: 1px;
-  }
-}
-
-@media (min-width: 768px) {
-  .mini-sidebar .sidebar-nav #sidebarnav li:hover {
-    position: relative;
-    background: rgba(255, 255, 255, .1);
-  }
-}
-
-.sidebar-nav ul li ul {
-  padding-left: 0px;
-  border-left: 3px solid var(--accent-color);
-}
-
-.sidebar-nav ul li ul li a {
-  padding-left: 60px;
-}
-
-.sidebar-nav ul li a.active,
-.sidebar-nav ul li a:hover {
-  background: rgba(255, 255, 255, .08);
-
+.alert-secondary {
+    color: var(--text);
+    background-color: rgba(255, 255, 255, .15);
+    border-color: rgba(255, 255, 255, .15);
 }
 
 /* Series page */
-#series .progress-bar {
-  background-color: var(--accent-color);
+.progress-bar {
+    background-color: var(--accent-color);
 }
 
-#series .progress {
-  background-color: rgb(255 255 255 / 20%);
+.progress {
+    background-color: rgb(255 255 255 / 20%);
 }
 
-#series .badge-secondary,
-#episodes_wrapper .badge-secondary {
-  background-color: var(--accent-color);
+.progress-bar.bg-primary {
+    background: rgb(var(--accent-color)) !important;
 }
 
-.card-no-border .card {
-  background: var(--modal-bg-color);
-  border: solid 1px transparent;
-  box-shadow: 0 0 10px 1px #000;
+.progress-bar.bg-warning {
+    color: #212529;
+    background-color: rgba(255, 193, 7, .8) !important;
 }
 
-#seriesDetails .badge-secondary {
-  color: #fff;
-  background-color: var(--accent-color);
+.badge-warning {
+    color: #212529;
+    background-color: rgba(255, 193, 7, .8);
 }
 
-/* Movies page */
-#movies .progress-bar {
-  background-color: var(--accent-color);
+.popover {
+    background-color: #1f1f1f;
+    border: 1px solid rgba(255, 255, 255, .2);
 }
 
-#movies .progress {
-  background-color: rgb(255 255 255 / 20%);
+.bs-popover-auto[x-placement^=top]>.arrow:after,
+.bs-popover-top>.arrow:after {
+    border-top-color: rgba(255, 255, 255, .5);
 }
 
-#movies .badge-secondary {
-  background-color: var(--accent-color);
-}
-
-#movieDetails .badge-secondary {
-  color: #fff;
-  background-color: var(--accent-color);
-}
-
-#movieSubtitles .badge-secondary {
-  background-color: var(--accent-color);
-}
-
-/*Mass Edit*/
-.container-fluid .bg-dark {
-  background: var(--modal-bg-color) !important;
-}
-
-@media (min-width: 1024px) {
-  #edit_bar {
-    margin-left: 0px;
-  }
-}
-
-/* History */
-table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before,
-table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
-  left: -15px;
-  background-color: var(--accent-color);
-}
-
-/* Wanted page */
-#wanted_series .progress {
-  background-color: rgb(255 255 255 / 20%);
-}
-
-#wanted_series .badge-secondary,
-#wanted_series_badge .badge-secondary,
-#wanted_movies_badge .badge-secondary,
-#wanted_movies .badge-secondary {
-  background-color: var(--accent-color);
-}
-
-/* Buttons */
-.btn.focus,
-.btn:focus {
-  outline: 0;
-  box-shadow: none;
-}
-
-.btn-info,
-.btn-info.disabled {
-  background: var(--button-color);
-  border: 1px solid var(--button-color);
-  box-shadow: none;
-}
-
-.btn-info:hover,
-.btn-info.disabled:hover {
-  background: var(--button-color-hover);
-  border: 1px solid var(--button-color-hover);
-  box-shadow: none;
-}
-
-.btn-info:not(:disabled):not(.disabled).active,
-.btn-info:not(:disabled):not(.disabled):active,
-.show>.btn-info.dropdown-toggle {
-  color: #fff;
-  background-color: var(--button-color);
-  border-color: var(--button-color);
-  opacity: .5;
-}
-
-.custom-control-input:checked~.custom-control-label::before {
-  color: #fff;
-  border-color: var(--button-color);
-  background-color: var(--button-color);
-}
-
-.dt-buttons .dt-button {
-  background: var(--button-color);
-  color: #eee;
-  border-color: var(--button-color);
-}
-
-.dt-buttons .dt-button:hover {
-  background: var(--button-color-hover);
-}
-
-button.dt-button:hover:not(.disabled),
-div.dt-button:hover:not(.disabled),
-a.dt-button:hover:not(.disabled) {
-  border: 1px solid transparent;
-  background: var(--button-color-hover);
-  border-color: var(--button-color-hover);
-  background-image: none !important;
-}
-
-button.dt-button.disabled,
-div.dt-button.disabled,
-a.dt-button.disabled {
-  color: #eee;
-  border: 1px solid var(--button-color);
-  background-color: var(--button-color);
-  background-image: none !important;
-  opacity: .5;
-}
-
-button.dt-button.disabled:hover,
-div.dt-button.disabled:hover,
-a.dt-button.disabled:hover {
-  color: #eee;
-  border: 1px solid var(--button-color);
-  background-color: var(--button-color);
-  background-image: none !important;
-  opacity: .5;
-  cursor: not-allowed !important;
-}
-
-.btn-light:not(:disabled):not(.disabled).active,
-.btn-light:not(:disabled):not(.disabled):active,
-.show>.btn-light.dropdown-toggle {
-  color: #eee;
-  background-color: rgba(0, 0, 0, .25);
-  border-color: transparent;
-}
-
-.btn-light {
-  background-color: rgba(0, 0, 0, .25);
-  border: 1px solid transparent;
-}
-
-.btn-light:not(:disabled):not(.disabled).active:focus,
-.btn-light:not(:disabled):not(.disabled):active:focus,
-.show>.btn-light.dropdown-toggle:focus {
-  box-shadow: none;
-  border: solid 1px transparent;
-  outline: none;
-}
-
-.bootstrap-select .dropdown-toggle:focus {
-  outline: none !important;
+.popover-header {
+    background-color: #1f1f1f;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 
 }
 
-.btn-light.focus,
-.btn-light:focus {
-  box-shadow: none;
+.popover-body {
+    color: var(--text)
 }
 
-.btn-light:hover {
-  background-color: rgb(0 0 0 / 25%);
-  border-color: transparent;
-}
-
-.btn-secondary,
-.btn-secondary.disabled {
-  background: var(--button-color);
-  border: 1px solid var(--button-color);
-}
-
-.btn-secondary:hover {
-  background: var(--button-color-hover);
-  opacity: 1;
-  border: 1px solid var(--button-color-hover);
-}
-
-.btn-secondary.disabled:hover {
-  background: var(--button-color-hover);
-  opacity: 0.7;
-  border: 1px solid var(--button-color-hover);
-}
-
-.close,
-.close:hover,
-.close:focus {
-  color: #FFF !important;
-  opacity: 1;
-}
-
-.btn-default {
-  color: hsla(0, 0%, 100%, .7);
-  background-color: rgba(0, 0, 0, .25);
-  border-color: none;
-  outline-style: none;
-}
-
-.btn-default:hover,
-.btn-default.active,
-.btn-default.active:hover {
-  color: #FFFFFF;
-  background-color: hsla(0, 0%, 100%, .08);
-  border-color: none;
-  outline-style: none;
-}
-
-.btn-default.active.focus,
-.btn-default.active:focus,
-.btn-default.active:hover,
-.btn-default:active.focus,
-.btn-default:active:focus,
-.btn-default:active:hover,
-.open>.dropdown-toggle.btn-default.focus,
-.open>.dropdown-toggle.btn-default:focus,
-.open>.dropdown-toggle.btn-default:hover {
-  color: #fff;
-  background-color: hsla(0, 0%, 100%, .08);
-  border-color: #FFF;
-}
-
-.btn {
-  color: #FFF;
-  outline: 0 !important;
-}
-
-.btn.btn-lg.btn-block.x-search-auto {
-  color: #FFF;
-  background-color: rgba(0, 0, 0, .25);
-}
-
-.btn.btn-lg.btn-block.x-search-auto:hover {
-  color: #FFF;
-  background-color: rgba(255, 255, 255, 0.05);
-}
-
-.btn.focus,
-.btn:focus,
-.btn:hover {
-  color: #fff;
-}
-
-/* Loading */
-.preloader {
-  width: 100%;
-  height: 100%;
-  top: 0px;
-  position: fixed;
-  z-index: 99999;
-  background: rgb(0 0 0 / 7%);
-}
-
-/* Pagination*/
-.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
-.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
-.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
-  color: #eee !important;
-  opacity: .1;
-}
-
-.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
-.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
-.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
-  cursor: default;
-  color: #eee;
-  border: 1px solid transparent;
-  background: transparent;
-  box-shadow: none;
-}
-
-.pagination .page-link {
-  position: relative;
-  display: block;
-  padding: .5rem .75rem;
-  margin-left: -1px;
-  line-height: 1.25;
-  background-color: rgb(0 0 0 / 15%);
-  border: 1px solid #00000000;
-}
-
-.pagination>.active>a,
-.pagination>.active>span,
-.pagination>.active>a:hover,
-.pagination>.active>span:hover,
-.pagination>.active>a:focus,
-.pagination>.active>span:focus {
-  background-color: rgb(0 0 0 / 35%);
-  border-color: rgb(0 0 0 / 35%);
-}
-
-.pagination .page-item.active .page-link {
-  z-index: 1;
-  color: #fff;
-  background-color: var(--accent-color);
-  border-color: var(--accent-color);
-}
-
-.dataTables_wrapper .dataTables_paginate .paginate_button {
-  border: 1px solid rgb(221 221 221 / 8%);
-}
-
-.pagination>li>a:hover,
-.pagination>li>span:hover,
-.pagination>li>a:focus,
-.pagination>li>span:focus {
-  background-color: rgb(242 244 248 / 15%);
-}
-
-.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
-  color: white;
-  border: 1px solid #00000000;
-  background-color: #009efb00;
-}
-
-.pagination .page-link:focus {
-  box-shadow: none;
-}
-
-/* Settings */
-.dropdown-menu,
-.topbar .dropdown-menu {
-  background: var(--modal-bg-color);
-  cursor: pointer;
-  box-shadow: 0 0 5px 0px rgb(0 0 0 / 50%);
-}
-
-.dropdown-item.active,
-.dropdown-item:active {
-  color: #fff;
-  text-decoration: none;
-  background-color: rgb(255 255 255 / 0.25);
-}
-.dropdown-item:focus, .dropdown-item:hover {
-  background-color: rgb(255 255 255 / 7%);
-}
-.dropdown-menu>li>a:hover {
-  color: white !important;
-  background-color: rgb(255 255 255 / 35%);
-}
-
-/* General */
-
-
-/* Notifications */
-.alert-secondary {
-  color: #ffffff;
-  background-color: rgb(255 255 255 / 25%);
-  border-color: transparent;
-}
-
-.alert-secondary a {
-  color: var(--accent-color) !important;
-  text-decoration: none;
-}
-
-.alert-secondary a:hover {
-  color: white !important;
-  text-decoration: none;
-}
-
-.badge-info {
-  background-color: var(--accent-color);
-  margin-left: 5px !important;
+.spinner-border {
+    color: rgb(var(--accent-color));
 }
 
 /* Modal */
 
 .modal-content {
-  box-shadow: 0 0 10px 1px #000;
-  border-radius: 3px;
-  background: var(--modal-bg-color);
-  background-repeat: repeat, no-repeat;
-  background-attachment: fixed, fixed;
-  background-position: center center, center center;
-  background-size: auto, cover;
-  -webkit-background-size: auto, cover;
-  -moz-background-size: auto, cover;
-  -o-background-size: auto, cover;
+    box-shadow: 0 0 10px 1px rgba(0, 0, 0, .1);
+    border-radius: 3px;
+    background: var(--modal-bg-color);
+    background-repeat: repeat, no-repeat;
+    background-attachment: fixed, fixed;
+    background-position: center center, center center;
+    background-size: auto, cover;
+    -webkit-background-size: auto, cover;
+    -moz-background-size: auto, cover;
+    -o-background-size: auto, cover;
 }
+
 .modal-header {
-  border-bottom: 1px solid var(--accent-color);
+    border-bottom: 1px solid var(--accent-color);
 
 }
+
 .modal-footer {
-  border-top: 1px solid var(--accent-color);
+    border-top: 1px solid var(--accent-color);
 }
+
 .modal-content .badge-secondary {
-  color: #fff;
-  background-color: var(--accent-color);
-  padding: 5px;
+    color: #fff;
+    background-color: var(--accent-color);
+    padding: 5px;
 }
 
 .modal-content button:focus {
-  outline: none !important;
+    outline: none !important;
 }
 
-/* Chart */
-.chartjs-render-monitor {
-  filter: invert(1);
+.close {
+    float: right;
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1;
+    color: #eee;
+    text-shadow: 0 1px 0 #eee;
+    opacity: .5;
 }
 
-.highlight pre code {
-  font-size: inherit;
-  color: #eee;
+.close:hover {
+    color: #fff !important;
+    text-decoration: none;
 }
 
-.highlight {
-  background-color: rgb(255 255 255 / 0.08);
-  border-radius: 3px;
+/* BUTTONS */
+
+.btn-primary,
+.btn-outline-secondary {
+    color: var(--button-text);
+    background-color: var(--button-color);
+    border-color: var(--button-color);
 }
 
-/* Mobile */
-@media (max-width: 767px) {
-  .mini-sidebar .left-sidebar {
+.btn-primary.focus,
+.btn-primary:focus,
+.btn-primary:hover,
+.btn-outline-secondary:hover,
+.btn-outline-secondary.focus,
+.btn-outline-secondary:focus {
+    color: var(--button-text-hover);
+    background-color: var(--button-color-hover);
+    border-color: var(--button-color-hover);
+}
+
+.btn-primary:not(:disabled):not(.disabled).active,
+.btn-primary:not(:disabled):not(.disabled):active,
+.show>.btn-primary.dropdown-toggle {
+    color: var(--button-text-hover);
+    background-color: var(--button-color-hover);
+    border-color: var(--button-color-hover);
+}
+
+.btn-primary:not(:disabled):not(.disabled).active:focus,
+.btn-primary:not(:disabled):not(.disabled):active:focus,
+.show>.btn-primary.dropdown-toggle:focus,
+.btn-primary.focus,
+.btn-primary:focus {
+    box-shadow: 0 0 0 0.2rem rgba(var(--accent-color), .5);
+}
+
+.btn-primary.disabled,
+.btn-primary:disabled {
+    color: var(--button-text);
+    background-color: var(--button-color);
+    border-color: var(--button-color);
+}
+
+.btn-dark.disabled,
+.btn-dark:disabled {
+    color: var(--text-muted);
+    background-color: transparent;
+    border-color: transparent;
+}
+
+.btn-dark.disabled:hover,
+.btn-dark:disabled:hover {
+    color: var(--text-muted);
+    background-color: transparent;
+    border-color: transparent;
+}
+
+.btn-dark {
+    color: var(--button-text);
+    background-color: transparent;
+    /* rgba(var(--accent-color),.5)*/
+    border-color: transparent;
+}
+
+.btn-dark.focus,
+.btn-dark:focus,
+.btn-dark:hover {
+    color: var(--button-text-hover);
+    background-color: transparent;
+    /* rgba(var(--accent-color),.8) */
+    border-color: transparent;
+}
+
+.btn-dark.focus,
+.btn-dark:focus {
+    box-shadow: 0 0 0 0.2rem transparent;
+}
+
+.btn-dark:not(:disabled):not(.disabled).active,
+.btn-dark:not(:disabled):not(.disabled):active,
+.show>.btn-dark.dropdown-toggle {
+    color: var(--button-text-hover);
+    background-color: transparent;
+    border-color: transparent;
+}
+
+.btn-dark:not(:disabled):not(.disabled).active:focus,
+.btn-dark:not(:disabled):not(.disabled):active:focus,
+.show>.btn-dark.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem transparent;
+}
+
+.btn-light {
+    color: var(--button-text);
+    background-color: var(--button-color);
+    border-color: var(--button-color);
+}
+
+.btn-light.focus,
+.btn-light:focus,
+.btn-light:hover {
+    color: var(--button-text-hover);
+    background-color: var(--button-color-hover);
+    border-color: var(--button-color-hover);
+}
+
+.btn-light.disabled,
+.btn-light:disabled {
+    color: var(--button-text);
+    background-color: var(--button-color);
+    border-color: var(--button-color);
+}
+
+.btn-light:not(:disabled):not(.disabled).active,
+.btn-light:not(:disabled):not(.disabled):active,
+.show>.btn-light.dropdown-toggle,
+.btn-light.focus,
+.btn-light:focus {
+    color: var(--button-text-hover);
+    background-color: var(--button-color-hover);
+    border-color: var(--button-color-hover);
+}
+
+.btn-light:not(:disabled):not(.disabled).active:focus,
+.btn-light:not(:disabled):not(.disabled):active:focus,
+.show>.btn-light.dropdown-toggle:focus {
+    box-shadow: 0 0 0 0.2rem transparent;
+}
+
+.custom-control-input:focus~.custom-control-label:before {
+    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, .07);
+}
+
+.custom-control-input:checked~.custom-control-label:before {
+    border-color: rgb(var(--accent-color));
+    background-color: rgb(var(--accent-color));
+}
+
+.custom-control-input:focus~.custom-control-label:before {
+    box-shadow: 0 0 0 .2rem rgba(var(--accent-color), .25)
+}
+
+.custom-control-input:focus:not(:checked)~.custom-control-label:before {
+    border-color: var(--accent-color);
+}
+
+.custom-control-input:not(:disabled):active~.custom-control-label:before {
+    color: #fff;
+    background-color: rgb(var(--accent-color));
+    border-color: rgb(var(--accent-color));
+}
+
+.custom-checkbox .custom-control-input:indeterminate~.custom-control-label:before {
+    border-color: rgb(var(--accent-color));
+    background-color: rgb(var(--accent-color));
+}
+
+.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label:before {
+    background-color: rgba(var(--accent-color), .5)
+}
+
+.custom-checkbox .custom-control-input:disabled:indeterminate~.custom-control-label:before {
+    background-color: rgba(var(--accent-color), .5)
+}
+
+.custom-radio .custom-control-input:disabled:checked~.custom-control-label:before {
+    background-color: rgba(var(--accent-color), .5)
+}
+
+.custom-switch .custom-control-input:disabled:checked~.custom-control-label:before {
+    background-color: rgba(var(--accent-color), .5)
+}
+
+.custom-select:focus {
+    border-color: rgb(var(--accent-color));
+    outline: 0;
+    box-shadow: 0 0 0 .2rem rgba(var(--accent-color), .25)
+}
+
+.custom-file-input:focus~.custom-file-label {
+    border-color: rgb(var(--accent-color));
+    box-shadow: 0 0 0 .2rem rgba(var(--accent-color), .25)
+}
+
+/* DROPDOWN MENU */
+.dropdown-menu {
+    color: var(--text);
     background: var(--modal-bg-color);
-  }
-
-#buttons_bars .col-8 {
-    -ms-flex: none !important;
-    flex: auto;
-    max-width: fit-content;
-    padding-left: 5px;
-    padding-right: 5px;
-    display: inline-grid;
-    position: absolute;
-    z-index: 11;
 }
 
-  .page-titles .btn {
-    height: 50px !important;
-    width: 55px !important;
-    padding: 0 0;
-  }
-
-#buttons_bars .col-4 {
-    -ms-flex: none !important;
-    flex: auto;
-    display: grid;
-    padding-right: 5px !important;
-    padding-bottom: 5px !important;
-    position: inherit;
-    z-index: 10;
-    padding-left: 85%;
+.dropdown-item {
+    color: var(--text);
 }
+
+.dropdown-item:focus,
+.dropdown-item:hover {
+    color: var(--text-hover);
+    background-color: hsla(0, 0%, 100%, .08);
+}
+
+.custom-selector .selector__control {
+    background-color: #00000040;
+    border-color: rgba(0, 0, 0, 0);
+    color: #fff;
+}
+
+[class$="-singleValue"],
+[class$="-placeholder"],
+[class$="-indicatorContainer"] {
+    color: var(--text);
+}
+
+[class$="-indicatorContainer"]:hover {
+    color: var(--text-hover);
+}
+
+.custom-selector .selector__control--is-focused {
+    border-color: rgba(255, 255, 255, .2) !important;
+}
+
+.selector__menu {
+    background: var(--modal-bg-color) !important;
+    color: var(--text)
+}
+
+.custom-selector .selector__option--is-selected:active {
+    background-color: rgba(255, 255, 255, .07) !important;
+}
+
+.custom-selector .selector__option--is-focused {
+    background-color: rgba(var(--accent-color), .2)
+}
+
+.custom-selector .selector__option--is-focused:active,
+.custom-selector .selector__option--is-focused:focus {
+    background-color: rgba(var(--accent-color), .2)
+}
+
+.custom-selector .selector__option--is-selected {
+    background-color: rgb(var(--accent-color));
+}
+
+.custom-selector .selector__option--is-selected:active {
+    background-color: rgb(var(--accent-color));
+}
+
+.custom-rc-slider .rc-slider-track {
+    background: var(--button-color);
+}
+
+.custom-rc-slider .rc-slider-handle {
+    border: 3px solid var(--button-color);
+}
+
+.custom-rc-slider .rc-slider-handle:hover,
+.custom-rc-slider .rc-slider-handle:active {
+    border-color: var(--button-color-hover);
+}
+
+
+/* RECHARTS */
+.recharts-default-tooltip {
+    background: #1f1f1f !important;
+    border: transparent !important;
+}
+
+.recharts-rectangle.recharts-tooltip-cursor {
+    fill: rgba(255, 255, 255, .15) !important;
+}
+
+text {
+    stroke: none;
+    fill: var(--text-hover);
+    text-anchor: end;
+}
+
+line {
+    stroke: var(--text);
+    fill: none;
 }
\ No newline at end of file
diff --git a/CSS/themes/bazarr/dark.css b/CSS/themes/bazarr/dark.css
index d909095f..51b429aa 100644
--- a/CSS/themes/bazarr/dark.css
+++ b/CSS/themes/bazarr/dark.css
@@ -19,6 +19,16 @@
 
   --button-color: hsla(0,0%,100%,.15);
   --button-color-hover: hsla(0,0%,100%,.30);
-  --accent-color:  rgba(255, 255, 255, 0.25);
+  --button-text: #eee;
+  --button-text-hover: #FFF;
+
+  --accent-color: 100, 100, 100;
   --accent-color-hover: rgba(255, 255, 255, 0.45);
+  --queue-color: #6b5;
+  --link-color: #ddd;
+  --link-color-hover: #fff;
+    
+  --text:#eee;
+  --text-hover: #fff;
+  --text-muted: #999;
 }
\ No newline at end of file
diff --git a/CSS/themes/bazarr/hotline.css b/CSS/themes/bazarr/hotline.css
index 0fcb9800..c26f65db 100644
--- a/CSS/themes/bazarr/hotline.css
+++ b/CSS/themes/bazarr/hotline.css
@@ -19,6 +19,16 @@
 
   --button-color: hsla(0,0%,100%,.15);
   --button-color-hover: hsla(0,0%,100%,.30);
-  --accent-color:  #F44336;
+  --button-text: #eee;
+  --button-text-hover: #FFF;
+  
+  --accent-color:  244, 67, 54;
   --accent-color-hover: #0b3161;
+  --queue-color: #6b5;
+  --link-color: #ddd;
+  --link-color-hover: #fff;
+    
+  --text:#eee;
+  --text-hover: #fff;
+  --text-muted: #bbb;
 }
\ No newline at end of file
diff --git a/CSS/themes/bazarr/organizr-dark.css b/CSS/themes/bazarr/organizr-dark.css
index 33a3ae72..ed983f4b 100644
--- a/CSS/themes/bazarr/organizr-dark.css
+++ b/CSS/themes/bazarr/organizr-dark.css
@@ -19,6 +19,16 @@
 
   --button-color: #2cabe3;
   --button-color-hover: rgb(44 171 227 / .8);
-  --accent-color:  #2cabe3;
+  --button-text: #eee;
+  --button-text-hover: #fff;
+
+  --accent-color:  44, 171, 227;
   --accent-color-hover: white;
+  --queue-color: #2cabe3;
+  --link-color: #2cabe3;
+  --link-color-hover: #fff;
+    
+  --text:#96a2b4;
+  --text-hover: #fff;
+  --text-muted: #999;
 }
\ No newline at end of file
diff --git a/CSS/themes/bazarr/plex.css b/CSS/themes/bazarr/plex.css
index 4a452434..3a1c9e44 100644
--- a/CSS/themes/bazarr/plex.css
+++ b/CSS/themes/bazarr/plex.css
@@ -19,6 +19,16 @@
 
   --button-color: #cc7b19;
   --button-color-hover: #e59029;
-  --accent-color:  #e5a00d;
+  --button-text: #eee;
+  --button-text-hover: #fff;
+
+  --accent-color:  229, 160, 13;
   --accent-color-hover: #ffc107;
+  --queue-color: #27c24c;
+  --link-color: #e5a00d;
+  --link-color-hover: #fff;
+    
+  --text:#eee;
+  --text-hover: #fff;
+  --text-muted: #bbb;
 }
\ No newline at end of file
diff --git a/CSS/themes/bazarr/space-gray.css b/CSS/themes/bazarr/space-gray.css
index 5ad59e38..cd337b76 100644
--- a/CSS/themes/bazarr/space-gray.css
+++ b/CSS/themes/bazarr/space-gray.css
@@ -14,11 +14,21 @@
 /* BAZARR SPACE GRAY THEME */
 @import url(https://gilbn.github.io/theme.park/CSS/themes/bazarr/bazarr-base.css);
 :root {
-  --main-bg-color:  radial-gradient( ellipse at center,  rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;
-  --modal-bg-color: radial-gradient( ellipse at top,  rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; 
+  --main-bg-color: radial-gradient(ellipse at center, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed;
+  --modal-bg-color: radial-gradient(ellipse at top, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed;
 
   --button-color: #607D8B;
   --button-color-hover: #81a6b7;
-  --accent-color: #607D8B;
+  --button-text: #eee;
+  --button-text-hover: #fff;
+
+  --accent-color: 96, 125, 139;
   --accent-color-hover: #81a6b7;
+  --queue-color: #81a6b7;
+  --link-color: #9adfff;
+  --link-color-hover: #fff;
+
+  --text: #eee;
+  --text-hover: #fff;
+  --text-muted: #bbb;
 }
\ No newline at end of file