body {
  background-color: var(--color-background);
  color: var(--color-black);
}

.wrap {
  background-color: rgb(var(--white));
}

.navbar-inner.userProfile {
  border-bottom-color: var(--color-black);
}

.userProfile .nav-pills > li.active > a,
.userProfile .nav-pills > li.active > a:focus,
.userProfile .nav-pills > li.active > a:hover {
  color: var(--color-black);
  border-color: var(--color-black);
}

.userProfile .nav-pills > li > a {
  color: var(--color-black);
}

.eoi-tooltip > span[data-tooltip]:after {
  color: rgb(var(--white));
  background-color: rgb(var(--black));
}

.eoi-tooltip > span[data-tooltip]:before {
  border-top-color: rgb(var(--black));
}

.password-reminder {
  background-color: var(--color-alert-20);
}

.white-link {
  color: rgb(var(--white));
}

#bulkToolsFeatures [data-option] input[type='radio']:checked:before {
  background-color: var(--color-accent);
}

/* FONTS */

h1 {
  color: var(--color-primary);
}

.welcome-to {
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* END FONTS */

/* CONTENT PAGES */
.logo-container img {
  color: var(--color-secondary-light);
}
/* END CONTENT PAGES */

/* ICONS */
.crumbs {
  color: var(--color-secondary-light);
}
/* END ICONS */

/* LOGIN PAGE */

#loginBody {
  background-color: #17173a;
  background-color: var(--color-primary);
  color: #ffffff;
  color: rgb(var(--white));
}

#appLogin {
  box-shadow: 3px 3px 40px rgba(0, 0, 0, 0.04);
}

#appLogin,
#appLogin input:focus,
#appLogin input {
  background: rgba(var(--white), 0.06);
}

#loader,
#sidebar {
  background-color: var(--color-primary);
}

.app-header {
  background-color: rgb(var(--white));
  color: var(--color-black);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
}

header .profile-menu p,
header .profile-menu ul li a {
  color: inherit;
}

header .profile-menu ul li a {
  background-color: rgb(var(--white));
}

header .profile-menu ul li a span {
  color: var(--color-grey);
}

#loginBody input {
  color: inherit;
}

.need-help a {
  color: var(--color-accent);
}

#loginBody form button {
  background-color: #00dec8;
  background-color: var(--color-accent);
  color: #ffffff;
  color: rgb(var(--white));
}
/* END LOGIN PAGE */

/* HEADER */

/* Bottom functionality elements */

header .profile-menu p:hover {
  background-color: var(--color-grey-light);
}

.profile-menu-element {
  background-color: white;
}
.profile-menu-element:hover {
  color: var(--color-grey-less-dark);
}
/* User info card element */
.profile-menu-user {
  background-color: white;
}

#header-avatar {
  cursor: pointer;
}

/* For styling of only the list 'profile-pic' */
.profile-pic {
  background-color: var(--color-avatar-background);
  color: var(--color-avatar-text);
}

.profile-menu-name:hover {
  cursor: default;
  text-decoration: none;
}

/* END HEADER */

/* SIDEBAR */

#sidebar {
  color: rgb(var(--white));
}

#sidebar ul li p,
#sidebar p a,
#sidebar .menu-submenu:before,
#sidebar .nav-toggle span {
  color: inherit;
}
.nav-icon {
  fill: rgb(var(--white));
}

#sidebar ul li:not(.sidebar-card).active {
  background-color: rgba(var(--white), 0.04);
}

.sidebar-card a {
  color: rgba(var(--white), 0.5);
}
#sidebar .menu-submenu .menu-submenu-title {
  color: var(--color-accent);
}

#sidebar .menu-submenu .menu-submenu-title:before {
  background-color: var(--color-accent);
}

#sidebar ul li.active p span,
#sidebar p:hover span {
  color: var(--color-accent);
}
#sidebar ul .active p svg,
#sidebar p:hover svg {
  fill: var(--color-accent);
}

#sidebar .nav-toggle {
  background-color: rgba(var(--black), 0.2);
}

#sidebar .nav-toggle:hover {
  background-color: var(--color-primary);
}
.sidebar-card div {
  background-color: none;
}
.sidebar-card.active div {
  background-color: var(--color-accent);
}
.sidebar-card.active a {
  color: white;
}
#sidebar ul li p:hover span,
#sidebar .nav-toggle:hover .fas {
  color: var(--color-accent);
}
#sidebar ul li ul li a:hover {
  color: rgb(var(--white));
}

/* END SIDEBAR */

/* BUTTONS */

.button,
.upload-btn {
  background-color: var(--color-alternate);
  border-color: var(--color-alternate);
  color: rgb(var(--white));
}

