:root {
  --color-primary: #2563eb;
  --color-accent: #60a5fa;
  --color-warning: #f59e0b;
  --button-secondary: #4b5563;
  /* Text Colors */
  --color-text: #ffffff;
  /* Background Colors */
  --color-bg-primary: #0f172a;
  --color-bg-secondary: #1e293b;
  --color-bg-input: #131c2f;
  --color-bg-disabled: #131c2f;
  --color-border: #334155;
  /* Border Width */
  --border-width: 8px /* Suggested (4px, 8px, 16px, 18px) anything else looks like bad */
}
/* ==========================================================================
   Hidden Elements *Note: Theses disabled are my preference, feel free to enable these clump search bars*
   ========================================================================== */
#tableServicesList_filter,
#tableEmailsList_filter,
#tableAffiliatesList_filter,
#tableDomainsList_filter,
#tableQuotesList_filter,
#tableInvoicesList_filter,
#tableTicketsList_filter,
.input-group-prepend,
header.header .search .form-control,
header.header .search {
  display: none;
}

/* ==========================================================================
   Base Elements
   ========================================================================== */
body,
.table,
.popover-user-notifications ul li a {
  color: var(--color-text);
}
.popover-user-notifications ul li a:hover {
  background-color: var(--color-bg-secondary);
  border-radius: var(--border-width);
}
.bs-popover-bottom > .arrow::after {
  border-bottom-color: var(--color-bg-primary);
}
.popover,
#popup-backdrop {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
}
.popover-user-notifications {
  border: var(--color-border);
  border-radius: 10px;
}
.verification-banner {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  border-bottom: var(--color-border);
}
.verification-banner.email-verification .btn.btn-action,
.verification-banner.email-verification .btn.btn-action:active,
.verification-banner.email-verification .btn.btn-action[disabled]:hover {
  background-color: var(--color-accent);
  border-color: transparent;
}
.verification-banner .fal,
.verification-banner .far,
.verification-banner .fas {
  color: var(--color-warning);
}
/* ==========================================================================
   Links & Text Accents
   ========================================================================== */
a,
a:hover,
.popover-body,
.fa-inverse,
code {
  color: var(--color-accent);
}
pre {
  color: var(--color-text);
}
.truncate {
  white-space: wrap;
}
.fa-circle {
  color: var(--color-bg-primary);
}
.fa-flag {
  color: var(--color-warning);
}
/* ==========================================================================
   Buttons & Interactive Elements
   ========================================================================== */
/* Border radius shared styles */
.btn-sm,
.btn-default,
.btn-primary,
.btn-success,
.btn-default:hover,
.btn-default:focus,
.btn-primary:hover,
.btn-primary.focus,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus {
  border-radius: var(--border-width);
  box-shadow: disabled;
}
.btn-default:hover {
  border-color: var(--color-border);
}
.btn:focus {
  box-shadow: disabled;
}

.btn-link,
.btn-link:hover {
  color: var(--color-warning);
  box-shadow: none;
}
.btn-outline-primary {
  color: var(--color-accent);
  border-color: var(--button-secondary);
  border-radius: var(--border-width);
}
.btn-outline-primary:not(:disabled):not(.disabled):active {
  background-color: var(--color-accent);
  color: var(--color-text);
  border-color: var(--button-secondary);
}
.btn-outline-primary:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-accent);
  border-color: var(--button-secondary);
}
.btn-outline-primary.focus,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.page-link:focus {
  box-shadow: none;
}
.btn-default,
.btn-default:active,
.btn-default:active:focus,
.btn-default:active:hover,
.btn-info,
.btn-secondary,
.list-group-item.active,
.btn-primary,
header.header .search .btn {
  color: var(--color-text);
  background-color: var(--color-accent);
  border-color: transparent;
}

.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: var(--color-text);
  background-color: var(--color-accent);
  border-color: transparent;
}

.btn-default {
  background-color: var(--button-secondary);
}

.btn-primary:disabled {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
}

.btn-default.disabled {
  border-color: transparent;
}

.btn-danger.disabled,
.btn-danger:disabled {
  margin-bottom: 15px;
}

