: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: These are choices on disabling and you can 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 & Typography
       ========================================================================== */
body,
.table,
.popover-user-notifications ul li a {
  color: var(--color-text);
}

a,
a:hover,
.popover-body,
code {
  color: var(--color-accent);
}

.fa-inverse {
  color: var(--color-bg-secondary);
}

.fa-circle {
  color: var(--color-accent);
}

.fa-flag {
  color: var(--color-warning);
}

pre {
  color: var(--color-text);
}

h1,
h4 {
  font-weight: 600;
}

.truncate {
  white-space: wrap;
}

.markdown-content h2 {
  color: var(--color-text);
}

/* ==========================================================================
       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-secondary);
}

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);
}

header.header .dropdown-item:active {
  background-color: var(--color-bg-primary);
}

header.header .search .btn {
  color: var(--color-text);
  background-color: var(--color-accent);
  border-color: transparent;
}

/* ==========================================================================
       Navigation & Breadcrumbs
       ========================================================================== */
.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);
}

.breadcrumb-item.active {
  color: var(--color-text);
}

.master-breadcrumb,
.breadcrumb {
  background-color: var(--color-bg-primary);
}

/* ==========================================================================
       Buttons & Interactive Elements
       ========================================================================== */
/* Common button properties */
.btn-sm,
.btn.focus,
.btn:focus,
.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: none;
}

.btn:focus {
  box-shadow: none;
}

/* Primary buttons */
.btn-primary,
.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;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-accent);
  border-color: var(--color-border);
  color: var(--color-text);
}

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

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
  box-shadow: none;
}

/* Default buttons */
.btn-default,
.btn-default:active,
.btn-default:active:focus,
.btn-default:active:hover {
  color: var(--color-text);
  background-color: var(--button-secondary);
  border-color: transparent;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.active,
.btn-default.active:hover,
.btn-default.active:focus {
  background-color: var(--color-accent);
  border-color: var(--color-border);
  color: var(--color-text);
}

.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.disabled {
  border-color: transparent;
}

.btn-default[disabled]:hover {
  background-color: var(--color-accent);
  border-color: transparent;
}

/* Info & Secondary buttons */
.btn-info,
.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled):active {
  color: var(--color-text);
  background-color: var(--color-accent);
  border-color: transparent;
}

.btn-info:hover,
.btn-info:focus {
  background-color: var(--color-accent);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Outline buttons */
.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;
}

/* Link buttons */
.btn-link,
.btn-link:hover {
  color: var(--color-warning);
  box-shadow: none;
}

/* Action buttons */
.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;
}

/* Other interactive elements */
.input-group .btn-reveal-pw:active,
.input-group .btn-reveal-pw:hover {
  background-color: var(--color-accent);
  border-color: var(--color-border);
  color: var(--color-text);
}

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

.bootstrap-switch.bootstrap-switch-focused {
  box-shadow: none;
}

/* ==========================================================================
       Dropdowns & Popovers
       ========================================================================== */
.dropdown-menu {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.dropdown-item,
.dropdown-item:hover {
  color: var(--color-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--color-bg-primary);
}

.dropdown-divider {
  border-top: 1px solid 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;
}

.popover-user-notifications ul li a {
  background-color: var(--color-bg-secondary);
}

.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);
}

.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);
}

/* ==========================================================================
       Cards, Tiles & Containers
       ========================================================================== */
.card,
.modal-content,
.client-home-cards .card-header,
div.product-details div.product-icon {
  background-color: var(--color-bg-secondary);
}

.card {
  border-radius: var(--border-width);
}

.card:hover {
  background-color: var(--color-bg-secondary);
}

.card-header,
.card-footer {
  background-color: var(--color-bg-secondary);
}

.card-body {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-width);
}

.card-accent-midnight-blue {
  border-top: 3px solid var(--color-accent);
}

.tiles .tile,
.tiles .tile:hover {
  background-color: var(--color-bg-primary);
  border-radius: 25px;
  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);
}

.bg-white {
  background-color: var(--color-bg-secondary) !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;
}

.primary-bg-color,
.modal .modal-header {
  background-color: var(--color-bg-primary);
}

.promo-banner {
  background-color: var(--color-bg-primary);
}

div.product-details-tab-container {
  border: 1px solid var(--color-border);
}

/* ==========================================================================
       List Groups & Sidebars
       ========================================================================== */
.list-group-item {
  background-color: var(--color-bg-secondary);
}

.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);
}

.list-group-item.active,
.list-group-item-action:active {
  color: var(--color-text);
  background-color: var(--color-accent);
  border-color: transparent;
}

.list-group-item.disabled,
.list-group-item:disabled {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
}

.list-group-flush>.list-group-item {
  border-width: 0 0 0px;
}

.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);
}

#ClientAreaHomePagePanels-Active_Products_Services-0 {
  border-bottom: 1px solid var(--color-border) !important;
}

/* Sidebar specific */
.sidebar .list-group-item.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);
  background-color: var(--color-bg-secondary);
}

.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: var(--color-bg-secondary);
}

.table-list:hover>tbody>tr>td {
  background-color: var(--color-bg-secondary);
}

.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);
}

.dataTables_wrapper .dataTables_filter label .form-control {
  background: var(--color-bg-input) no-repeat 8px 5px;
}

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

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

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

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

.table-dark {
  background-color: var(--color-bg-secondary);
}

.invoice-summary-table td.total-row {
  background-color: var(--color-bg-input)
}

/* ==========================================================================
       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);
  color: var(--color-text);
}

.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
  background-color: var(--color-bg-disabled);
  color: var(--color-text);
  cursor: not-allowed;
}

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

.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;
}

#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);
}

.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);
}

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);
}

/* ==========================================================================
       Pagination
       ========================================================================== */
.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);
}

.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);
}

/* ==========================================================================
       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);
}

.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);
}

.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;
}

.status-closed {
  background-color: var(--button-secondary);
}

.announcements .announcement article {
  background-color: var(--color-bg-secondary);
  border-left: 4px solid var(--color-border);
}

.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);
}

/* ==========================================================================
       Modals
       ========================================================================== */
.modal-header {
  border-bottom: 1px solid var(--color-border);
}

.modal-footer {
  border-top: 1px solid var(--color-border);
}

.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);
}

/* ==========================================================================
       KB/Article Components
       ========================================================================== */
.kb-category a:hover,
.kb-category a:focus,
.kb-article-item:hover,
.kb-article-item:focus {
  background-color: transparent;
}

/* ==========================================================================
       Domain Search
       ========================================================================== */
.home-domain-search .input-group-wrapper {
  background-color: var(--color-bg-secondary) !important;
  border: 1px solid var(--color-border);
}

/* ==========================================================================
       Ticket System
       ========================================================================== */
.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);
}

.view-ticket .attachment-list li span {
  border: 1px solid var(--color-border);
}

.view-ticket .attachment-list li figure {
  background-color: var(--color-bg-secondary);
}

.requestor-type-operator {
  background-color: #e53935;
}

.requestor-type-owner {
  background-color: #9ca3af;
}

.ticketfeedbackstaffcont {
  background-color: var(--color-bg-secondary);
}

/* ==========================================================================
       Affiliate Section
       ========================================================================== */
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);
}

/* ==========================================================================
       Markdown Editor
       ========================================================================== */
.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,
.md-editor>.md-preview,
.md-editor>textarea.markdown-editor {
  background-color: var(--color-bg-secondary) !important;
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !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-preview {
  background-color: var(--color-bg-primary);
}

/* ==========================================================================
       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);
}