.button {
  transition: all 0.2s ease;
}

button.text-only,
.button.text-only {
  background-color: transparent;
  color: var(--color-alternate);
}
.button.text-only:hover {
  color: var(--color-alternate-light);
}

.button:not([disabled]):not(.text-only):hover {
  background-color: var(--color-toggle-switch-alternate-hover);
  border-color: var(--color-toggle-switch-alternate-hover);
}
.button:not([disabled]):not(.secondary):not(.text-only):hover,
.button:not([disabled]):not(.secondary):not(.text-only):focus {
  background-color: var(--color-alternate-light);
  border-color: var(--color-alternate-light);
}

.button.secondary {
  background-color: transparent;
  color: var(--color-alternate);
  border-color: var(--color-alternate);
}

.button.secondary:not([disabled]):hover {
  color: rgb(var(--white));
  background-color: var(--color-alternate-light);
  border-color: var(--color-alternate-light);
}

/* END BUTTONS */

/* FORMS */
form div label {
  color: var(--color-black);
}

form input,
form textarea,
form select,
select {
  border-color: var(--color-grey);
}

form select,
select {
  color: var(--color-grey-dark);
}

form button {
  background-color: var(--color-accent-light);
  color: rgb(var(--white));
}

form input,
.upload-area {
  background-color: rgb(var(--white));
}

input[type='search'] {
  background-color: rgb(var(--white));
}

form input:focus,
select:focus,
form button:focus {
  outline-color: var(--color-grey-light);
}

form.login input:not([type='checkbox']):not([type='radio']) {
  background-color: var(--color-grey-light);
}

input:disabled + label {
  color: var(--color-grey);
}

input[type='text'][disabled],
input[type='email'][disabled],
input[type='password'][disabled],
select[disabled] {
  background-color: var(--color-grey-light);
}

.upload-file-name {
  background-color: var(--color-grey-light);
}

.upload-file-name.fileChosen {
  background-color: var(--color-success-20);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

.dashboard__filtering div {
  background-color: var(--color-grey-light);
  padding:6px;
  border-radius:999px
}

/* END FORMS */

/* TABLES */

table tr th,
.table tr td {
  background-color: rgb(var(--white));
}

table thead tr th {
  color: var(--color-black);
  background-color: var(--color-grey-light);
}

table tr:nth-child(even) td {
  background-color: var(--color-grey-lightest);
}

table :not(thead) tr:hover th,
.table tr:hover td,
table tr.highlight th,
table tr.highlight td {
  background-color: var(--color-accent-10);
}

table tr.inactive td {
  background-color: var(--color-alert-20);
}

/* END TABLES */

/* STEPPER */

.stepper ul li a,
.stepper ul li a:before {
  background-color: rgb(var(--white));
}

.stepper ul li a:before {
  border-color: var(--color-grey);
}

.stepper ul::after {
  background: var(--color-grey-hover);
}

.stpper ul li a.active + ul li a::after {
  background: var(--color-secondary);
}

.stepper ul li {
  color: var(--color-grey-dark);
  background-color: rgb(var(--white));
}

.stepper ul li a:before {
  color: white;
  background-color: var(--color-grey-hover);
}

.stepper ul li a {
  color: var(--white);
  border: 1px solid var(--color-grey-hover);
}

.stepper ul li a.active {
  border-color: var(--color-secondary-light);
  color: var(--color-secondary-light);
}

.stepper ul li a.active:before {
  background-color: var(--color-secondary-light);
  border-color: var(--color-secondary-light);
  color: rgb(var(--white));
}

.stepper ul li a.completed {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.stepper ul li a.completed.active:hover {
  background-color: var(--color-secondary-light);
  color: rgb(var(--white));
}
.stepper ul li a.completed:hover {
  background-color: var(--color-secondary);
  color: rgb(var(--white));
}

.stepper ul li a:not(.active):not(.completed):hover {
  background: var(--color-grey-light);
}

.stepper ul li a.completed:before {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: rgb(var(--white));
}

.stepper ul li a.completed.active {
  border-color: var(--color-secondary-light);
  color: var(--color-secondary-light);
}
.stepper ul li a.completed.active::before {
  border-color: var(--color-secondary-light);
  background-color: var(--color-secondary-light);
}

.stepper ul li a.completed::after {
  background: var(--color-secondary);
}

/* END STEPPER */

/* NOTIFICATIONS */
#notifications div {
  background-color: var(--color-info);
}
#notifications div.err {
  background-color: var(--color-alert);
}

#notifications div p {
  color: rgb(var(--white));
}

#notifications div span {
  color: var(--color-grey-light);
}

/* END NOTIFICATIONS */