.btn-info:hover,
.btn-info:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-default:hover,
.btn-default:focus,
.btn-default.active,
.btn-default.active:hover,
.input-group .btn-reveal-pw:active,
.input-group .btn-reveal-pw:hover,
.btn-default.active:focus {
  background-color: var(--color-accent);
  border-color: var(--color-border);
  color: var(--color-text);
}
.list-group-item.disabled,
.list-group-item:disabled {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  color: var(--color-text);
  background-color: var(--color-accent);
  border-color: transparent;
}

.page-item.active .page-link,
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  background-color: var(--button-secondary);
  border-color: var(--color-border);
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary {
  color: var(--color-text);
  background-color: var(--color-warning);
}

#ticketReply {
  margin-bottom: 15px;
}
.select-account {
  border-top: 1px solid var(--color-border);
}
.select-account a {
  border-bottom: 1px solid var(--color-border);
}
.select-account a:hover {
  background-color: var(--color-bg-secondary);
}
.action-icon-btns a {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  border-radius: var(--border-width);
}
.action-icon-btns a:hover {
  color: var(--color-text);
}
.action-icon-btns a:hover .ico-container {
  font-size: 2.8em;
  transition: font-size 0.3s ease;
}
/* ==========================================================================
   Alerts & Notifications
   ========================================================================== */
.alert-danger,
.alert-warning,
.alert-info,
.status-cancelled {
  background-color: var(--color-warning);
  border: 1px solid var(--color-border);
  color: #000;
  font-weight: 400;
  border-radius: var(--border-width);
}
.status-closed {
  background-color: var(--button-secondary);
}
.alert-success,
.badge-info {
  background-color: var(--color-accent);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: var(--border-width);
}
.network-issue-alert {
  background-color: var(--color-bg-secondary);
  color: var(--color-warning);
  border: 1px solid var(--color-border);
  font-weight: 600;
}
.alert-info .alert-link {
  color: var(--color-warning);
}
.badge-secondary {
  background-color: var(--color-accent);
}
.announcements .announcement article {
  background-color: var(--color-bg-secondary);
  border-left: 4px solid var(--color-border);
}
.badge {
  padding: 6px;
  border-radius: 5px;
}

.label-default {
  background-color: #e53935;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 15px;
}
.label-info {
  background-color: var(--color-warning);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 15px;
}
.view-ticket .posted-by {
  background-color: var(--color-bg-primary);
  color: #9ca3af;
}
.view-ticket .attachments {
  border-top: 1px dashed var(--color-border);
}
.view-ticket .card-body {
  border-bottom: 1px solid var(--color-border);
}
.requestor-type-operator {
  background-color: #e53935;
}
.view-ticket .attachment-list li span {
  border: 1px solid var(--color-border);
}
.view-ticket .attachment-list li figure {
  background-color: var(--color-bg-secondary);
}
html
  body.primary-bg-color
  section#main-body
  div.container
  div.row
  div.col-12.primary-content
  div.row
  div.col-md-4
  div.affiliate-stat.affiliate-stat-green.alert-warning.mb-2,
html
  body.primary-bg-color
  section#main-body
  div.container
  div.row
  div.col-12.primary-content
  div.row
  div.col-md-4
  div.affiliate-stat.affiliate-stat-green.alert-info.mb-2 {
  background-color: #369;
  color: var(--color-text);
}
html
  body.primary-bg-color
  section#main-body
  div.container
  div.row
  div.col-12.primary-content
  div.card.my-3
  div.card-body
  input.form-control {
  background-color: var(--color-bg-primary);
  color: var(--color-accent);
}

/* ==========================================================================
   Header Components
   ========================================================================== */
header.header,
.progress {
  background-color: var(--color-bg-secondary);
}
header.header .logo-img {
  max-width: 50px;
}
header.header .topbar {
  background-color: var(--color-bg-primary);
}
header.header .topbar .active-client .btn.btn-active-client span {
  border-bottom: none !important;
}
header.header .topbar .active-client .btn {
  color: var(--color-warning);
}
header.header .search {
  border: 1px solid var(--color-border);
}

