:root {
  /* Colors */
  --yellow50: #e99413;
  --yellow60: #f0b51e;
  --blue60: #063c84;
  --blue50: #1a58ac;

  /* Black */
  --black10: #ffffff;
  --black20: #f7f7f8;
  --black25: #f2f2f3;
  --black30: #d8d8da;
  --black40: #bcbdc2;
  --black50: #7a797e;
  --black60: #64626a;
  --black65: #716f77;
  --black70: #58565c;
  --black80: #3b3a3e;
  --black85: #49474e;
  --black90: #2b2b2e;
  --black95: #262528;
  --black100: #231f20;
  --blackgradient: linear-gradient(90deg, #2d2c30 0%, #231f20 67.71%);

  /* Red */
  --red70: #790016;
  --red10: #ffe5ea;
  --red20: #f7bac5;
  --red30: #df9fab;
  --red40: #c06c71;
  --red50: #b8141e;
  --red60: #990009;
  --red80: #610012;
  --red90: #4d000e;
  --red100: #330009;
  --redgradient: linear-gradient(90deg, #4d000e 22.92%, #330009 100%);
}

.avatar-icon {
  border-radius: 50px !important;
  width: 44px !important;
  height: 44px !important;
}
.avatar-icon-xl .avatar-icon {
  width: 64px !important;
  height: 64px !important;
}

/* Navbars */
.app-header {
  background-color: var(--primary-black80) !important;
  background: var(--primary-black80) !important;
}

.app-header__logo {
  background: none !important;
}

.app-header__logo .logo-src {
  width: 140px !important;
  height: auto;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-image: url("../../images/nb-logo-w.png") !important;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  background-color: var(--black30) !important;
}

/* Sidebar */
.scrollbar-sidebar,
.app-sidebar {
  background-color: var(--black95) !important;
}

.closed-sidebar .scrollbar-sidebar .avatar-icon {
  width: 34px !important;
  height: 34px !important;
}

.scrollbar-sidebar .avatar-icon,
.app-container.sidebar-mobile-open .avatar-icon {
  width: 80px !important;
  height: 80px !important;
}

.closed-sidebar .app-sidebar .app-sidebar__inner .app-sidebar__heading::before {
  background: var(--black60) !important;
}

.scrollbar-sidebar li {
  padding: 0.4em 0em;
}

.scrollbar-sidebar a {
  color: var(--black40) !important;
}

.scrollbar-sidebar .metismenu-icon {
  color: #fff !important;
}

.scrollbar-sidebar a:hover {
  color: var(--black10) !important;
  background-color: var(--red80) !important;
}

.vertical-nav-menu ul:before {
  background: var(--red60) !important;
}

.app-main {
  background-color: var(--black90) !important;
}

.card {
  background-color: var(--black10) !important;
}
.bootstrap-table .fixed-table-container .table thead th {
  color: #fff;
  background-color: #231f20;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Login and register box padding */
.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 3rem !important;
}

/* New logo for login and register */
.app-logo-inverse {
  height: 29px;
  width: 200px;
  background: url(../../images/nb-logo-w.png) no-repeat;
  background-size: 200px;
}

/* New background as per NB template */
.bg-nb-plate {
  background-image: linear-gradient(
    150deg,
    #790016 0%,
    #231f20 100%
  ) !important;
}

/* Table styles */
.bootstrap-table-filter-control-insight,
.bootstrap-table-filter-control-campaign_name,
.bootstrap-table-filter-control-type,
.bootstrap-table-filter-control-adset_name,
.bootstrap-table-filter-control-ad_name,
.leadgen-form-table .selectize-input,
.bootstrap-table-filter-control-leadsource {
  color: #fff !important;
  background-color: var(--red70) !important;
  text-align: center;
  vertical-align: middle;
  font-size: 12px !important;
  border-radius: 0 !important;
}
.bootstrap-table .fixed-table-container .table thead th {
  color: #fff;
  background-color: #231f20;
  text-align: center !important;
  vertical-align: middle !important;
}
.bootstrap-table .fixed-table-toolbar .btn-group .btn {
  background-color: var(--red70) !important;
  border: 1px solid var(--red80) !important;
  height: 35px;
}
.fixed-table-pagination
  .pagination-detail
  .page-list
  .dropdown
  .dropdown-toggle {
  background-color: var(--red70) !important;
  border: 1px solid var(--red80) !important;
}
.fixed-table-pagination .pagination .page-pre .page-link {
  color: var(--red70) !important;
}
.fixed-table-pagination .pagination .page-item.active .page-link {
  background-color: var(--red70) !important;
  border: 1px solid var(--red80) !important;
  color: #fff !important;
}
.fixed-table-pagination .pagination .page-item .page-link {
  color: var(--red70) !important;
  border: none !important;
}
.fixed-table-pagination .pagination .page-next .page-link {
  color: var(--red70) !important;
}
.fixed-table-pagination .pagination-info,
.fixed-table-pagination .page-list {
  color: var(--red90);
}
.fixed-table-pagination .dropdown-menu .dropdown-item.active {
  background-color: var(--red70) !important;
}
.nb-tbl-tabs .nav .nav-item {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.nb-tbl-tabs .nav .nav-link.active {
  color: var(--red70) !important;
  background-color: #fff;
  height: 100%;
  padding: 1rem;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.nb-tbl-tabs .nav .nav-link.active::before {
  background-color: var(--red70) !important;
}
/* End of Table styles*/

/* Monitoring page styles */
.description {
  display: flex;
  align-items: center;
}

.description .err-char-limit {
  display: inline-block;
  width: 60ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

span.err-char-limit {
  width: 45ch;
}
.read-more {
  display: inline-block;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  color: #0000ee;
  white-space: nowrap;
}
button.read-more:focus {
  outline: none;
}
#descModal .modal-content {
  max-height: 90vh;
}
#descModal .modal-content .modal-body {
  max-height: 90vh;
  overflow: auto;
}
/* End of Monitoring page styles */

/* General styles */
.bg-nbbody {
  background-color: var(--black90) !important;
}
.bg-nbheader {
  background-color: var(--black80) !important;
}
.bg-nbchart {
  background-color: var(--black80) !important;
}
.bg-nbred,
.btn-nbred {
  background-color: var(--red70) !important;
}
.btn-nbred {
  border: 1px solid var(--red70) !important;
  color: white !important;
}
.text-nbred {
  color: var(--red70) !important;
}
.btn-nbyellow {
  background-color: var(--yellow60) !important;
  border: 1px solid var(--yellow50) !important;
  color: black !important;
}
.text-nbblack {
  color: var(--black100) !important;
}
.bg-nbtable {
  background-color: var(--black30) !important;
}
.card-title,
.modal-title {
    color: var(--black100) !important;
}
/* End of General styles */

/* daterangepicker styles */
.datepicker .input-group-prepend,
.daterangepicker .ranges li.active,
.daterangepicker td.active, 
.daterangepicker td.active:hover,
.drp-buttons .btn-primary,
.drp-buttons .btn-primary:hover,
.daterangepicker td.available:hover, 
.daterangepicker th.available:hover
{
  background-color: var(--red70) !important;
}
.drp-buttons .btn-primary {
  border: 1px solid var(--red80) !important;
}

.daterangepicker td.off, 
.daterangepicker td.off.in-range, 
.daterangepicker td.off.start-date, 
.daterangepicker td.off.end-date {
  color: var(--black25) !important;
}

.datepicker .input-group-prepend .input-group-text {
  background-color: var(--red70);
  border: 1px solid var(--red70);
  color: white !important;
}
.datepicker input[name="daterange"],
.datepicker input[name="campaign_start"],
.datepicker input[name="campaign_end"] {
  background-color: var(--red70);
  border: 1px solid var(--red70);
  color: white !important;
  cursor: pointer;
}
.icon-wrapper .icon-wrapper-bg {
  opacity: 1 !important;
}
#daterange-call-tracking,
#daterange-create-leads-fail,
#daterange-user-activity,
#daterange-leads,
#daterange-pbx,
#daterange-consent
{
  min-width: 200px;
}
.daterangepicker {
  z-index: 9999 !important;
}
/* End of daterangepicker styles */

.bg-dark {
  background-color: #343a40 !important;
}

/* Start Footer */
.app-footer,
.app-footer a,
.app-footer b,
.app-footer__inner {
  background-color: var(--black80) !important;
  border: 1px solid var(--black80) !important;
  color: white !important;
}
/* End Footer */

/* Styles for asset assignment page */
.page-title {
    color: var(--black30) !important;
}
/* End of styles for asset assignment page */

/* Leadgen page styles */
.leadgen-form-table input[type="select-one"]::placeholder {
  color: white;
}
.leadgen-form-table .selectize-control.single .selectize-input.dropdown-active:after {
  border-color: transparent transparent #fff transparent;
}
.leadgen-form-table .selectize-control.single .selectize-input:after {
  border-color: #fff transparent transparent transparent;
}

/* End of leadgen page styles */

/* Un aligned table action button */
.fixed-table-toolbar .columns {
  line-height: 32px !important;
}

/* Navbar styles */
.app-header__content a {
  color: var(--black30) !important;
}
/* End of navbar styles */

/* Styling for forms */
#adaccount label,
#insert-form label,
#add-leadgen label,
#usersEdit label {
  color: var(--red70) !important;
  font-weight: bold;
}
/* Styling for card headers */
.card-header {
  color: var(--black100) !important;
}

.breadcrumb-item a {
  color: var(--red50);
}
.leads label,
.pbx label {
  color: var(--black30);
}
#consent-input,
#consent-input:hover,
#consent-input:focus,
#consent-input:active {
  border-color: var(--red70);
  box-shadow: none;
}

.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(even),
.bootstrap-table .table:not(.table-condensed) > tfoot > tr > th {
  color: #000 !important;
}

.app-logo {
  height: 25px;
  width: 200px;
  background: url(../../images/logo-inverse.png);
}