/* PROGRESS BAR */

.progress-bar .bar {
  background-color: rgb(var(--white));
}
.progress-bar .bar .progress {
  background-color: var(--color-accent);
}

/* END PROGRESS BAR */

/* MODAL */

.dataModal-container {
  background-color: var(--color-grey-light);
  border-color: var(--color-grey-dark);
}

.close:hover,
.close:focus {
  color: var(--color-black);
}

/* END MODAL */

/* HOME GRID */

#homePage .grid .col {
  color: var(--color-primary);
  background-color: rgb(var(--white));
}

#homePage .grid .col h2,
#homePage .grid .col p {
  color: inherit;
}

.grid .col .fal {
  color: var(--color-accent);
}

#homePage .grid .col:hover {
  background-color: var(--color-primary);
  color: rgb(var(--white));
}

/* END HOME GRID */

/* USER PROFILE PAGE */

.profile .profile-img {
  background-color: rgb(var(--white));
  border-color: rgb(var(--white));
}

/* END USER PROFILE PAGE */

/* TOGGLE SWITCHES */

.toggle-switch input:checked + label .toggle-switch-check {
  background: var(--color-alternate);
}
.toggle-switch input:checked + label .toggle-switch-check:hover {
  background: var(--color-toggle-switch-alternate-hover);
}

.toggle-switch label .toggle-switch-check {
  background-color: var(--color-grey);
}
.toggle-switch label .toggle-switch-check:hover {
  background-color: var(--color-toggle-switch-grey-hover);
}

.toggle-switch label .toggle-switch-check:before {
  background-color: rgb(var(--white));
}

.custom-radio input:checked + label .custom-radio-check:before {
  background-color: var(--color-alternate);
}
.custom-radio input:checked:hover + label .custom-radio-check:before {
  background-color: var(--color-toggle-switch-alternate-hover);
}

.custom-radio .custom-radio-check,
.custom-checkbox .custom-checkbox-check,
.custom-checkbox .custom-checkbox-check:before {
  border-color: var(--color-alternate);
}

.custom-radio-check:hover {
  border-color: var(--color-toggle-switch-alternate-hover);
}

/* END TOGGLE SWITCHES */

/* DASHBOARD */

.dashboard-content {
  background-color: rgb(var(--white));
}

.lit-table-main {
  border-bottom-color: var(--color-grey-light);
}

.lit-table th {
  color: var(--color-secondary);
  border-bottom: 1px solid var(--color-secondary);
}

.lit-table td span.status.transition,
.lit-table td.status.transition span {
    color: var(--color-warning);
    background-color: rgba(var(--color-warning-rgb), 0.15);
    border-color: currentColor;
}

.er-modal__body span.status.queued,
.lit-table td span.status.queued,
.lit-table td.status.queued span {
    color: var(--color-info);
    background-color: rgba(var(--color-info-rgb), 0.15);
    border-color: currentColor;
}
.er-modal__body span.status.processing,
.lit-table td span.status.processing,
.lit-table td.status.processing span {
  color: rgb(var(--white));
  background-color: var(--color-info);
  border-color: var(--color-info);
}
.er-modal__body span.status.completed,
.lit-table td span.status.completed,
.lit-table td.status.completed span {
    color: var(--color-success);
    background-color: rgba(var(--color-success-rgb), 0.15);
    border-color: currentColor;
}
.er-modal__body span.status.cancelled,
.lit-table td span.status.cancelled,
.lit-table td.status.cancelled span
.er-modal__body span.status.timed-out,
.er-modal__body span.status.completed-with-errors,
.lit-table td span.status.completed-with-errors,
.lit-table td.status.completed-with-errors span,
.lit-table td span.status.timed-out,
.lit-table td.status.timed-out span {
    color: var(--color-caution);
    background-color: rgba(var(--color-caution-rgb), 0.15);
    border-color: currentColor;
}
.er-modal__body span.status.failed,
.lit-table td span.status.failed,
.lit-table td.status.failed span {
    color: var(--color-alert);
    background-color: rgba(var(--color-alert-rgb), 0.15);
    border-color: currentColor;
}

.er-modal__header {
  border-color: var(--color-grey-light);
  color: var(--color-grey-dark);
}

.er-modal__header .er-modal__title {
  color: inherit;
}

.er-modal__modal .job-title {
  color: var(--color-black);
}

.er-modal__summary-item {
  color: var(--color-black);
}

.er-modal__footer button {
  color: rgb(var(--white));
  background-color: var(--color-alternate);
}

.er-modal__footer button:hover {
  background-color: var(--color-alternate-light);
}

.tool-title svg {
  fill: var(--color-avatar-text);
}