header.header .toolbar .nav-link {
  border: 1px solid var(--color-border);
  font-size: 1.2em;
  border-radius: var(--border-width);
}

header.header .navbar a {
  color: var(--color-text);
}
.markdown-content h2 {
  color: var(--color-text);
}
.nav-tabs {
  border-bottom: 1px solid var(--color-border);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:focus {
  background-color: var(--color-bg-secondary);
  border: 1px solid transparent;
  color: var(--color-accent);
}
.nav-tabs .nav-link:hover {
  border-color: transparent;
}
.nav-link {
  color: var(--color-text);
}
.responsive-tabs-sm .nav-item a:hover {
  background-color: var(--color-bg-secondary);
}

/* ==========================================================================
   Navigation & Menus
   ========================================================================== */
.dropdown-menu {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}
.breadcrumb-item.active {
  color: var(--color-text);
}
.master-breadcrumb,
.breadcrumb {
  background-color: var(--color-bg-primary);
}
.primary-bg-color,
.modal .modal-header {
  background-color: var(--color-bg-primary);
}
.modal-header {
  border-bottom: 1px solid var(--color-border);
}
.modal-footer {
  border-top: 1px solid var(--color-border);
}
.dropdown-item,
.dropdown-item:hover {
  color: var(--color-text);
}
.dropdown-item:hover,
.dropdown-item:focus,
header.header .dropdown-item:active {
  background-color: var(--color-bg-primary);
}
.page-link,
.page-link:focus,
.page-link:hover {
  background: #202020;
  color: #4f5360;
  border: 1px solid transparent;
}
.page-link:focus {
  border-color: var(--color-border);
}
.page-item.disabled .page-link {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
}
.dropdown-divider {
  border-top: 1px solid var(--color-bg-primary);
}
.intl-tel-input .country-list {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}
.intl-tel-input .country-list .divider {
  border-bottom: 1px solid var(--color-bg-primary);
}
/* ==========================================================================
   Cards, Tiles & Containers
   ========================================================================== */
.bg-white {
  background-color: var(--color-bg-primary) !important;
}
.bg-primary {
  background-color: var(--color-bg-primary) !important;
}
.border-bottom {
  border-bottom: 1px solid var(--color-border) !important;
}
.border-left {
  border-left: 1px solid var(--color-border) !important;
}
.card,
.modal-content,
.client-home-cards .card-header,
div.product-details div.product-icon {
  background-color: var(--color-bg-secondary);
}
.card-header,
.card-footer {
  background-color: var(--color-bg-secondary);
}
div.product-details-tab-container {
  border: 1px solid var(--color-border);
}
.card {
  border-radius: var(--border-width);
}
.card:hover {
  background-color: var(--color-bg-secondary);
}

.client-home-cards .list-group {
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
.client-home-cards .list-group .list-group-item {
  border-bottom: 1px solid var(--color-border);
}
.list-group-flush > .list-group-item {
  border-width: 0 0 0px;
}
.tiles .tile,
.tiles .tile:hover {
  background-color: var(--color-bg-primary);
  border-radius: 15px;
  border-right: 4px solid var(--color-border);
  margin-right: 5px;
}
.tiles .tile {
  border-color: var(--color-border);
}
.tiles .tile i {
  font-size: 40px;
}

.tiles .tile:hover i {
  font-size: 45px;
  color: var(--color-accent);
}

.table-dark {
  background-color: var(--color-bg-secondary);
}
.kb-category a:hover,
.kb-category a:focus,
.kb-article-item:hover,
.kb-article-item:focus {
  background-color: transparent;
}
.requestor-type-owner {
  background-color: #9ca3af;
}
.card-body {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-width);
}
.card-accent-midnight-blue {
  border-top: 3px solid var(--color-accent);
}
/* ==========================================================================
   Form Controls
   ========================================================================== */
.form-control,
.form-control:focus,
#registration .field,
#registration .form-control:focus,
#registration .form-control {
  background-color: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--border-width);
}
#registration .sub-heading span {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  border-radius: var(--border-width);
}
#registration .sub-heading {
  border-top: 1px solid var(--color-bg-secondary);
}
.form-control,
.form-control:focus,
.custom-select:disabled {
  color: var(--color-text);
}
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--color-bg-disabled);
}

.input-group-text {
  background-color: var(--color-bg-input);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.dataTables_wrapper .dataTables_filter label .form-control {
  background: var(--color-bg-input) no-repeat 8px 5px;
}
.table-list:hover > tbody > tr > td {
  background-color: var(--color-bg-primary);
}
.table-hover tbody tr:hover {
  color: var(--color-text);
}
.dataTables_wrapper table.table-list {
  border: 1px solid var(--color-border);
}
.dataTables_wrapper table.table-list thead th.sorting_desc,
.dataTables_wrapper table.table-list thead th,
.dataTables_wrapper table.table-list thead th.sorting_asc {
  background-color: var(--color-bg-primary);
  color: var(--color-text);
  border-bottom: 4px solid var(--color-border);
}
.table th {
  border-top: 2px solid var(--color-border);
}
.custom-file-label {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.custom-file-label::after {
  color: var(--color-text);
  background-color: var(--button-secondary);
  border-color: transparent;
}
.bg-white {
  background-color: var(--color-bg-primary);
}
.modal-localisation .modal-content {
  background-color: var(--color-bg-secondary);
}
.modal-localisation .item-selector .item.active,
.modal-localisation .item-selector .item:hover {
  background-color: var(--color-accent);
  border-color: var(--color-border);
  color: var(--color-text);
}
.modal-localisation .item-selector .item {
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: var(--border-width);
  background-color: var(--button-secondary);
}
/* ==========================================================================
   List Groups & Sidebars
   ========================================================================== */
.list-group-item {
  background-color: var(--color-bg-primary);
}

.list-group-item-action {
  color: var(--color-text);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: transparent;
  color: var(--color-text);
}

.sidebar .list-group-item.active,
.list-group-item-action:active,
.sidebar .list-group-item.active:focus,
.sidebar .list-group-item.active:hover {
  background-color: var(--color-accent);
}

.sidebar .list-group-item {
  border-color: var(--color-border);
}
#ClientAreaHomePagePanels-Active_Products_Services-0 {
  border-bottom: 1px solid var(--color-border) !important;
}
.sidebar .list-group-item .badge {
  background-color: var(--color-bg-secondary);
  color: var(--color-accent);
}

/* ==========================================================================
   Tables
   ========================================================================== */
.table-list > tbody > tr > td,
.table-list > tbody > tr > td:hover {
  background-color: transparent;
}

.table-bordered td {
  border: 1px solid var(--color-border);
}

.table td {
  border-top: 1px solid var(--color-border);
}
.table thead th {
  border-bottom: 2px solid var(--color-border);
}

/* ==========================================================================
   Editors
   ========================================================================== */
.md-editor,
div.md-editor.active {
  border: 1px solid var(--color-border);
}
.md-editor > .btn-toolbar {
  background-color: var(--color-bg-primary) !important;
}

.md-editor > textarea.markdown-editor {
  background-color: var(--color-bg-secondary) !important;
}

.md-editor.md-fullscreen-mode,
.md-editor.md-fullscreen-mode .md-input,
.md-editor.md-fullscreen-mode .md-preview,
.md-editor.md-fullscreen-mode .md-input:focus,
.md-editor.md-fullscreen-mode .md-input:hover {
  background-color: var(--color-bg-primary) !important;
}
.md-editor .md-footer {
  background-color: var(--color-bg-primary);
}

.md-editor > textarea.markdown-editor {
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
.md-preview {
  background-color: var(--color-bg-primary);
}
.md-editor > .md-preview,
.md-editor > textarea.markdown-editor {
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
  background-color: var(--color-bg-secondary) !important;
}
/* ==========================================================================
   Footer
   ========================================================================== */
footer.footer {
  background-color: var(--color-bg-primary);
}
footer.footer .nav-link:hover {
  color: var(--color-accent);
}
footer.footer .btn {
  color: var(--color-text);
}
footer.footer .copyright {
  color: var(--button-secondary);
}